0

私の Android JQM app には、5 つのタブのタブ付きレイアウトがありますnavbar。各タブは永続的なヘッダーのようなものです。以下は、2番目のタブのコードです。
複数のタブにまたがるスワイプを実装するにはどうすればよいですか?

<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 に答える