jquery mobile - 强制面板在更宽的屏幕上打开 [英] jquery mobile - forcing panel open on wider screens

问题描述

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

I've been trying to test my jquery mobile app on multiple devices. I currently have a panel that is opened via swipe or clicking on a 'menu' button.

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

However, on wide screens, the app just looks funky. WAY too wide. I understand this is meant for mobile, but, why not format it for ipads/surface/androids as well?

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

To do this, I'd like to shorten the width by requiring the panel to be open at all times when the width exceeds a specific value.

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

I've dug through the documentation, and the closest thing I found was:

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

将它添加到我的页眉后，我注意到当窗口很宽时我无法滑动"菜单.当我缩小窗口时(在 PC 浏览器上，或通过旋转设备)，它可以被滑动.

After adding it to my page header, I noticed that I can't 'swipe' the menu away when the window is wide. When I shrink the window (either on a pc browser, or by rotating the device), it can be swiped.

有没有人熟悉这个并愿意透露一些信息?

Is anyone familiar with this, and willing to shed some light?

推荐答案

我面临同样的问题.我希望当用户将设备置于横向模式(平板电脑)或窗口一开始的宽度超过特定宽度时，面板保持打开状态.

I'm facing the same problem. I want the panel to stay open when the user turns the device in landscape mode (tablets) or if the window is wider than a specific width at the very beginning.

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

Unfortunately I did not find any solutions and the jQuery Mobilele example for responsive panels in this case.

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

So I found a way by using some javascript but I'm not happy with this solutions since a pure CSS solution with media queries would be nicer.

但是，这是我的解决方法"解决方案.

However, here is my "workaround" solution.

<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 函数需要提供相同的功能，以防用户将设备从纵向模式转换为横向模式.

So if the window inner width is higher than 800, the panel opens; if it is lower than 800 it closes. Furthermore the window.onresize function is required to provide the same functionality in case the user turns the device from portrait mode to landscape mode.

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

Hope it helped. But I'm still looking for a better solution ;)

这篇关于jquery mobile - 强制面板在更宽的屏幕上打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！