jQuerymobile nativedroid2选项卡滑动 [英] jQuerymobile nativedroid2 Tabs swipe

问题描述

<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素材设计. /p>

如何在此标签中启用滑动功能(即在标签内容之间切换).

我为此编写了代码，但没有用:

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

请帮助我，谢谢.

解决方案

首先，使用pagecreate代替常规的jQuery文档.准备好:

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

}

演示

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

I have nativeDroid2b Tabs jquerymobile material design from natriveDroid2/Tabs.

How can I enable swipe feature in this tabs (ie switch between tabs content).

I wrote code for this, but it's not working:

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

Kindly help me, thanks in advance.

解决方案

First, use pagecreate instead of the regular 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);
    });
});

Next, in changeNavTab(), the selector should be ul[data-role="nd2tabs"] instead of 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选项卡滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！