jQuery Mobileのメニューグリッド

Question

jQuery Mobile（この例ではメニューグリッド、6つのボタン）でこのレイアウトを実装する最良の方法は何ですか？

私はjQuery Mobileグリッドを試しましたが、全幅と高さを作り、色を好みのものに変更するなど、多くの問題がありました。

Answer 1

あなたは、そのページに独自のスタイリングにそれを作成することができます。アイコンを浮かべて、それらに50％の幅を与えます（またはボックスモデルで枠線を使用している場合はそれ以下）

Answer 2

必要なものはここでは必要ありませんので、ヘッダーナビゲーションの方法最も簡単。あなたのページのヘッダーの直後に次のコードを挿入するだけです。例えばのために：あなたはここに6つの項目を持っているので、あなたのモックアップに表示されているように

<div data-role='header' data-position='inline' role='banner' data-theme='f' > 

    <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">App Name</h1> 

    <div data-role="navbar" data-theme='c'> 
     <ul> 
      <li><a href="" > 
       Camera 
      </a></li> 

      <li><a href="" > 
       Wave 
      </a></li> 

      <li><a href="" > 
       Lock 
      </a></li> 


      <li><a href="" > 
       Pencil 
      </a></li> 


      <li><a href="" > 
       Star 
      </a></li> 


      <li><a href="" > 
       Friends 
      </a></li> 

     </ul> 
    </div><!-- /navbar --> 
</div><!-- header --> 

は、jqueryの携帯電話が自動的に2x3のグリッドの形成でそれらを整列する（少なくとも幅の世話をします）。これ以外に、あなたの最高の賭けの高さは、CSSで何らかの算術演算をしているかもしれません。例：ヘッダーバーが12ピクセルの場合、各ブロックの高さを33％〜4ピクセルに設定します。

色設定などについては、jquery mobile theme rollerは手作りのCSSよりも優れています。

Answer 3

使用データグリッド ""

使用以下の1

<div data-role="navbar" data-grid="a">