jquery mobile listview实例
2013-06-08 11:49
706 查看
<!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>
以上代码copy下来即可跑
相关文章推荐
- jquery mobile listview实例
- Android ListView 下拉刷新 上拉更多[实例]
- Android ListView添加头布局和脚布局实例详解
- ListView使用实例
- Android ListView自动生成列表条目的实例
- android QQ消息左滑动删除实例(优化版SwipeListViewEX)
- Android ListView ImageView实现单选按钮实例
- ExpandableListView实例(二)_两种方式实现QQ中组后面显示子条目数量效果
- 第二天 jQuery mobile 的Page&Dialogs,Toolbars,Button,listView全接触
- android ListView内数据的动态添加与删除实例代码
- listview改变选中行的字体颜色实例介绍
- 在jQuery Mobile中当调用listview的refresh函数之后,圆角变直角的问题
- Android ListView 下拉刷新 上拉更多[实例]
- ExpandableListView用法实例
- QML中的Model View——一个ListView实例
- Android ExpandableListView实例Demo
- Android之ListView与自定义adapter简单实例
- React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
- Android ListView里控件添加监听方法的实例详解