Question

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

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

Answer 1

您可以这样使用swipeleft和swiperight events：

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）是here

如何在导航栏中的持久标头的情况下实现滑动

1 个答案: