jquery - ボタンの JQuery モバイル グリッド

Question

私はJQuery Mobileを初めて使用し、ホーム画面として機能する2列3行のボタンのグリッドを作成しようとしています。div class="ui-grid-b" を使用すると、期待どおりの外観が得られますが、グリッド アイテムを適切にアニメーション化するボタンとして機能させることができません。

グリッド内のブロックをボタンに置​​き換えると、見栄えが非常に悪くなります。

ボタンの見栄えの良いグリッドを作成する方法に関するアドバイスはありますか?

Answer 1

これはうまくいきませんか (デモ)?

<div class="ui-grid-b">
    <div class="ui-block-a">
        <div class="ui-bar ui-bar-e">
            <button type="submit" data-theme="a">Button A</button>
        </div>
    </div>
    <div class="ui-block-b">
        <div class="ui-bar ui-bar-e">
            <button type="submit" data-theme="b">Button B</button>
        </div>
    </div>
    <div class="ui-block-c">
        <div class="ui-bar ui-bar-e">
            <button type="submit" data-theme="c">Button C</button>
        </div>
    </div>
</div>
<div class="ui-grid-d my-grid">
    <div class="ui-block-a">
        <button data-icon="home" data-iconpos="notext" data-inline="true">Button</button>
    </div>
    <div class="ui-block-b">
        <button data-icon="arrow-l" data-iconpos="notext" data-inline="true">Button</button>
    </div>
    <div class="ui-block-c">
        <button data-icon="grid" data-iconpos="notext" data-inline="true">Button</button>
    </div>
    <div class="ui-block-d">
        <button data-icon="arrow-r" data-iconpos="notext" data-inline="true">Button</button>
    </div>
    <div class="ui-block-e">
        <button data-icon="gear" data-iconpos="notext" data-inline="true">Button</button>
    </div>
</div>

また、ドキュメントにはこれに関するページ全体があります。