jQuery Mobile的 - 上的按鈕內容導航倒塌的肖像

我們正在接近JQM實例發展與佈局的應用here但我們希望相同的行爲煎茶移動，當（中左和右的內容目錄）它在肖像，內容表中的導航按鈕here jQuery Mobile的 - 上的按鈕內容導航倒塌的肖像

坍塌是否有可能做JQM？

2012-01-11 Oriol Terradas

我已經創建了一個示例jQuery Mobile的應用程序，它是這樣工作 - 當在縱向模式下，拆分視圖佈局將在橫向模式shown.When，導航可以通過在header.For一個按鈕示出此做桌面瀏覽器，我已經給了width檢查爲500px。如果width>500 px，拆分視圖。如果width <500px，標題中的按鈕。

這是源代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Page</title> 

     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
     <link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
     <script> 
      function showNavList() { 
       $(".navdiv").toggle(); 
      } 

      $(".page").live("pagebeforeshow", function() { 
       $(".navdiv").hide(); 
      }); 
     </script> 
     <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
     <style> 

     .content-secondary{ 
      margin: 0px !important; 
      padding:0px !important; 
     } 

     /*refer http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */ 
     /* Smartphones (landscape) ----------- */ 
     @media all and (min-width: 501px){/*For demo in desktop browsers,gave 501.Should be 321px.Refer above link*/ 
      .headerNav{ 
       display:none !important; 
      } 
      .content-secondary{ 
       display: block; 
      } 
      .navdiv{ 
       display:none !important; 
      } 
     } 

     /* Smartphones (portrait) ----------- */ 
     @media all and (max-width: 500px){/*320px*/ 
      .headerNav{ 
       display:block !important; 
      } 
      .content-secondary{ 
       display: none; 
      } 
     } 
     </style> 
    </head> 
    <body> 
     <div data-role="page" class="page" id="page1"> 
      <div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none"> 
       <ul data-role="listview"> 
        <ul data-role="listview" data-theme="c"> 
         <li class="ui-btn-active" data-icon="false"> 
          <a href="#page1">Page 1</a> 
         </li> 
         <li data-icon="false"> 
          <a href="#page2">Page 2</a> 
         </li> 
         <li data-icon="false"> 
          <a href="#page3">Page 3</a> 
         </li> 
        </ul> 
       </ul> 
      </div> 
      <div data-role="header"> 
       <h1>Page 1</h1> 
       <a href="#" class="headerNav" onclick="showNavList()">Navigation</a> 
      </div><!-- /header --> 
      <div data-role="content"> 
       <div class="content-primary"> 
        Content1 
       </div> 
       <div class="content-secondary"> 
        <ul data-role="listview" data-theme="c"> 
         <li class="ui-btn-active" data-icon="false"> 
          <a href="#page1">Page 1</a> 
         </li> 
         <li> 
          <a href="#page2" data-icon="false">Page 2</a> 
         </li> 
         <li> 
          <a href="#page3" data-icon="false">Page 3</a> 
         </li> 
        </ul> 
       </div> 
      </div><!-- /content --> 
     </div><!-- /page --> 
     <div data-role="page" class="page" id="page2"> 
      <div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none"> 
       <ul data-role="listview"> 
        <ul data-role="listview" data-theme="c"> 
         <li data-icon="false"> 
          <a href="#page1">Page 1</a> 
         </li> 
         <li data-icon="false" class="ui-btn-active"> 
          <a href="#page2">Page 2</a> 
         </li> 
         <li data-icon="false"> 
          <a href="#page3">Page 3</a> 
         </li> 
        </ul> 
       </ul> 
      </div> 
      <div data-role="header"> 
       <h1>Page 2</h1> 
       <a href="#" class="headerNav" onclick="showNavList()">Navigation</a> 
      </div><!-- /header --> 
      <div data-role="content"> 
       <div class="content-primary"> 
        Content2 
       </div> 
       <div class="content-secondary"> 
        <ul data-role="listview" data-theme="c"> 
         <li data-icon="false"> 
          <a href="#page1">Page 1</a> 
         </li> 
         <li class="ui-btn-active" data-icon="false" > 
          <a href="#page2">Page 2</a> 
         </li> 
         <li data-icon="false"> 
          <a href="#page3">Page 3</a> 
         </li> 
        </ul> 
       </div> 
      </div><!-- /content --> 
     </div><!-- /page --> 
     <div data-role="page" class="page" id="page3"> 
      <div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none"> 
       <ul data-role="listview"> 
        <ul data-role="listview" data-theme="c"> 
         <li data-icon="false"> 
          <a href="#page1">Page 1</a> 
         </li> 
         <li data-icon="false"> 
          <a href="#page2">Page 2</a> 
         </li> 
         <li data-icon="false" class="ui-btn-active"> 
          <a href="#page3">Page 3</a> 
         </li> 
        </ul> 
       </ul> 
      </div> 
      <div data-role="header"> 
       <h1>Page 3</h1> 
       <a href="#" class="headerNav" onclick="showNavList()">Navigation</a> 
      </div><!-- /header --> 
      <div data-role="content"> 
       <div class="content-primary"> 
        Content3 
       </div> 
       <div class="content-secondary"> 
        <ul data-role="listview" data-theme="c"> 
         <li> 
          <a href="#page1">Page 1</a> 
         </li> 
         <li> 
          <a href="#page2">Page 2</a> 
         </li> 
         <li class="ui-btn-active"> 
          <a href="#page3">Page 3</a> 
         </li> 
        </ul> 
       </div> 
      </div><!-- /content --> 
     </div><!-- /page --> 
    </body> 
</html>

這不是一個簡單的application.But只是一個粗略的副本來說明這個功能如何能夠done.There仍然很多事情要做，以使這個完美地工作。

爲了使它工作，我已經使用的media queries。採用它，你可以選擇隱藏的概念/顯示取決於瀏覽器的寬度（設備朝向）的佈局。

P.S.我已經使用jqm-docs.css此example.This CSS有其他媒體查詢過針對其他當你測試這個code.Please修改CSS刪除不需要的媒體查詢widths.So可能有一些奇怪的佈局問題。

讓我知道它是否有幫助

來源

2012-01-12 12:03:45 user700284

謝謝@ user700284！它工作得很好，也許菜單的風格很簡單，但不用擔心，我們知道如何解決它。謝謝。 – 2012-01-15 11:27:07

jQuery Mobile的 - 上的按鈕內容導航倒塌的肖像

回答

相關問題