jquery - jQuery Mobile 按钮网格

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>

文档中也有一整页专门用于说明这一点。