Question

我对JQuery Mobile很陌生，我试图创建一个2列3行按钮网格作为我的主屏幕。当我使用div class =＆＃34; ui-grid-b＆＃34;时，我得到了我希望的外观，但是我无法将网格项目作为可以很好地制作动画的按钮。

如果我用按钮替换网格中的块，它看起来很难看。

关于如何创建漂亮的按钮网格的任何建议？

Answer 1

这不适合你（demo）吗？

<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>

此外还有一个whole page in the documentation致力于此。

JQuery移动网格按钮

1 个答案: