网格类 列 列宽度
对应 实例
ui-grid-a 2 50% / 50% ui-block-a|b
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e
父类 行row
ui-grid-a 俩列
ui-block-a
ui-block-b
注意子类每一个新的类 ui-block-a 都会另起一行
十、列表视图
在ul或ol上增加 属性
data-role="listview"
【特定列分割】
li列表中增加分隔符 手动分割
data-role="list-divider"
【按字母自动分割】
ul/ol 增加属性
data-autodividers="true"
【圆角】
data-inset="true"
【搜索与过滤】
data-role="listview" 列表属性
data-autodividers="true" 按字母自动分组属性
data-inset="true" 圆角属性
data-filter="true" 数据过滤属性
data-filter-placeholder="搜索姓名 ..." 过滤文本框默认文字属性
<ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true" data-filter-placeholder="搜索姓名 ..."> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Albert</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Cameron</a></li> <li><a href="#">Chloe</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Diana</a></li> <li><a href="#">Gabriel</a></li> <li><a href="#">Glen</a></li> <li><a href="#">Ralph</a></li> <li><a href="#">Valarie</a></li> </ul>
【只读属性】
去掉 li里的a标签 保留文字即可
【列表内容】
1. 包含缩略图的列表
<ul data-role="listview" data-inset="true"> <li> <a href="#"> <img src="https://www.jb51.net/i/chrome.png"> <h2>Google Chrome</h2> <p>Google Chrome is a free, open-source web browser. Released in 2008.</p> </a> </li> <li> <a href="#"> <img src="https://www.jb51.net/i/firefox.png"> <h2>Mozilla Firefox</h2> <p>Firefox is a web browser from Mozilla. Released in 2004.</p> </a> </li> </ul>
2. 列表图标
如果是16*16的 图标 加上
<li> <a href="#"> <img src="https://www.jb51.net/article/us.png" alt="USA"> USA </a> </li>
不是 就同上。
3. 拆分按钮
<ul data-role="listview"> <li> <a href="#"><img src="https://www.jb51.net/chrome.png"></a> <a href="#download" data-rel="dialog">下载浏览器</a> </li> </ul>
4. 计数泡沫
a标签 里的sapn加上类名
<ul data-role="listview"> <li><a href="#">Inbox<span>335</span></a></li> <li><a href="#">Sent<span>123</span></a></li> <li><a href="#">Trash<span>7</span></a></li> </ul>
5. 更改默认图标
li 里添加属性
data-icon="minus"
6. 日历事件
列表>分隔列表
>列表内容
<ul data-role="listview" data-inset="true"> <li data-role="list-divider">星期三, 1 月 2 日, 2013 <span>2</span></li> <li><a href="#"> <h2>医生</h2> <p><b>To Peter Griffin</b></p> <p>Well, Mr. Griffin, I've looked into physical results.</p> <p>Ah, Mr. Griffin, I'm not quite sure how to say this. Kim Bassinger? Bass singer? Bassinger?</p> <p>But now, onto the cancer</p> <p>You are a Cancer, right? You were born in July? Now onto these test results.</p> <p>Re: Appointment</p></a> </li> <li><a href="#"> <h2>Glen Quagmire</h2> <p>Remember me this weekend!</p> <br> <p>- giggity giggity goo</p> <p>Re: Camping</p></a> </li> </ul>