jQuerymobile - iPad用のブロックと分割画面

Question

私たちは、HTML5に基づいた私たちのiPadアプリのグラフィカルインターフェイスのフレームワークをjQuery Mobileとしています。左側の狭いサイドバーの右側の主な内容：：私たちはiPad用アプリを作成しているので、それがiPadであるように、私たちは基本的に、典型的な分割画面を必要とする

今私の質問：私はこの分割された画面を作成するためのコードを探していますが、これについてはjquerymobileのドキュメントで何も見つかりません - 私はそれを逃したか、それとも理解できませんでしたか？このウェブサイトに分割画面のコードが存在しない場合は、どこに関連するものがありますか？

私は何が必要なのか分からなかったので、私はこの分割画面を得る別の方法を試しました。だから私は、CSSスタイルシート内のブロックで働いていた。説明のため

：jQuerymobileのドキュメントでは、私は、だから私は作成について考えた名前「コンテンツの書式設定]> [レイアウトグリッド（列）」（http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/content/content-grids.html） でカテゴリを見つけました分割された画面を作るための2つのブロック。しかし、私は50/50で分割された画面は必要ありませんが、20/80または30/70よりはるかに多くなります。私は自分のスタイルシートにそれを変更しようとしました：

.ui-grid-x { overflow: hidden; } 
.ui-block-x, .ui-block-y { margin: 0; padding: 0; border: 0; float: left; min-height:1px;} 

/* grid a: 20/80 */ 
.ui-grid-x .ui-block-x  { width: 20%; } 
.ui-grid-x .ui-block-y { width: 80%; } 
.ui-grid-x .ui-block-x { clear: left; } 

元だった：

.ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; } 
.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height:1px;} 


.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 50%; } 
.ui-grid-a .ui-block-a { clear: left; } 

誰も私が間違って何をしたか知っていますか？ ブロックのサイズを変更するにはどうすればよいですか？このようにするのが正しい方法ですか？ ありがとうございます。

Answer 1

使用のjQuery Mobileのグリッドレイアウトし、ちょうどあなたの必要性に従って画面を分割する "UI-ブロック-A" と "UI-ブロック-B" の "幅" オーバーライドします。

デモページのチェックアウトについてこのブログ http://mdshannan1.blogspot.com/2011/08/jquery-mobile-split-screen-20-80-hack.html

Answer 2

jQMデモページでソースを表示すると、class = "content-secondary"のdivタグが追加されていることがわかります。これは、タブレットレイアウトのサイドバーに使用されます。小さい画面のタブレットとタブレットのモバイルデバイスで同じページを表示すると、このページもスタックされます。

HTML：

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


     <div class="content-secondary"> 

      <div id="jqm-homeheader"> 
       <h1 id="jqm-logo"><img src="docs/_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" /></h1> 
       <p>A Touch-Optimized Web Framework for Smartphones &amp; Tablets</p> 
       <p id="jqm-version">Beta Release</p> 
      </div> 


      <p class="intro"><strong>Welcome.</strong> Browse the jQuery Mobile components and learn how to make rich, accessible, touch-friendly websites and apps.</p> 

      <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
       <li data-role="list-divider">Overview</li> 
       <li><a href="docs/about/intro.html">Intro to jQuery Mobile</a></li> 
       <li><a href="docs/about/features.html">Features</a></li> 
       <li><a href="docs/about/accessibility.html">Accessibility</a></li> 
       <li><a href="docs/about/platforms.html">Supported platforms</a></li> 
      </ul> 

     </div><!--/content-primary--> 

     <div class="content-primary"> 
      <nav> 


       <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> 
        <li data-role="list-divider">Components</li> 
        <li><a href="docs/pages/index.html">Pages &amp; dialogs</a></li> 
        <li><a href="docs/toolbars/index.html">Toolbars</a></li> 
        <li><a href="docs/buttons/index.html">Buttons</a></li> 
        <li><a href="docs/content/index.html">Content formatting</a></li> 
        <li><a href="docs/forms/index.html">Form elements</a></li> 
        <li><a href="docs/lists/index.html">List views</a></li> 

        <li data-role="list-divider">API</li> 
        <li><a href="docs/api/globalconfig.html">Configuring defaults</a></li> 
        <li><a href="docs/api/events.html">Events</a></li> 
        <li><a href="docs/api/methods.html">Methods &amp; Utilities</a></li> 
        <li><a href="docs/api/mediahelpers.html">Responsive Layout</a></li> 
        <li><a href="docs/api/themes.html">Theme framework</a></li> 


       </ul> 
      </nav> 
     </div> 



    </div> 

    <div data-role="footer" class="footer-docs" data-theme="c"> 
      <p>&copy; 2011 The jQuery Project</p> 
    </div> 

</div>