2

我正在尝试建立一个使用面板和滑块的 JQuery Mobile 1.3 站点。

问题是，当我将滑块向右移动时，使用滑块会触发面板，该面板会在“swiperight”事件中打开。滑块用于分页，面板用于菜单。

代码在这里：

http://jsfiddle.net/kMARn/1/

将滑块向右移动，面板将打开。

我尝试使用面板的 .not() 选择器不对滑块做出反应：

$(document).not("#slider").on("swiperight", function(event, ui) {
    $("#myPanel").panel("open");
});

但它不起作用，当我将滑块向右移动时面板会打开。也尝试了一堆变种，但我迷路了......

有任何想法吗？

谢谢！

4

4 回答 4

2

派对有点晚了，但您可以通过在面板 div 上将 data-swipe-close 属性设置为“false”来禁用滑动关闭。

http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/options.html

于 2013-02-05T15:07:01.900 回答
1

就我而言，我使用了这个简单的代码，面板中没有data-swipe-close = "false"。在滑块外部向右滑动以保持面板关闭。

$('#panel').find('#slider')
    .on('slidestop',function(e,ui) {
        var value = e.target.value;
        //...operations with slider value...
    })
    .parent().on('swiperight',function(e,ui) {
        e.stopPropagation();  //block panel close
    })
于 2013-06-02T21:01:53.170 回答
0

来自 Swipe 的 1.3.0b1 文档：

“在 1 秒内发生 30 像素或更多（垂直小于 75 像素）的水平拖动时触发”

这适用于并且也可以配置swiperight。您可以使滑块的长度变小，这样可以确保不会同时触发滑块事件停止和滑动，但这可能不适用于所有场景。

更好的方法是将向右滑动绑定到DIV页面的一个或部分。我的意思是，如果您在显示屏的左侧有一个 75 px 的 div 框，并且当该 div 内发生滑动事件时，它可能会触发菜单。

我觉得这里的逻辑可能更好地由一个按钮控制，就像在 Facebook 应用程序中用来显示滑出菜单一样。在 Android 上的 Dolphin 浏览器中，这种类型的事件也会触发书签菜单，所以如果一个页面有 swiperight 事件并触发它，我有时会从 App 中同时获取事件和书签菜单。恼人的！

我确实分叉了你的 jsfiddle，并且会更多地使用它（http://jsfiddle.net/Twisty/Hg2pw/）。仅供参考，他们的可用框架中有 JQM 1.3.0b1，因此您不必在 HTML 中链接它。如果我找到更多信息，我会在这里发表评论。

于 2013-01-22T00:22:07.810 回答
-1

以下解决方案更像是一种解决方法。不过应该比较靠谱。

$(document).ready( function () {

    var menu_available = true;

    $(document).on("swiperight", function(event, ui) {
        if (menu_available) $("#myPanel").panel("open");
    });

    $("#slider").on("slidestop", function( event, ui ) { 
        menu_available = false;
        window.setTimeout(function() {menu_available= true;},250);
    }); 
});

该变量menu_available在false幻灯片停止后持续 250 毫秒。该window.setTimeout块将重置变量，以便菜单再次可用。

这是一个愚蠢的解决方法，但是 jQuerys function event.stopEventPropagation()，恕我直言，这是正确的方法，但没有奏效。

于 2013-01-22T08:47:58.400 回答