Question

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" />
                    &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>

样式表部分：

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

所以再一次，当使用上面的CSS时，看到内容在更宽的屏幕上调整（例如我的平板电脑，这样就有效），但是没有禁用点击（数据不允许=“真”）的消除（通过display：none;）。这导致当面板打开时，如果没有关闭面板，我就无法“使用”内容。

我搜索了互联网并检查了jQuery的Github，但没有发现任何已知的错误或解决方案。

jQuery（Mobile）框架和css文件加载在我的html文件的标题中。面板中的内容是动态添加的，然后是：$（'＃panelMenuIndex'）。trigger（“updatelayout”）;和$（'＃panelRightMenuIndex'）。trigger（“updatelayout”）;。内容和面板显示得很好。

任何可以指向我方向的人？

也尝试过：

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

Answer 1

我最终设法让这个工作。

关键是CSS类，“ui-panel-dismiss-display- push ”，仅当面板上的数据显示属性为“推送”时才适用。

在您的情况下，更新CSS文件以使用“ui-responsive-panel ui-panel-dismiss-display- 显示”，并使用“display：none;”它应该工作。

jQuery Mobile Responsive Panel Dismiss问题

1 个答案: