In jQuery Mobile 1.3.0, you can use flexible panels. It is almost fully functional, except that the function "disable shutdown on wide screens."
Index.html
<body> <div id="indexPage" data-role="page" data-theme="a" class="ui-responsive-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> <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> <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" /> </p> </div> </div> <div data-role="content" data-theme="a"> <h1>My favorite wallpapers</h1> <div id="wpFavoriteImage"></div> </div> </div> </body>
Part of the stylesheet:
@media (min-width:35em){ .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; } .ui-responsive-panel .ui-panel-dismiss-display-push { display: none; } }
Thus, when using CSS above a see, the content is configured on wider screens (for example, on my tablet, so this works), but firing by pressing (data-dismissible = "true") is not disabled (by display: no;). This leads to the fact that I cannot “use” the content without closing the panel when the panel is open.
I searched the Internet and checked Github jQuery, but did not find any known errors or solutions.
jQuery (Mobile) and css files are uploaded to the header of my html file. The content in the panels is dynamically added, and then: $ ('# panelMenuIndex'). Trigger ("updatelayout"); and $ ('# panelRightMenuIndex'). trigger ("updatelayout") ;. Content and panels are displayed very well.
Anyone who can point me in the direction?
Also tried:
.ui-responsive-panel.ui-panel-dismiss-display-reveal { display: none; }
source share