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>

     
  • 相关阅读:
    转载算法达人修炼营实践模板
    win7上面已经安装了mysql,但是net start mysql提示服务名无效
    如何读懂c++源码?
    struts2 DMI无法运行
    spring下配置dbcp,c3p0,proxool
    前端VS后台
    jsp以及servlet中文乱码问题
    文件上传
    注册和验证的实现
    网站访问计数器的设计
  • 原文地址:https://www.cnblogs.com/yaomengli/p/6727640.html
Copyright © 2011-2022 走看看