cordova jQuery移动的中的菜单网格

3vpjnl9f  于 2022-11-15  发布在  jQuery
关注(0)|答案(3)|浏览(151)

用jQuery移动的实现这种布局的最佳方式是什么(在这个例子中是菜单网格,6个按钮)?
我尝试过jQuery移动的网格,但遇到了很多问题,比如使其成为全宽和全高,以及将颜色更改为我想要的任何颜色。

tzxcd3kk

tzxcd3kk1#

你可以用你自己的样式来创建这个页面。浮动图标,并给予它们50%的宽度(或者更小,如果你使用的是框模型的边框)

xpszyzbs

xpszyzbs2#

既然你没有太多的事情需要在这里进行,我觉得标题导航的方式可能是最简单的。只要把下面的代码放在你的页面的标题之后。例如:

<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移动的会自动将它们对齐成一个2x 3的网格形式,就像你的模型中显示的那样(至少会考虑到宽度)。除此之外,你最好的选择是在css中做一些算术运算。例如:如果标题栏为12 px,则设置每个块的高度:33%-4px;
对于颜色设置等,jquery mobile theme roller的工作方式比做手工css更好。

mkshixfv

mkshixfv3#

使用数据网格“a”
使用下面的一个

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

相关问题