HTML5 经量级框架 jQuery Mobile List 列表 - 7.8
来源:互联网 发布:pp下载软件 编辑:程序博客网 时间:2024/06/05 21:18
<!-- 1.普通链接列表 -->
<ul data-role="listview" data-theme="g"><li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
<li><a href="#">List 4</a></li>
<li><a href="#">List 5</a></li>
</ul>
<!-- 2.多层次嵌套列表 -->
<ul data-role="listview" data-theme="g"><li>
<a href="#">List 1</a>
<p>这是第一层</p>
<ul data-role="listview" data-theme="g">
<li><a href="#">List 1 1</a></li>
<li><a href="#">List 1 2 </a></li>
<li><a href="#">List 1 3</a></li>
<li><a href="#">List 1 4</a></li>
<li><a href="#">List 1 5</a></li>
</ul>
</li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
<li><a href="#">List 4</a></li>
<li><a href="#">List 5</a></li>
</ul>
<!-- 3.有序编号列表 -->
<ol data-role="listview" data-theme="g"><li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
<li><a href="#">List 4</a></li>
<li><a href="#">List 5</a></li>
</ol>
<!-- 4.只读模式列表 -->
<ul data-role="listview" data-inset="true"><li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
<li><a href="#">List 4</a></li>
<li><a href="#">List 5</a></li>
</ul>
<!-- 5.可分割按钮列表 -->
<ul data-role="listview" data-theme="g" data-split-icon="gear" data-split-theme="d"><li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
<li><a href="#">List 4</a></li>
<li><a href="#">List 5</a></li>
</ul>
<!-- 6.列表分隔符 -->
<ul data-role="listview" data-inset="true"><li data-role="list-divider">A</li>
<li><a href="#">List 1-1</a></li>
<li><a href="#">List 1-2</a></li>
<li data-role="list-divider">B</li>
<li><a href="#">List 2-1</a></li>
<li><a href="#">List 2-2</a></li>
<li data-role="list-divider">C</li>
<li><a href="#">List 3-5</a></li>
<li><a href="#">List 3-5</a></li>
</ul>
<!-- 7.列表搜索过滤器 -->
<ul data-role="listview" data-theme="g" data-filter="true"><li><a href="#">aaaa</a></li>
<li><a href="#">abb</a></li>
<li><a href="#">bb</a></li>
<li><a href="#">bc</a></li>
<li><a href="#">cc</a></li>
</ul>
<!-- 8.气泡计数列表 -->
<ul data-role="listview" data-theme="g"><li>
<a href="#">aaa</a>
<span class="ui-li-count">33</span>
</li>
<li>
<a href="#">bbb</a>
<span class="ui-li-count">2</span>
</li>
<li>
<a href="#">ccc</a>
<span class="ui-li-count">12</span>
</li>
<li>
<a href="#">dddd</a>
<span class="ui-li-count">54</span>
</li>
</ul>
<!-- 9.显示列表项右侧文本列表 -->
<ul data-role="listview" data-theme="g"><li>
<a href="#">aaa</a>
<span class="ui-li-aside">熬啊</span>
</li>
<li>
<a href="#">bbb</a>
<span class="ui-li-aside">版本</span>
</li>
<li>
<a href="#">ccc</a>
<span class="ui-li-aside">呃呃</span>
</li>
<li>
<a href="#">dddd</a>
<span class="ui-li-aside">请求</span>
</li>
</ul>
<!-- 10.列表项含有图片列表 -->
<ul data-role="listview" data-theme="g"><li>
<img src="gf.png" alt="france" class="ui-li-icon" />
<a href="#">aaa</a>
<span class="ui-li-count">33</span>
</li>
<li>
<img src="gf.png" alt="france" class="ui-li-icon" />
<a href="#">bbb</a>
<span class="ui-li-count">2</span>
</li>
<li>
<img src="gf.png" alt="france" class="ui-li-icon" />
<a href="#">ccc</a>
<span class="ui-li-count">12</span>
</li>
<li>
<img src="gf.png" alt="france" class="ui-li-icon" />
<a href="#">dddd</a>
<span class="ui-li-count">54</span>
</li>
</ul>
<!-- 11.列表项还有图片列表 -->
<ul data-role="listview" data-theme="g"><li>
<img src="gf.png"/>
<a href="#">aaa</a>
<span class="ui-li-count">33</span>
</li>
<li>
<img src="gf.png"/>
<a href="#">bbb</a>
<span class="ui-li-count">2</span>
</li>
<li>
<img src="gf.png"/>
<a href="#">ccc</a>
<span class="ui-li-count">12</span>
</li>
<li>
<img src="gf.png"/>
<a href="#">dddd</a>
<span class="ui-li-count">54</span>
</li>
</ul>
<!-- 12.内嵌列表 -->
<ul data-role="listview" data-theme="g" data-inset="true"><li><a href="#">List 1</a><span class="ui-li-count">54</span></li>
<li><a href="#">List 2</a><span class="ui-li-count">54</span></li>
</ul>
<ol data-role="listview" data-theme="g" data-inset="true">
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ol>
<ul data-role="listview" data-theme="g" data-inset="true">
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
- HTML5 经量级框架 jQuery Mobile List 列表 - 7.8
- HTML5 经量级框架 jQuery Mobile - 7.1
- HTML5 经量级框架 jQuery Mobile 视图与页面 - 7.2
- HTML5 经量级框架 jQuery Mobile Form 表单 - 7.7
- HTML5 经量级框架 jQuery Mobile 内容格式布局,折叠块内容 - 7.6
- HTML5 经量级框架 jQuery Mobile (配置选项,Enent 事件,主题系统) - 7.9
- HTML5 经量级框架 jQuery Mobile (多视图页面 ,视图切换动画,dialog 对话框,页面主题) - 7.3
- HTML5 经量级框架 jQuery Mobile (Button,Icon,分组功能button,具有内联样式的button) - 7.4
- HTML5 经量级框架 jQuery Mobile Bar(后退,多按钮,controlgroup,horizontal,导航条定义fixed,全屏模式) - 7.5
- HTML5 前端框架 jQuery Mobile 使用教程
- HTML5开发移动web应用—JQuery Mobile(3)-列表
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 07 jQuery Mobile 列表
- 使用 jQuery Mobile 与 HTML5 开发 Web App(七) —— jQuery Mobile 列表
- 基于HTML5移动Web应用开发框架 jQuery Mobile
- jQuery Mobile 列表视图
- jQuery Mobile 列表视图
- jQuery Mobile 列表内容
- jQuery Mobile 列表
- typedef的结构体的初始化
- Oil Deposits之DFS解题报告
- 创建gen_server组解决单process瓶颈
- .net AspNetPager的认识和应用
- XML语法
- HTML5 经量级框架 jQuery Mobile List 列表 - 7.8
- MSP430F149 FLASH 操作
- 第八次c语言上机操作
- VMware设置桥接上网
- 图片左右循环切换功能的实现
- 应用 Valgrind 发现 Linux 程序的内存问题
- 软件Bug引发的十次严重后果
- 无盘与虚拟桌面的区别
- Tinyxml简单使用法