JQuery移动响应面板驳回问题 [英] jQuery Mobile Responsive Panel Dismiss issue
本文介绍了JQuery移动响应面板驳回问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在jQuery Mobile 1.3.0中可以使用响应面板。除了"在宽屏上禁用解雇"功能外，它几乎是全功能的。
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" />
</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>
样式表部分：
@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;
}
}
我在互联网上搜索并检查了jQuery的Github，但没有找到任何已知的错误或解决方案。
jQuery(Mobile)框架和CSS文件加载在我的html文件的头中。面板中的内容是动态添加的，后面跟着：$(‘#panelMenuIndex’).$(‘#panelRightMenuIndex’).trigger("updatelayout")；.("updatelayout")；和updatelayout内容和面板显示正常。
有谁能给我指个方向吗？
还尝试：
/* disable "dismiss" on wide viewports */
.ui-responsive-panel.ui-panel-dismiss-display-reveal {
display: none;
}
推荐答案
我最终设法让它正常工作。
关键是css类，"ui-panel-dismiss-display-push"，仅在面板上的数据显示属性为"Push"时才适用。
在您的案例中，将css文件更新为具有"UI-Response-Panel ui-panel-dismiss-display-reveal"，"和"Display：None；"的类，它应该可以工作。
这篇关于JQuery移动响应面板驳回问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
