Question

我正在使用jQuery mobile创建一个侧面板。我有以下代码，它添加了滑动功能以显示侧面板：

$( document ).on( "pagecreate", "#swipe-page", function() {
    $( document ).on( "swipeleft swiperight", "#swipe-page", function( e ) {
        // We check if there is no open panel on the page because otherwise
        // a swipe to close the left panel would also open the right panel (and v.v.).
        // We do this by checking the data that the framework stores on the page element (panel: open).
        if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
            if ( e.type === "swipeleft" ) {
                $( "#right-panel" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
                $( "#left-panel" ).panel( "open" );
            }
        }
    });
});

我只希望在用户具有480px或更高的视口时启用此滑动。我该如何添加？在CSS中，效果将通过媒体查询创建。

Answer 1

对于那些感兴趣的人，这是我最终使用的黑客：

$( document ).on( "pagecreate", "#swipe-page", function() {
    $( document ).on( "swipeleft swiperight", "#swipe-page", function( e ) {
element (panel: open).
if($('#mobile-view').is(":visible")) {
        if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
            if ( e.type === "swipeleft" ) {
                $( "#right-panel" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
                $( "#left-panel" ).panel( "open" );
            }
        }
}
    });
});

基本上，我创建了一个受CSS媒体查询约束的元素，然后我在jQuery中测试了该元素的可见性。这样可以确保更好的跨浏览器兼容性，并且应该根据分辨率更改为移动设备进行更新。

Answer 2

我能想到的最简单的事情是

if($("body").width() >= 480) {
     //I'm a big boy now, swipe me

     //swiping code here
} else {
     //I am small: swiper no swiping, swiper no swiping, swiper no swiping.

     //do something else here if you want.
}

我认为你不应该对不同的浏览器有任何问题，但是对于这类事情，你应该在你的重要平台上进行广泛的测试。

这不会以与媒体查询相同的方式做出反应。例如，它不会（直接）支持在屏幕大小更改时修改行为。

什么是CSS媒体查询的jQuery等价物？

2 个答案: