如何在jQuery Mobile網站中創建邊欄？

我想簡單地創建一個像jQuery Mobile Demo Docs here上的邊欄。如何在jQuery Mobile網站中創建邊欄？

我已閱讀this question，並不太瞭解如何實施它。

關鍵是，我正在使用jQuery Mobile的大屏幕，如桌面，網絡書籍，平板電腦和更多的網站。對於移動網站，我只會使用沒有側邊欄的網站。

我自己也嘗試SplitView（code here），但它有點越野車，我想是因爲jQuery Mobile的恨側邊欄...

所以：

無論我想一個解決方案，以實現一個簡單的側邊欄就像jQuery Mobile's Docs上的一樣。
或者我想要一個像SplitView一樣準備好的庫來製作側邊欄。
或者我想要一個替代jQuery Mobile（支持jQuery Mobile的大多數功能），它支持一個側欄。

謝謝...：d

來源

2012-02-14 Arjun Bajaj

在JQM側的「邊欄」是用於平板/桌面顯示器，移動設備將它們堆疊我想。

如果您查看源代碼，你可以看到JQM有這個單獨的內容容器：

<div data-role="page" class="type-home"> 
    <div data-role="content"> 

     <div class="content-secondary"> 
      // sidebar here 
     </div> 

     <div class="content-primary"> 
      // content here 
     </div> 

    </div> 
</div>

UPDATE：

貌似JQM又增加了CSS文件來控制此：

http://jquerymobile.com/demos/1.0.1/docs/_assets/css/jqm-docs.css

來源

2012-02-14 18:12:53

我試了一下，但它只是沒有區別...我試圖應用浮法：左側邊欄和浮動：右側的內容區域，但兩個區域的寬度自動設置爲他們的內容大小。你可以進一步幫助... 謝謝...：D – 2012-02-14 19:00:11

你使用的是什麼版本的jQM？ jQuery版本和設備是否在測試？ – 2012-02-14 19:13:07

jQuery：1.6.4，jQuery Mobile：1.0.1，瀏覽器：Chrome 16，Firefox，Safari。所有給出相同的結果...：P – 2012-02-14 19:23:32

我有cre ated一個樣本jQuery Mobile應用程序，它的工作原理是這樣的 - 當屏幕尺寸很大時，會顯示分割視圖佈局。否則，可以通過標題中的按鈕完成導航。爲了在桌面瀏覽器中說明這一點，寬度檢查爲500px.If寬度> 500像素，拆分視圖。如果寬度< 500像素，在標題按鈕

這裏是源代碼：

<!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>

現場演示在這裏 - http://pastehtml.com/view/bo99qejac.html

來源

2012-02-15 18:47:34 user700284

創建使用jQuery移動的甚側邊欄簡單！只要看看本例：http://lab.cubiq.org/iscroll/examples/ipad/

這是工作與jQuery移動，下載它的命名iScroll，你可以在這裏下載：http://cubiq.org/iscroll-4

來源

2012-08-14 18:37:14 Random78952

大多數你會發現這樣做的插件，將無法正常工作的工作與Jquery移動。

iScroll 4不適用於JQUERY MOBILE。

有一個非常錯誤的fork，試圖使它與JQM一起工作，但在此線程中發佈的splitview示例不適用於它，並且不包括在內。

來源

2012-08-24 19:59:36 Jon