jquery mobile listview实例
2014-01-10 10:53
453 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <script > /** 这里为listview的ul标签事先设置一个模板,然后与后台的数据key相对应 */ $(function(){ //1、请求数据,这里就用本地数据了 var data=[ {name:'mokai',age:'18',birthday:'1994-6-10',depat:'人事部'}, {name:'gongkai',age:'20',birthday:'1994-9-18',depat:'系统管理员'}, {name:'gongjingki',age:'23',birthday:'1984-1-10',depat:'人事部'}, {name:'caidi',age:'22',birthday:'1991-1-10',depat:'开发部'}, {name:'zhouzheng',age:'35',birthday:'1984-1-10',depat:'开发部'}, ]; var viewObj=$("#user_view"); /*2、循环遍历数据,并克隆模板,将数据插入到模板dbField相对应的节点中,然后增加到listview上*/ for(var i=0; i<data.length; i++){ var liTplObj=$("#li_tpl").clone(); for(var key in data[i]){ $("[dbField='"+key+"']",liTplObj).html(data[i][key]); } viewObj.append(liTplObj); } //3、刷新 以上二种都可以刷新数据 viewObj.listview("refresh"); //viewObj.selectmenu("refresh",true); }); </script> </head> <body> <div data-role='page' id="content_page"> <div data-role='header'> <h1>用户列表</h1> </div> <div data-role='content'> <div id="user_cont"> <ul data-role='listview' id="user_view"> <li id="li_tpl"> <a> <p><h1 dbField='name'>Mokai</h1><p> <p>年龄:<span dbField='age'>18</span></p> <p>出生日期:<span dbField='birthday'>1994-06-10</span></p> </a> </li> </ul> </div> </div> </div> </body> </html>
转自:http://blog.csdn.net/victormokai/article/details/9054887
相关文章推荐
- jquery mobile listview实例
- Android Adapter里面嵌套ListView实例详解
- ListView 分段加载更新实例
- android开发经典实例系列-----ListView、GridView
- 扩展的ListView实例
- Android ExpandableListView实例Demo
- android实例 listview与sqlite数据绑定
- android实例 listview与sqlite数据绑定
- Android 中ScrollView嵌套GridView,ListView的实例
- 第二章实例:ArrayAdapter结合ListView列表视图
- 开源插件 PullToRefresh: PullToRefreshListView / PullToRefreshGridView 实例详解
- Android - 开发实例(16):ListView新的使用方式
- Android ListView position详解及实例代码
- 通俗易懂的ListView讲解(Adapter、图、实例)
- ListView实现漂亮的自定义表格实例
- C#中将ListView中数据导出到Excel的实例方法
- Android实现便于批量操作可多选的图片ListView实例
- Android开发之ListView、GridView 实例
- Android实战简易教程-第三十七枪(ListView中点击button跳转到拨号界面实例)
- [Android实例] ListView悬浮标题,类似QQ列表显示