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" ...>

  • 相关阅读:
    Python爬虫的开发
    JSON
    XPath
    w3c
    Python I/O操作
    【转】C语言中DEFINE简介及多行宏定义
    【转】C++中#if #ifdef 的作用
    srand()、rand()、time()函数的用法
    排序算法之冒泡排序、选择排序
    Java Spring学习笔记
  • 原文地址:https://www.cnblogs.com/dll-ft/p/5596327.html
Copyright © 2011-2022 走看看