jquery-mobile – jquery mobile – 强制面板在更宽的屏幕上打开

我面临着同样的问题.当用户以横向模式(平板电脑)转动设备或者窗口宽度超过特定宽度时,我希望面板保持打开状态.

不幸的是,在这种情况下,我找不到任何解决方案和jQuery Mobilele示例,用于响应式面板.

所以我通过使用一些javascript找到了一种方法,但我对这个解决方案不满意,因为带有媒体查询的纯CSS解决方案会更好.

但是,这是我的“解决方法”解决方案.

<script type="text/javascript">

    window.onresize = function (event) {
        if (window.innerWidth > 800) {
            window.setTimeout(openPanel,1);
        }
        if (window.innerWidth < 800) {
            window.setTimeout(closePanel,1);
        }
    };

    function closePanel() {
        $("#mypanel").panel("close");
    }
    function openPanel() {
        $("#mypanel").panel("open");
    }

    $( "#mypanel" ).on( "panelcreate",function( event,ui ) {
        if (window.innerWidth > 800) {
            openPanel();
        }
        if (window.innerWidth < 800) {
            closePanel();
        }

    });
</script>

因此,如果窗口内部宽度高于800,则面板打开;如果它低于800则关闭.此外,在用户将设备从纵向模式转换为横向模式的情况下,需要window.onresize功能来提供相同的功能.

希望它有所帮助.但我仍在寻找更好的解决方案;)