Question

<div data-role="header" data-position="fixed" class="wow fadeIn">
            <a href="#leftpanel" class="ui-btn ui-btn-left"><i class="zmdi zmdi-menu"></i></a>
            <h1 class="wow fadeIn" data-wow-delay='0.4s'>Tabs</h1>

            <ul data-role="nd2tabs" >
                <li data-tab="friends">Friends</li>
                <li data-tab="work" data-tab-active="true">Work</li>
                <li data-tab="holiday">Holiday</li>
                <li data-tab="colors">Colors</li>
            </ul>

        </div>

我有来自natriveDroid2/Tabs的nativeDroid2b Tabs jquerymobile材料设计。

如何在此标签中启用滑动功能（即在标签内容之间切换）。

我为此编写了代码，但它无效：

$(function () {
            function changeNavTab(left) {
                var $tabs = $("div[data-role=nd2tabs] li ", $("div[data-role=nd2tabs].nd2Tabs-active"));
                var curidx = $tabs.closest("li.nd2Tabs-active").parent().index();
                console.log($tabs);
                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[role=main]").on("swipeleft", function (event) {

                changeNavTab(true);
            });

            $("div[role=main]").on("swiperight", function (event) {

                changeNavTab(false);
            });
        });

请提前帮助我。

Answer 1

首先，使用pagecreate而不是常规的jQuery document.ready：

$(document).on("pagecreate", "#page1", function () {
    $("div[role=main]").on("swipeleft", function (event) {
        changeNavTab(true);
    });

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

接下来，在changeNavTab（）中，选择器应该是ul [data-role =“nd2tabs”]而不是div [data-role =“nd2tabs”]：

function changeNavTab(left) {
    var $tabs = $('ul[data-role="nd2tabs"] li');
    console.log($tabs);
    var len = $tabs.length;
    var curidx = 0;
    $tabs.each(function(idx){
        if ($(this).hasClass("nd2Tabs-active")){
            curidx = idx;
        }
    });

    var nextidx = 0;
    if (left) {
        nextidx = (curidx >= len - 1) ? 0 : curidx + 1;
    } else {
        nextidx = (curidx <= 0) ? len - 1 : curidx - 1;
    }
    $tabs.eq(nextidx).click();

}

<强> DEMO

jQuerymobile nativedroid2 Tabs滑动

1 个答案: