jquery mobile listview实例

<!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



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值