2

jQuery Mobile のドキュメントでは、5 グリッド構造までしか説明されていません。7 列のグリッドを作成したい場合、どうすればよいですか? (列はモバイルではうまく機能しません)。私を助けてください。

ありがとうございました。

4

2 に答える 2

7

jquery モバイル 7 列グリッドも必要でした (カレンダー プロジェクト用)。

CSS が 2 ～ 5 列をどのように処理しているかに基づいて、6 列と 7 列の余分なグリッド スタイルとブロック スタイルを処理するように CSS を拡張しました。唯一の違いは、作成される幅と追加のブロックです。

とにかく、この CSS を使用して、既存の jquery モバイル CSS を拡張します

/* ADD 6(e) and 7(f) column grid */
.ui-grid-e, .ui-grid-f { overflow: hidden; }

/* grid e: 16/16/16/16/16/16 */
.ui-grid-e .ui-block-a, .ui-grid-e .ui-block-b, .ui-grid-e .ui-block-c, .ui-grid-e .ui-block-d, .ui-grid-e .ui-block-e, .ui-grid-e .ui-block-f { width: 16.59166666666667%; }
.ui-grid-e > :nth-child(n) { width: 16.66666666666667%; }
.ui-grid-e .ui-block-a { clear: left; }

/* grid f: 14/14/14/14/14 */
.ui-grid-f .ui-block-a, .ui-grid-f .ui-block-b, .ui-grid-f .ui-block-c, .ui-grid-f .ui-block-d, .ui-grid-f .ui-block-e, .ui-grid-f .ui-block-f, .ui-grid-f .ui-block-g { width: 14.21071428571429%; }
.ui-grid-f > :nth-child(n) { width: 14.28571428571429%; }
.ui-grid-f .ui-block-a { clear: left; }

/* ADD 6th (f) and 7th (g) blocks in grid */
.ui-header .ui-navbar .ui-grid-e li.ui-block-f .ui-btn,
.ui-footer .ui-navbar .ui-grid-e li.ui-block-f .ui-btn { margin-right: -3px; }/* NOT TESTED */

.ui-header .ui-navbar .ui-grid-f li.ui-block-g .ui-btn,
.ui-footer .ui-navbar .ui-grid-f li.ui-block-g .ui-btn { margin-right: -2px; }/* NOT TESTED */

.ui-grid-e .ui-btn, .ui-grid-f .ui-btn { margin-right: 5px; margin-left: 5px; }

.ui-block-f, .ui-block-g { margin: 0; padding: 0; border: 0; float: left; min-height: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

.ui-header .ui-navbar .ui-grid-e li.ui-block-f .ui-btn-icon-right .ui-icon,
.ui-footer .ui-navbar .ui-grid-f li.ui-block-g .ui-btn-icon-right .ui-icon { right: 8px; }

次のスタイルを作成していることに注意してください: .ui-grid-e (6 列のグリッド) .ui-grid-f (7 列のグリッド)

これらのグリッドの新しいブロックは次のとおりです: .ui-block-f (6 番目のブロック) .ui-block-g (7 番目のブロック)

したがって、7 列のグリッドを作成するための基本 HTML は次のようになります。

<div class="ui-grid-f">
    <div class="ui-block-a"><div class="ui-body ui-body-d">1</div></div>
    <div class="ui-block-b"><div class="ui-body ui-body-d">2</div></div>
    <div class="ui-block-c"><div class="ui-body ui-body-d">3</div></div>
    <div class="ui-block-d"><div class="ui-body ui-body-d">4</div></div>
    <div class="ui-block-e"><div class="ui-body ui-body-d">5</div></div>
    <div class="ui-block-f"><div class="ui-body ui-body-d">6</div></div>
    <div class="ui-block-g"><div class="ui-body ui-body-d">7</div></div>
</div>
于 2013-10-15T22:34:47.110 に答える
3

サードパーティの jQuery Mobile グリッド プラグインを使用できます: http://jeromeetienne.github.com/jquery-mobile-960/

これは単なるcssファイルですが、問題なく動作します。12 列以上をサポートできます。

例: http://jsfiddle.net/Gajotres/GGasc/

<fieldset class="container_12">
    <div class="grid_2"><button type="submit">Button 1</button></div>
    <div class="grid_2"><button type="submit">Button 2</button></div>      
    <div class="grid_2"><button type="submit">Button 3</button></div>      
    <div class="grid_2"><button type="submit">Button 4</button></div>
    <div class="grid_2"><button type="submit">Button 5</button></div>      
    <div class="grid_2"><button type="submit">Button 6</button></div>      
</fieldset>

編集 ：

このグリッドでできることの良い例もここにあります: http://jeromeetienne.github.com/jquery-mobile-960/demoFluid.html

于 2013-01-22T14:48:48.747 に答える