How to indicate the active tab??

ajmalmsali commented 11 years ago

Adding a blue button may indicate that is active, but how?? which class??

ajmalmsali commented 11 years ago

<!DOCTYPE html>
<html>
<head>
    <title>SV-Talk</title>
    <link rel="stylesheet" href="css/BlackBerry-JQM-all.css" />
    <script src="js/BlackBerry-JQM-all.js"></script>
</head>

<body>

<div data-role="page" id="events">

    <div data-role="footer" data-position="fixed">
        <div id="action-bar-area" data-role="actionbar">
            <div id="t1" data-role="tab">
                <img src="generic_81_81_placeholder.png" alt="" />
                <p>Events</p>
            </div>
            <div id="t2" data-role="tab" href="#villagers">
                <img src="generic_81_81_placeholder.png" alt="" />
                <p>Villagers</p>
            </div>
            <div id="t3" data-role="tab">
                <img src="generic_81_81_placeholder.png" alt="" />
                <p>News</p>
            </div>
            <div id="t4" data-role="tab" data-overflow="true">
                <img src="generic_81_81_placeholder.png" alt="" />
                <p>Ideas</p>
            </div>
            <div id="t5" data-role="tab" data-overflow="true">
                <img src="generic_81_81_placeholder.png" alt="" />
                <p>Projects</p>
            </div>
            <div id="t6" data-role="tab" data-overflow="true">
                <img src="generic_81_81_placeholder.png" alt="" />
                <p>Forums</p>
            </div>
            <div id="sva1" data-role="action" data-overflow="true">
                <img src="generic_81_81_placeholder.png" alt="" />
                <p>Logout</p>
            </div>
            <div id="sva2" data-role="action" data-overflow="true">
                <img src="generic_81_81_placeholder.png" alt="" />
                <p>About</p>
            </div>
        </div>

</div>

</div>

</body>
</html>

mdabydeen commented 11 years ago

Hey @ajmalmsali , I don't quite understand the issue here. Can you post some more details and/or sample code at JSFiddle

jasondscott commented 11 years ago

$('[data-role="tab"]').bind('vclick', function(data) {
    $(".action-bar-tab-item").removeClass('pressed');
    $(this).addClass('pressed');
});

or

$("#t1").bind('vclick', function(data) {
    $(".action-bar-tab-item").removeClass('pressed');
    $(this).addClass('pressed');
});

should work for you

blackberry / jQueryMobile-BB10-Theme

How to indicate the active tab?? #59