JQuery移动按钮网格

Question

我对JQuery Mobile很新，我试图创建一个2列3行按钮的网格作为我的主屏幕。当我使用div class =“ui-grid-b”时，我得到了我期待的外观，但是我无法让网格项目充当按钮来动画效果很好。

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

有关如何创建一个漂亮的按钮网格的任何建议？

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致力于此。