jquery mobile - forcing panel open on wider screens

问题

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.

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" from the following link: http://view.jquerymobile.com/master/docs/widgets/panels/panel-fixed.php

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?

回答1:

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.

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

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>

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 ;)

回答2:

I found a css-only solution for that issue that is much simpler. In the media query for your responsive panel @media (min-width:55em){...} add/overwrite the following css classes:

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

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

The second class might be different to yours depending on the swatch you are using; in this case it is "C". However, just take the content wrap class that wraps all your header,content, footer area.

In my example I used a panel with data-display="reveal" data-position="left" If you want it appearing on the right hand side just change margin-left:17em to margin-right:17em

If you want the panel to behave like "overlay", just forget about the second class i posted... Best regards

回答3:

I am facing the problem right now and I found the solution of mJay really useful. However it would be great to use media queries instead, something like this perhaps:

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

回答4:

Below is my "CSS" solution. What you need to know: mnuMenu is the id of the panel that I want to always have visible on the left side of the screen and lnkMenu is the id of the a tag for the button which normally shows the panel on smaller screen widths.

    @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;
        }
    }

来源：https://stackoverflow.com/questions/14960044/jquery-mobile-forcing-panel-open-on-wider-screens

标签

jquery-mobile