Question

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

然而，在宽屏幕上，该应用程序看起来很时髦。太宽了。我知道这适用于移动设备，但是，为什么不为ipads / 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功能来提供相同的功能。

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

Answer 2

我发现这个问题的css解决方案要简单得多。在响应式面板@media (min-width: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”。但是，只需使用包装所有标题，内容，页脚区域的内容包装类。

在我的示例中，我使用了data-display="reveal" data-position="left"面板如果您希望它显示在右侧，只需将margin-left:17em更改为margin-right:17em

如果你想让面板表现得像“叠加”，那就忘了我发布的第二堂课...... 最好的问候

Answer 3

我现在正面临这个问题，我发现mJay的解决方案非常有用。然而，使用媒体查询会更好，也许这样：

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

Answer 4

以下是我的“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;
        }
    }

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

4 个答案: