jQuery Mobile響應面板關閉問題

jQuery Mobile 1.3.0有可能使用響應面板。除了「在寬屏幕上關閉關閉功能」功能外，它幾乎功能齊全。jQuery Mobile響應面板關閉問題

的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時上方看到的內容是越來越寬上調整屏幕（我的例如平板電腦，所以這是有效的），但是輕拍上的解僱（data-dismissible =「true」）沒有被禁用（通過顯示：無;）。這導致在面板打開時，如果沒有面板關閉，我不能「使用」內容。

我搜索了互聯網，並檢查了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; 
}

來源

2013-03-01 Joram Teusink

我最終設法得到這個工作。

關鍵是CSS類「ui-panel-dismiss-display-push」，它只適用於面板上的數據顯示屬性爲「push」的情況。

在你的情況下，更新CSS文件以使「ui-responsive-panel ui-panel-dismiss-display-」顯示爲「，其中」display：none;「它應該工作。

來源

2013-03-05 20:37:59

你可以提供一些細節嗎？它似乎不工作:(。更新我的問題。它似乎只是簡單地忽略（顯示器沒有）。在Android 4.0.4和Android 4.2.2上試用過。 – 2013-03-06 21:16:04

我添加了.ui-panel-dismiss {顯示：無！重要;}它爲我工作，謝謝！ – Rockafella 2013-10-22 14:38:30

jQuery Mobile響應面板關閉問題

回答

相關問題