如何让ui-grid的角落圆润？

Question

Listview有一个数据插入属性,可以使其四舍五入.但是,我不能使用listview,因为我的列表是一个嵌套列表,框架的默认行为是隐藏嵌套列表,并在单击其主列表后显示它.所以,我选择在主listview行中使用ui-grid视图,如下所示:

<ul data-role="listview">
<li><h1 class="ui-title" role="heading" aria-level="1">Completeness</h1></li>
<li>
<div class="ui-grid-b">
<div>Secondary Title</div>
<div>Content.....</div>
<div>Blah Blah</div>
</div
</li>
<li>Footer</li>
</ul>

我的问题是ui-grid的角应该是圆的.我试图把data-inset ="true"但是没有用.

Answer 1

您可以使用jQuery Mobile添加到窗口小部件的类,在这种情况下,您正在寻找ui-corner-all在所有四个角上放置角的类,然后您可能希望box-shadow这ui-shadow适用于:

<div class="ui-grid-b ui-corner-all ui-shadow" style="padding: 5px;">

我添加了填充,因为默认情况下网格元素没有任何填充.还有一些ui-corner-top和ui-corner-bottom类只围绕它们所应用的元素的顶部/底部.

这是一个演示:http://jsfiddle.net/VXrxv/

相反,如果您想要对可以添加到元素li的父元素的元素进行舍入:ui-gridmargin

<li class="ui-corner-all ui-shadow" style="margin: 5px;">

这是一个演示:http://jsfiddle.net/VXrxv/1/