Question

我创建了一个简单的标签小部件，其中包含一个导航栏和两个内容部分。我还添加了一个面板，其中包含用于浏览这些标签部分的菜单按钮。

我想要的是从标签小部件中删除navbar-tabs，只让它通过面板小部件工作。

我遇到过几件事。我可以用javascript解决它们，但我希望在框架内有更整洁的方法来解决这个问题。

如何关闭面板并转到相应的标签页？

<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/

我已经尝试了以下内容，但我不喜欢它。不知何故，这段代码在我自己的网页上执行，并没有设置ui-btn-active类。

$(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");
    });
});

Answer 1

jQM使用jQueryUI选项卡小部件，因此您可以使用active选项按索引设置活动选项卡：

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

在面板链接中，使用数据属性存储目标选项卡索引，例如：

<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>

然后，要使标签窗口小部件起作用，您必须将导航栏保留在标记中，但是，您可以将其显示样式设置为无以隐藏它：

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

然后你的javascript变成：

$(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");
    });

});

更新了 FIDDLE

将jquery移动标签与面板结合使用

1 个答案: