0

在我的 Android JQM 应用程序中，我有一个包含 5 个选项卡的选项卡式布局navbar。每个选项卡就像一个持久的标题。以下是第二个选项卡的代码。
现在如何实现跨多个标签的滑动？

<div data-role="header" data-position="fixed" data-id="headernav">
    <h1>Header1</h1>
    <a href="index.html" class="ui-btn-left" data-icon="home">Home</a>
    <div data-role="navbar">
       <ul>
            <li>
                <a href=" Description.html" data-transition="slide" ><b>Description </b></a>
            </li>
            <li>
                <a href="illustration3.html" data-transition="slide" class="ui-btn-active ui-state-persist" ><b>Illustration</b></a>
            </li>
           <li>
                <a href=" Complications.html" data-transition="slide" ><b>Complications</b></a>
            </li>
           <li>
                <a href="Indications.html" data-transition="slide" ><b>Indications</b></a>
            </li>
            <li>
                <a href="Equipment.html" data-transition="slide"><b>Equipment</b></a>
            </li>
        </ul>
    </div>
</div>
4

1 回答 1

1

您可以像这样使用swipeleft和swiperight 事件：

function changeNavTab(left) {
    var $tabs = $("div[data-role=navbar] li a", $("div[data-role=page].ui-page-active"));
    var curidx = $tabs.closest("a.ui-btn-active").parent().index();
    var nextidx = 0;
    if (left){
        nextidx = (curidx == $tabs.length - 1) ? 0 : curidx + 1;
    } else {
        nextidx = (curidx == 0) ? $tabs.length - 1 : curidx - 1;
    }
    $tabs.eq(nextidx).click();
}

$("div[data-role=content]").on("swipeleft", function(event){
    changeNavTab(true);
});

$("div[data-role=content]").on("swiperight", function(event){
    changeNavTab(false);
});

工作示例（jsFiddle）在这里

于 2013-01-12T07:12:52.507 回答