3

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

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

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

我翻阅了文档，发现最接近的是：

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

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

有没有人熟悉这个，并愿意阐明一些？

4

4 回答 4

4

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

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

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

于 2013-03-13T11:39:15.647 回答
2

我为这个问题找到了一个更简单的 css-only 解决方案。在响应式面板的媒体查询中@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

如果您希望面板表现得像“覆盖”，请忘记我发布的第二堂课......最好的问候

于 2013-03-18T12:55:13.267 回答
0

我现在正面临这个问题，我发现 mJay 的解决方案非常有用。但是，最好使用媒体查询来代替，可能是这样的：

 @media (min-width:35em){
    .ui-panel{
        width:30em;
    }
    .ui-panel-close { width:30em; }
}
于 2014-10-30T22:40:30.107 回答
-1

下面是我的“CSS”解决方案。您需要知道的：mnuMenu是我希望始终在屏幕左侧可见的面板的lnkMenuID，并且是通常在较小屏幕宽度上显示面板的按钮的 a 标签的 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;
        }
    }
于 2014-08-06T13:00:42.843 回答