CODEWITHSUNDEEP
jqueryjquery-mobile
Marnix
Marnix

Reputation: 6547

Combine jquery mobile tabs with panel

I have created a simple tabs widget that contains a navbar and two content parts. I have also added a panel that will contain the menu buttons to navigate through those tabs parts.

What I want is remove the navbar-tabs from the tabs widget and only let it work via the panel widget.

There are a couple of things that I come across. I can solve them with javascript, but I hope that there is a more tidy way to solve this within the framework.

How can I close the panel and go to the respective tabs page?

<body>
    <div data-role="page">
        <div data-role="panel" id="navpanel" data-display="overlay">
            <ul>
                <li><a href="#news" class="ui-btn">News</a></li>
                <li><a href="#contact" class="ui-btn">Contact</a></li>
            </ul>
        </div>

        <div class="ui-content" role="main">
            <a class="ui-btn" href="#navpanel">Menu</a>
            <div data-role="tabs" id="tabs">
                <div data-role="navbar" id="navbar-tabs">
                    <ul>
                        <li><a href="#news" data-ajax="false" class="ui-btn-active">News</a></li>
                        <li><a href="#contact" data-ajax="false">Contact</a></li>
                    </ul>
                </div>

                <div id="news" class="ui-content">Some news</div>
                <div id="contact" class="ui-content">Contact data</div>
            </div>
        </div>
    </div>
</body>

http://jsfiddle.net/cnu9zn58/

I have already tried the following, but I don't like it. Somehow this code executes on my own webpage and it doesn't set the ui-btn-active class.

$(document).ready(function(){
    $("#navpanel a").click(function()
    {
        var href = $(this).attr("href");

        // trigger the actual navbar to switch
        $("#navbar-tabs a[href='" + href + "']").trigger('click');

        $("#navpanel").panel("close");
    });
});

Upvotes: 0

Views: 243

Answers (1)

ezanker
ezanker

Reputation: 24738

jQM uses the jQueryUI tabs widget, so you can use the active option to set the active tab by index:

http://api.jqueryui.com/tabs/#option-active

In the panel links, use data attributes to store the target tab index, e.g.:

<div data-role="panel" id="navpanel" data-display="overlay">
    <ul>
        <li><a href="#" class="ui-btn ui-btn-active" data-idx="0">News</a></li>
        <li><a href="#" class="ui-btn" data-idx="1">Contact</a></li>
    </ul>
</div>

Then for the tabs widget to work, you have to leave the navbar in the markup, however, you can set its display style to none in order to hide it:

#tabs [data-role="navbar"] {
    display: none;
}

Then your javascript becomes:

$(document).on("pagecreate", "#page1", function () {

    $("#navpanel a").click(function () {        
        $("#navpanel a").removeClass("ui-btn-active");
        $(this).addClass("ui-btn-active");
        var idx = parseInt($(this).data("idx"));
        $("#tabs").tabs( "option", "active", idx );
        $("#navpanel").panel("close");
    });

});

Updated FIDDLE

Upvotes: 1

Related Questions