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 中做一些算术。例如：如果header bar为12px，则设置每个块的高度：33%-4px；

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

Answer 3

使用数据网格“a”

使用下面的

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