jQuery Mobile中的菜单网格

Question

使用jQuery Mobile实现此布局的最佳方法是什么（菜单网格，本例中有6个按钮）？

我已经尝试过jQuery Mobile网格，但是我遇到了很多问题，例如将其设置为全宽和全高，并将颜色更改为我想要的颜色。

Answer 1

您可以在自己的样式中为该页面创建它。浮动图标并为它们提供50％的宽度（如果使用带有框模型的边框，则为更小）

Answer 2

由于你没有太多必要的需要身体在这里，我觉得标题导航的方式可能是最简单的。只需将以下代码放在页面标题之后即可。例如：

<div data-role='header' data-position='inline' role='banner' data-theme='f' >

    <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">App Name</h1>

    <div data-role="navbar" data-theme='c'>
        <ul>
            <li><a href="" >
                Camera 
            </a></li>

            <li><a href="" >
                Wave 
            </a></li>

            <li><a href="" >
                Lock
            </a></li>


            <li><a href="" >
                Pencil
            </a></li>


            <li><a href="" >
                Star
            </a></li>


            <li><a href="" >
                Friends
            </a></li>

        </ul>
    </div><!-- /navbar -->
</div><!-- header -->

由于这里有六个项目，jquery mobile会自动将它们对齐为2x3网格形式，如模型中所示（至少会处理宽度）。除此之外，你对高度的最佳选择可能是在css中做一些算术。例如：如果标题栏为12px，则设置每个块的高度：33％-4px;

对于颜色设置等，jquery mobile theme roller比手工制作的CSS更好。

Answer 3

使用数据网格“a”

使用以下

    <div data-role="navbar" data-grid="a">