jQuery Mobile 列表视图
2016-07-20 21:29
423 查看
1、jQuery Mobile 列表视图
jQuery Mobile 中的列表视图是标准的HTML 列表; 有序(<ol>) 和 无序(<ul>).列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role="listview"属性。在每个项目(<li>)中添加链接,用户可以点击它:<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /> <script src="../../js/jquery.js"></script> <script src="../../js/jquery.mobile-1.4.5.min.js"></script> <style> </style> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>有序列表:</h2> <ol data-role="listview"> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> </ol> <h2>无序列表:</h2> <ul data-role="listview"> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> </ul> </div> </div> </body> </html>
列表样式的圆角和边缘,使用 data-inset="true" 属性设置:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /> <script src="../../js/jquery.js"></script> <script src="../../js/jquery.mobile-1.4.5.min.js"></script> <style> </style> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h4>标准列表:</h4> <ul data-role="listview"> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> </ul><br> <h4>带有 data-inset="true" 属性的列表:</h4> <ul data-role="listview" data-inset="true"> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> </ul> </div> </div> </body> </html>
2、列表分隔
列表项也可以转化为列表分割项,用来组织列表,使列表项成组。指定列表分割,给列表项<li>元素添加 data-role="list-divider" 属性即可:<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /> <script src="../../js/jquery.js"></script> <script src="../../js/jquery.mobile-1.4.5.min.js"></script> <style> </style> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h3>List Dividers</h3> <ul data-role="listview"> <li data-role="list-divider">欧洲</li> <li><a href="#">德国</a></li> <li><a href="#">英国</a></li> <li data-role="list-divider">亚洲</li> <li><a href="#">中国</a></li> <li><a href="#">印度</a></li> <li data-role="list-divider">非洲</li> <li><a href="#">埃及</a></li> <li><a href="#">南非</a></li> </ul> </div> </div> </body> </html>
如果你有一个字母顺序排列的列表,(例如一个电话簿)通过 <ol> 或者<ul> 元素的 data-autodividers="true" 属性设置可以配置为自动生成的项目的分隔:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /> <script src="../../js/jquery.js"></script> <script src="../../js/jquery.mobile-1.4.5.min.js"></script> <style> </style> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h3>我的通讯录</h3> <ul data-role="listview" data-autodividers="true" data-inset="true"> <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> <p>data-autodividers="true" 属性通过对列表项文本的首字母进行大写来创建分隔符。</p> </div> </div> </body> </html>
data-autodividers="true" 可以配置为自动生成的项目的分隔。默认情况下,创建的分隔文本是列表项文本的第一个大写字母。
3、列表中插入面板
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /> <script src="../../js/jquery.js"></script> <script src="../../js/jquery.mobile-1.4.5.min.js"></script> <style> </style> </head> <body> <div data-role="page" id="pageone"> <div data-role="panel" id="adelePage"> <h2>Adele Pitt</h2> <p>Phone number: 773-528-7483</p> <p>Address: 121 N. LaSalle Street <br>Chicago, Illinois 60602 USA</p> <p>Email: thebestadelepitt@gmail.com</p> <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left">Close</a> </div> <div data-role="panel" id="billyPage"> <h2>Billy Smith</h2> <p>Phone number: 212-330-5200</p> <p>Address: 350 Fifth Avenue <br>New York, NY 10118-3299 USA</p> <p>Email: theoneandonlybilly@gmail.com</p> <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left">Close</a> </div> <div data-role="header"> <h1>Page Header</h1> </div> <div data-role="main" class="ui-content"> <h2>我的通讯录</h2> <ul data-role="listview" data-autodividers="true" data-inset="true"> <li><a href="#adelePage">Adele</a></li> <li><a href="#billyPage">Billy</a></li> </ul> </div> <div data-role="footer"> <h1>页面底部</h1> </div> </body> </html>
相关文章推荐
- jQuery makeArray对标签或json转变成数组
- jQuery Mobile 列表内容
- jquery 杂文
- jQuery Mobile 网格
- jQuery Mobile 表格
- jQuery Mobile 可折叠块
- jQuery Mobile 面板
- jQuery Mobile 导航栏
- jQuery Mobile 工具栏
- jQuery Mobile 弹窗
- jQuery Mobile 按钮图标
- jQuery Mobile 按钮
- jQuery Mobile 过渡
- jQuery Mobile 页面
- JQuery easyUI datagrid 多选下禁止选中某些行
- Jquery中用得比较少的核心函数
- jQuery在IE7和8下setInterval失效的问题
- jquery回到动态顶部
- [jQuery EasyUI系列] 创建增删改查应用
- (原) Jquery 判断移动设备是IOS / Android系统