Jquery Mobile Panel滑动事件和标签在页面内滑动事件?

时间:2015-07-13 13:40:09

标签: jquery-mobile tabs panel swipe

我在单个html中有多个页面。 我有一个外部面板,可以在所有页面中轻扫(面板可以打开和关闭)。在一个页面中,我有滑动标签功能。 Panel和Swipe Tabs功能现在都很好.. 我的问题是,当我来滑动标签页,滑动标签也会拉动面板,如何调整这些滑动事件?,如何正确检测滑动标签和面板滑动事件。

这里创建了DEMO,我还需要一个面板,它也可以通过滑动事件打开和关闭。用户可以在滑动和滑动之间滑动以打开和关闭左侧面板,面板必须是外部的,因此它可以在整个页面中使用。 不幸的是,小组没有在演示中工作,我不知道发生了什么,但在我的项目中工作。

1 个答案:

答案 0 :(得分:1)

要添加外部面板,您可以使用常规的jQuery文档:

var panel = '<div data-theme="a" data-role="panel" data-display="overlay" id="leftpanel"><ul data-role="listview"><li data-icon="false"><a data-ajax="false" href="index.html">Home</a></li><li data-icon="false"><a data-ajax="false" href="html/examples.html">Examples</a></li><li data-icon="false"><a data-ajax="false" href="html/custom/version.html">Version 1.0.1</a></li></ul></div>';

$(function () {
    $("body").prepend(panel);
    $("[data-role=panel]").panel().enhanceWithin();
});

然后你可以听内容div上的滑动来更改标签和标题div来打开/关闭面板:

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

// Navigation  Drawer Swipe Listener
$("div[data-role=header]").on("swipeleft swiperight", function (e) {
    // save swipe direction right/left
    var dir = 'prev';
    if (e.type == 'swiperight') {
        dir = 'next';
    }
    if (dir == 'prev') {
        $('#leftpanel').panel('close');

    } else {
        $('#leftpanel').panel('open');

    }
});
  

更新了 FIDDLE