jQuery Mobile Webサイトでサイドバーを作成するには？

jQuery Mobile Demo Docs hereのようなサイドバーを作成します。jQuery Mobile Webサイトでサイドバーを作成するには？

私はthis questionを読みましたが、それを実装する方法についてはあまり理解していませんでした。

重要なのは、デスクトップ、ネットブック、タブレットなどの大きな画面用にjQuery Mobileを使用してウェブサイトを作っている点です。モバイルサイトでは、サイドバーなしでサイトを使用します。

どちらか私は解決策は簡単なサイドバーを実装する：だから...

を

は私もSplitView（code here）を試してみましたが、そのビットバギーは、私はjQueryのモバイルサイドバーを嫌っているためだと思いますjQuery Mobile's Docsのようなものです。
または、サイドバーを作成するためにSplitViewのような用意されたライブラリが必要です。
または、サイドバーをサポートするjQuery Mobile（jQuery Mobileのほとんどの機能をサポートしています）に代わるものが必要です。

おかげで...：jQM側のD

出典

2012-02-14 Arjun Bajaj

「サイドバー」は、モバイルデバイスは、私が考えるそれらをスタックします、タブレット/デスクトップ表示のためです。

あなたがソースを表示した場合、あなたが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 –

どのバージョンのjQMを使用していますか？ jQueryのバージョン、およびデバイスはあなたがテストしていますか？ –

jQuery：1.6.4、jQuery Mobile：1.0.1、ブラウザ：Chrome 16、Firefox、Safari。すべて同じ結果を返す...：P –

私はcre atedこのように動作するサンプルjQuery Mobileアプリケーション - 画面サイズが大きい場合、分割ビューのレイアウトが表示されます。それ以外の場合、ヘッダーのボタンを使用してナビゲーションを実行できます。デスクトップブラウザでこれを説明するには、幅を500ピクセルとします。幅> 500ピクセルの場合、分割ビュー。 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>

ここでライブデモ - http://pastehtml.com/view/bo99qejac.html

出典

2012-02-15 18:47:34 user700284

は非常にjQueryのモバイルsのサイドバーを作成します。シンプル！ちょうどこのexempleを見て：http://lab.cubiq.org/iscroll/examples/ipad/

は、これはそれがiScrollという名前のダウンロードとあなたがここでそれをダウンロードすることができ、jQueryのモバイルと協力しています：http://cubiq.org/iscroll-4

出典

2012-08-14 18:37:14 Random78952

あなたがこれを行うには見つけるのプラグインのほとんどは、仕事を動作しません。 Jqueryモバイルで

iScroll 4はJQUERY MOBILEで動作しません。

JQMで動作させようとする非常にバグの多いフォークがありますが、このスレッドに投稿されたsplitviewの例は、このスレッドでは動作せず、含まれていません。

出典

2012-08-24 19:59:36 Jon