jquery mobile listview实例

最新推荐文章于 2024-03-19 05:58:15 发布

gf771115

最新推荐文章于 2024-03-19 05:58:15 发布

阅读量4.1k

点赞数

分类专栏： HTML5

HTML5 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

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

gf771115

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery mobile listview实例

/** 这里为listview的ul标签事先设置一个模板，然后与后台的数据key相对应 */ $(function(){ //1、请求数据，这里就用本地数据了 var data=[
复制链接

扫一扫

专栏目录