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

Question

我一直在尝试在多个设备上测试我的 jquery 移动应用程序。我目前有一个通过滑动或单击“菜单”按钮打开的面板。

但是，在宽屏幕上，该应用程序看起来很时髦。太宽了。我知道这是针对移动设备的，但是，为什么不将它也格式化为 ipad/surface/androids 呢？

为此，我想通过要求面板在宽度超过特定值时始终打开来缩短宽度。

我仔细阅读了文档，发现最接近的内容是:

class="ui-responsive-panel" 来自以下链接:http://view.jquerymobile.com/master/docs/widgets/panels/panel-fixed.php

将它添加到我的页眉后，我注意到当窗口很宽时我无法“滑动”菜单。当我缩小窗口时(无论是在 PC 浏览器上，还是通过旋转设备)，它都可以滑动。

有没有人对此很熟悉，并愿意透露一些信息？

Answer 1

我遇到了同样的问题。我希望当用户将设备切换为横向模式(平板电脑)时或窗口一开始就比特定宽度宽时，面板保持打开状态。

不幸的是，在这种情况下，我没有找到任何解决方案和响应式面板的 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 函数需要提供相同的功能，以防用户将设备从纵向模式切换到横向模式。

希望对您有所帮助。但我仍在寻找更好的解决方案；)