1

JQuery Mobile を使用して、ヘッダー、コンテンツ、およびフッター領域を含むページを作成しています。コンテンツ領域全体を 2 つのセクション (それぞれ 50%) に分割する必要があります。各セクションは、使用するデバイスとデバイスのレイアウト (縦向きまたは風景）。data-role="controlgroup"withや withなど、いくつかのアプローチを試しましたが、data-type="horizontal"必要なものが得られないようです。そもそもそれが可能かどうか、もしそうなら、どの要素と属性を使用する必要があるか教えてもらえますか? 前もって感謝します！

4

1 に答える 1

2

これが実際の例です: http://jsfiddle.net/Gajotres/TfzPw/

このソリューションには以下が必要です。

  1. jQuery Mobile グリッド (Omar がコメントで言及)

    <div class="ui-grid-a">
    <div class="ui-block-a"><a data-role="button" id="custom-btn">Button Left</a></div>
    <div class="ui-block-b"><a data-role="button" id="custom-btn">Button Right</a></div>
</div><!-- /grid-a -->

    公式ドキュメント: http://jquerymobile.com/demos/1.3.0-rc.1/docs/content/content-grids.html

  2. 丸みを帯びた角を削除する:

    $(document).on('pagebeforeshow', '#index', function(){       
    $('a').buttonMarkup({ corners: false });
});

    公式ドキュメント: http://jquerymobile.com/demos/1.3.0-rc.1/docs/buttons/buttons-options.html

  3. コンテンツ div のパディングを削除します。

    #index-content {
    padding: 0 !important;
}

  4. ボタンの余白を削除する:

    #custom-btn {
    margin: 0 !important;
}
于 2013-03-11T22:39:35.700 に答える