jquery mobile属性

来源:互联网 发布:淘宝美工图片素材 编辑:程序博客网 时间:2024/06/08 01:06
<div data-role="collapsible" data-collapsed="false">      <h1>点击我-我可以折叠</h1>      <p>折叠内容</p></div>

data-role = "collapsible"    可折叠的属性

data-collapsed = “false” 默认是加载的时候不折叠 点击之后折叠

折叠属性可以嵌套折叠属性

<div data-role="content">                <p>content</p>                <div data-role="collapsible" data-collapsed="true">                    <h1>点击我-我可以折叠</h1>                    <div data-role="collapsible" data-collapsed="false">                        <h1>第二层折叠</h1>                        <p>第二层折叠的内容</p>                    </div>                </div>            </div>

data-role="listview" 列表视图

data-autodividers="true"属性通过对列表项文本的首字母进行大写来创建分隔符。 

data-filter="true" 列表中添加搜索框

data-filter-placeholder 修改默认文本

<ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true" data-filter-placeholder="搜索姓名 ...">                        <li><a href="#">Adele</a></li>                        <li><a href="#">Agnes</a></li>                        <li><a href="#">Albert</a></li>                        <li><a href="#">Billy</a></li>                        <li><a href="#">Bob</a></li>                        <li><a href="#">Calvin</a></li>                        <li><a href="#">Cameron</a></li>                        <li><a href="#">Chloe</a></li>                        <li><a href="#">Christina</a></li>                        <li><a href="#">Diana</a></li>                        <li><a href="#">Gabriel</a></li>                        <li><a href="#">Glen</a></li>                        <li><a href="#">Ralph</a></li>                        <li><a href="#">Valarie</a></li>                </ul>
class="ui-li-icon"    添加icon

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>

class "ui-li-count" 属性并添加数字

<ul data-role="listview">  <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>  <li><a href="#">Sent<span class="ui-li-count">123</span></a></li>  <li><a href="#">Trash<span class="ui-li-count">7</span></a></li></ul>



0 0