2

在 jQuery Mobile 1.3.0 中可以使用响应式面板。除了“在宽屏上禁用关闭”功能外，它几乎功能齐全。

索引.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 时，看到内容正在更宽的屏幕上进行调整（例如，我的平板电脑，这样就可以了），但没有禁用点击关闭 (data-dismissible="true")（通过显示：没有任何;）。这导致当面板打开时，如果面板没有关闭，我就无法“使用”内容。

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

jQuery（移动）框架和 css 文件加载到我的 html 文件的标题中。面板中的内容是动态添加的，后跟： $('#panelMenuInde​​x').trigger("updatelayout"); 和 $('#panelRightMenuInde​​x').trigger("updatelayout");。内容和面板显示得很好。

谁能指点我一个方向？

也试过：

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

1 回答 1

3

我最终设法让这个工作。

关键是 CSS 类“ui-panel-dismiss-display- push ”，它仅适用于面板上的 data-display 属性为“push”的情况。

在您的情况下，将 CSS 文件更新为具有“ui-responsive-panel ui-panel-dismiss-display- reveal ”类，以及“display:none;” 它应该可以工作。

于 2013-03-05T20:37:59.273 回答