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



您可以使用CSS来调整jQuery Mobile Listview与周围环境的间隔。以下是一些常见的方法: 1. 使用外边距(margin)和内边距(padding):您可以通过设置列表项的外边距和内边距来调整它与其他元素之间的间隔。 例如,如果您想要在列表项周围添加一些间隔,可以使用以下CSS代码: ```css .ui-listview li { margin: 10px; } ``` 这将在每个列表项周围添加10像素的间隔。 2. 使用自定义类:您还可以为列表项添加自定义类,并使用CSS样式对它们进行调整。 例如,您可以为列表项添加一个名为"custom-list-item"的类,并使用以下CSS代码对其进行样式化: ```css .custom-list-item { margin-bottom: 20px; padding: 10px; } ``` 然后,在列表项中使用该类: ```html <ul data-role="listview"> <li class="custom-list-item">列表项1</li> <li class="custom-list-item">列表项2</li> <li class="custom-list-item">列表项3</li> </ul> ``` 这将在每个列表项之间添加20像素的下边距和10像素的内边距。 3. 调整全局样式:如果您想要更改所有列表项的样式,您可以使用全局CSS规则来调整它们。 例如,您可以使用以下CSS代码来更改所有列表项的间隔: ```css .ui-listview li { margin: 10px; } ``` 这将为所有列表项添加10像素的间隔。 请记住,您可以根据您的具体需求调整这些样式。根据您的网页布局和设计,您可能需要尝试不同的值来获得最佳效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值