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

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

然而，在大屏幕上，这个应用看起来很时髦。太宽了。我知道这是针对移动设备的，但是，为什么不将其格式化为iPad/surface/androids呢

为了做到这一点，我想通过要求面板在宽度超过特定值时始终打开来缩短宽度

我翻遍了文档，找到的最接近的东西是：

class=“ui响应面板”

来自以下链接：

在将它添加到我的页面标题后，我注意到当窗口很宽时，我无法“滑动”菜单。当我缩小窗口（在pc浏览器上或通过旋转设备）时，可以滑动窗口

---

有人熟悉这一点，并愿意透露一些信息吗

我也面临同样的问题。我希望当用户在横向模式（平板电脑）下转动设备时，或者如果窗口刚开始时超过特定宽度，面板保持打开状态

不幸的是，在这种情况下，我没有找到任何解决方案和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>

window.onresize=函数（事件）{
如果（window.innerWidth>800）{
设置超时（openPanel，1）；
}
如果（窗内宽度<800）{
设置超时（关闭面板，1）；
}
};
函数closePanel（）{
美元（“#我的面板”）。面板（“关闭”）；
}
函数openPanel（）{
美元（“#我的面板”）。面板（“打开”）；
}
$（“#mypanel”）。在（“panelcreate”上，函数（事件，ui）{
如果（window.innerWidth>800）{
openPanel（）；
}
如果（窗内宽度<800）{
封闭面板（）；
}
});

因此，如果窗口内部宽度大于800，面板将打开；如果低于800，则关闭。此外，如果用户将设备从纵向模式转到横向模式，则需要使用

window.onresize

功能来提供相同的功能

---

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

我为这个问题找到了一个简单得多的css专用解决方案。 在响应面板的媒体查询中

@media（最小宽度：55em）{…}

添加/覆盖以下css类：

.ui-panel-closed {  width: 17em; }

.ui-panel-content-wrap.ui-body-c.ui-panel-animate.ui-panel-content-wrap-closed{     margin-left:17em; }

第二类可能与您的不同，具体取决于您使用的样例；在这种情况下，它是“C”。但是，只需使用contentwrap类，它会包装所有的页眉、内容和页脚区域

在我的示例中，我使用了一个带有

data display=“display”data position=“left”

的面板，如果希望它出现在右侧，只需将

margin left:17em

更改为

margin right:17em

如果你想让面板表现得像“叠加”，那就忘了我贴的第二个类吧。。。 致以最诚挚的问候

以下是我的“CSS”解决方案。您需要知道：

mnuMenu

是我希望在屏幕左侧始终可见的面板id，

lnkMenu

是按钮的标签id，通常在较小的屏幕宽度上显示面板

    @media all and (min-width: 900px)
    {
        #mnuMenu
        {
            visibility: visible;
            position: fixed;
            left: 0;
            float: left;
            width: 300px;
            height: 100vh;
            background: none;
            -webkit-transition: none !important;
            -moz-transition: none !important;
            transition: none !important;
            -webkit-transform: none !important;
            -moz-transform: none !important;
            transform: none !important;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;           
        }

        #lnkMenu
        {
            display: none;
        }

        .ui-content
        {
            margin-left: 325px;
        }
    }

---

我现在正面临这个问题，我发现mJay的解决方案非常有用。不过，最好改用媒体查询，比如：

 @media (min-width:35em){
    .ui-panel{
        width:30em;
    }
    .ui-panel-close { width:30em; }
}

---

我也在寻找解决方案。如果你能让它工作，请告诉我。美好的当然完成了任务，这是一个很好的开始。我还没有实现这个功能，但是当您点击内容区域时，它会像正常使用时一样关闭吗？您可以将类“ui responsive panel”添加到页面包装器中（数据角色=页面元素）。然后你应该在jqm css（@media（min-width:35em）中编辑你的媒体查询，编辑的宽度与我在上面发布的js中选择的宽度相同。这在jQuery Mobile 1.4.5中不起作用。而且我认为，如果你的应用程序使用页眉或页脚，任何版本都不会起作用，因为它们的左边距没有正确调整。