jQuery Mobile Responsive Panel Dismiss issue

问题

It is possible in jQuery Mobile 1.3.0 to use responsive panels. It almost is fully functional, apart for the feature "disable dismiss on wide screens".

Index.html

<body>

        <div id="indexPage" data-role="page" data-theme="a" class="ui-responsive-panel">

            <!-- left panel  -->
            <div data-role="panel" id="panelMenuIndex" data-theme="b" data-position="left" data-display="reveal" data-dismissible="true" data-position-fixed="true" data-swipe-close="false">
                <ul id="panelListIndex" data-theme="b" data-role="listview"></ul>
            </div><!-- /panel -->

            <!-- right panel  -->
            <div data-role="panel" id="panelRightMenuIndex" data-theme="b" data-position="right" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="false">
                <ul id="panelRightListIndex" data-theme="b" data-role="listview"></ul>
            </div><!-- /panel -->

            <div data-role="header" data-tap-toggle="false" data-position="fixed" data-theme="a">
                <div>
                    <p class="headerBarText"><img id="headerTitleIndex" onclick="togglePanel('#panelMenu' + window.divIdGlobal);" class="headerIconTitle" src="images/icons/ic_launcher_full_arrow.png" /><img id="headerShareIndex" onclick="share(window.shareTagSubject,window.shareTagText);" class="headerIconShare" src="images/icons/ic_action_share.png" /><img id="headerOverflowIndex" onclick="togglePanel('#panelRightMenu' + window.divIdGlobal);" class="headerIconOverflow" src="images/icons/ic_action_overflow.png" />
                    &nbsp;</p>
                </div>
            </div><!-- /header -->

            <div data-role="content" data-theme="a">

                <h1>My favorite wallpapers</h1>

                <div id="wpFavoriteImage"></div>

            </div><!-- /content -->

        </div><!-- /page -->
    </body>

The stylesheet part:

@media (min-width:35em){
    /* wrap on wide viewports once open */
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
        margin-right: 17em;
    }
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
        margin-left: 17em;
    }
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal {
        width: auto;    
    }
    /* disable "dismiss" on wide viewports */
    .ui-responsive-panel .ui-panel-dismiss-display-push {
        display: none;
    } 
}

So again, when using the CSS above a see the content is getting adjusted on wider screens (my tablet for instance ,so that works), but the dismiss on tap (data-dismissible="true") is not disabled (by display: none;). This results in that I cannot "use" content without the panel getting closed, when the panel is open.

I searched the internet and checked Github of jQuery, but did not find any known bug or solution.

jQuery (Mobile) framework and css files are loaded in the header of my html file. Content in the panels is dynamically added followed by: $('#panelMenuIndex').trigger("updatelayout"); and $('#panelRightMenuIndex').trigger("updatelayout");. Contents and panels are showing up just fine.

Anyone that can point me in a direction?

Also tried:

    /* disable "dismiss" on wide viewports */
.ui-responsive-panel.ui-panel-dismiss-display-reveal {
    display: none;
}

回答1:

I eventually managed to get this working.

The key is the CSS class, "ui-panel-dismiss-display-push", which only applies if your data-display attribute on the panel is "push".

In your case, update the CSS file to have a class of "ui-responsive-panel ui-panel-dismiss-display-reveal", with "display:none;" and it should work.

来源：https://stackoverflow.com/questions/15167964/jquery-mobile-responsive-panel-dismiss-issue

标签

jquery-mobile

panel