zoukankan      html  css  js  c++  java
  • Jquery Mobile列表

    向 <ol> 或 <ul> 元素添加 data-role="listview"

    1、圆角和外边距 :data-inset="true" 

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

    2、列表分隔符:data-role="list-divider"

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

    3、列表搜索框:

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

    4、列表缩略图:

    对于大于 16x16px 的图像,在链接中添加 <img> 元素。

    jQuery Mobile 将自动把图像调整至 80x80px:

    <ul data-role="listview">
      <li><a href="#"><img src="chrome.png"></a></li>
    </ul>

    5、列表图标:

    class="ui-li-icon"

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

    6、拆分列表:

    在列表项li中放两个链接,jQuery Mobile 会自动为第二个链接添加蓝色箭头图标的样式,链接中的文本(如有)将在用户划过该图标时显示:

    <ul data-role="listview">
      <li>
        <a href="#"><img src="chrome.png"></a>
        <a href="#download" data-rel="dialog">下载浏览器</a>
      </li>
    </ul>
    <!-- 以对话框的形式打开id为download的页面 -->

    7、计数泡沫

    使用行内元素,并添加类: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>

    tips:

    更改列表项的默认图标:<li data-icon="plus" ...>

  • 相关阅读:
    可怕的沉默
    我排着队 拿着号码牌
    移动改名正在运行的程序
    C# 注册热键
    c#通过编码检查是否有PendingChanges没有签入
    c#读取带命名空间的xml
    自动查找并关闭窗口
    C# 应用微软的Visual Studio International Pack 类库提取汉字拼音首字母
    C#执行DOS命令(CMD命令) (转)
    asp.net 文件下载,有进度条
  • 原文地址:https://www.cnblogs.com/dll-ft/p/5596327.html
Copyright © 2011-2022 走看看