Jquery 页面内的移动面板滑动事件和选项卡滑动事件？

Question

我在单个 html 中有多个页面。我有一个外部面板，可以在所有页面中滑入和滑出（面板可以打开和关闭）。在一页中，我有滑动标签功能。 Panel 和 Swipe Tabs 功能现在都很好.. 我的问题是当我进入滑动标签页面时，滑动标签也会拉动面板，如何调整这些滑动事件？如何正确检测滑动标签和面板滑动事件。

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

Answer 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 上滑动以更改选项卡，并在 header div 至 open/close 面板上监听：

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

    }
});

Updated FIDDLE

Jquery 页面内的移动面板滑动事件和选项卡滑动事件？

Jquery Mobile Panel Swipe Event and Tabs Swipe Event Inside a page?

tabs

panel

swipe

jquery-mobile