zoukankan      html  css  js  c++  java
  • jqueryMobile列表

    <ol data-role="listview">
      <li><a href="#">列表项</a></li>
    </ol>
    
    <ul data-role="listview">
      <li><a href="#">列表项</a></li>
    </ul>

    如需为列表添加圆角和外边距,请使用 data-inset="true" 属性:

    实例

    <ul data-role="listview" data-inset="true">

    列表中的列表项会自动转换为按钮(无需 data-role="button")

    列表分隔符 (data-role="divider")
    <ul data-role="listview">
     <li data-role="list-divider">欧洲</li>
      <li><a href="#">法国</a></li>
      <li><a href="#">德国</a></li>
    </ul>

    如果您的列表是字母顺序的(比如通讯录),jQuery Mobile 自动添加恰当的分隔符,通过在 <ol> 或 <ul> 元素上设置 data-autodividers="true" 属性:
    <ul data-role="listview" data-autodividers="true">
      <li><a href="#">Adam</a></li>
      <li><a href="#">Angela</a></li>
      <li><a href="#">Bill</a></li>
      <li><a href="#">Calvin</a></li>
      ...
    </ul>

    像列表中添加搜索框
    <ul data-role="listview" data-filter="true" data-filter-placeholder="搜索姓名">


    列表分隔符

    列表分隔符(List Dividers)用于把项目组织和组合为分类/节。

    如需规定列表分隔符,请向 <li> 元素添加 data-role="list-divider" 属性:

     更改列表图标
     可折叠的列表

    <div data-role="content">
    <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>

    <div data-role="collapsible">
    <h4>B</h4>
    <ul data-role="listview">
    <li><a href="#">Bill</a></li>
    <li><a href="#">Bob</a></li>
    </ul>
    </div>

    <div data-role="collapsible">
    <h4>C</h4>
    <ul data-role="listview">
    <li><a href="#">Calvin</a></li>
    <li><a href="#">Cameron</a></li>
    <li><a href="#">Christina</a></li>
    </ul>
    </div>
    </div>

     
  • 相关阅读:
    [转]ASP.Net+XML打造留言薄
    [导入]如何构造一个C#语言的爬虫蜘蛛程序
    [导入]CSS基本布局16例
    [导入]ASP.NET26个常用性能优化方法
    javascript控制cookies及在跳出本页给出提示,是否放弃操作!!
    RunOnBeforeUnload()
    [导入]网易娱乐频道也在用风讯CMS
    etcd集群配置
    openstack上传镜像
    Ambari 节点坏掉不要的节点 无法删除解决方法
  • 原文地址:https://www.cnblogs.com/yaomengli/p/6727640.html
Copyright © 2011-2022 走看看