jquery mobile listview实例

来源：互联网发布：文明5 for mac 汉化编辑：程序博客网时间：2024/04/29 10:56

<!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下来即可跑