2、jQuery Mobile 列表

jQuery Mobile 列表

1.1 jQuery Mobile列表视图, 是标准的Html列表。分为<ol> 和 <ul>。给其添加属性：data-role='listview'。就可使用jQuery Mobile列表。

data-inset='true' 取消显示的圆角效果。

    <h2>不带有 data-inset="true" 属性的列表：</h2>
    <ul data-role="listview" >
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
    </ul><br>
    <h2>带有 data-inset="true" 属性的列表：</h2>
    <ul data-role="listview" data-inset="true">
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
    </ul>

<li>的属性 data-role='list-divider' 为分隔符。

    <ul data-role="listview">
      <li data-role="list-divider">欧洲</li>
      <li><a href="#">德国</a></li>
      <li data-role="list-divider">亚洲</li>
      <li><a href="#">中国</a></li>
    </ul>

<ul>和<ol>属性： data-autodividers='true' 自动分隔符。通过对列表项文本的首字母进行大写来创建分隔符。

<ul>和<ol>属性：data-filter = 'true' .在列表上添加搜索框。

<ul data-role="listview"  data-autodivider='true' data-filter="true" data-filter-placeholder="搜索姓名">

1.2 jQuery Mobile 列表内容。

列表中可以使用图标，大于16X16的图片，直接使用<img>标签；小于16*16px的图片，向<img>标签中添加class = 'ui-li-icon'。

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
    </a>
  </li>
   <li>
      <a href="#">
          <img src="us.png" alt="USA" class="ui-li-icon">USA
     </a>
   </li>
</ul>

拆分按钮。在<li> 标签中添加两个<a>标签，会自动拆分为两个分隔栏，并为第二个添加箭头，如果有文字，在鼠标放上去时，就会显示出来。

 <li data-role="divider">Browsers</li>
      <li>
        <a href="#">       
        <h2>Google Chrome</h2>
        </a>
        <a href="#download" data-rel="dialog" data-transition="pop">Download Browser</a>
      </li>
      <li>
        <a href="#">
        <h2>Mozilla Firefox</h2>
        </a>
        <a href="#download" data-rel="dialog" data-transition="pop">Download Browser</a>
      </li>
    </ul>

列表计数泡沫。在<a>标签中添加 <span class='ui-li-count'>

    <ul data-role="listview" data-inset="true">
      <li><a href="#">收件箱<span class="ui-li-count">25</span></a></li>
      <li><a href="#">发件箱<span class="ui-li-count">432</span></a></li>
      <li><a href="#">垃圾箱<span class="ui-li-count">7</span></a></li>
    </ul>

更换默认箭头图标。<li data-icon="plus">

可折叠列表。

    <div data-role="collapsible">
    <h4>A</h4>
    <ul data-role="listview">
      <li><a href="#">Adam</a></li>
      <li><a href="#">Angela</a></li>
    </ul>
    </div>

class = 'ui-li-aside' 将内容显示在右边。

 <li><a href="#"><p class="ui-li-aside">Re: Appointment</p> <a></li>

2、jQuery Mobile 列表

猜你喜欢