jQuery Mobile学习笔记（四）——列表

最新推荐文章于 2024-07-15 11:35:22 发布

不安分的johnscorpio

最新推荐文章于 2024-07-15 11:35:22 发布

阅读量600

点赞数

分类专栏： Jquery Mobile 文章标签： jQuery Mobile 列表 ui listview

本文链接：https://blog.csdn.net/zhangjun123878/article/details/41908569

版权

Jquery Mobile 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

列表大概是APP中用的最多的组件了，这一章介绍一下列表。

列表（data-role='listview'）就是页面中的一个有序（ol元素）或无序（ul元素）列表，其中至少包含一个列表项（li元素）。

如果不用jQuery Mobile（JM）的列表，只要不添加data-role=“listview”就可以了。（样式使用data-theme即可，可以对ul，也可以对li指定）

1.整页列表

无序列表（ul）

<body>
 <div data-role="page" id="main">
   <div data-role="header">
     <h1>HTML5 and APIs</h1>
   </div>
   <div data-role="content">
      <ul data-role="listview">
          <li>Offline Access
          <li>Geolocation API
          <li>Canvas
          <li>Offline Storage
          <li>New semantic tags
      </ul>
   </div>
  </div>
 </body>

有序列表（ol）：不包含带链接的交互行的话，外观与ul没有区别

<body>
 <div data-role="page" id="main">
   <div data-role="header">
     <h1>Chapters</h1>
   </div>
   <div data-role="content">
      <ol data-role="listview">
          <li>The Mobile Jungle
          <li>Mobile Browsing
          <li>Architecture and Design
          <li>Setting up your environment
          <li>Markups and Standards
          <li>Coding Markup
          <li>CSS for Mobile Browsers
          <li>JavaScript Mobile
          <li>Ajax, RIA and HTML5
          <li>Server-Side Browser Detection
          <li>Geolocation and Maps
          <li>Widgets and Offline webapps
          <li>Testing, Debugging and Performance
          <li>Distribution and Social Web 2.0
      </ol>
   </div>
  </div>
 </body>

如果文本过长，框架会自动调整该行的尺寸

2.内联列表（列表是页面的一部分）

<ol data-role="listview" <span style="background-color: rgb(51, 204, 255);">data-inset="true"</span>>
    <!-- item rows -->
</ol>

3.分隔列表（一个列表分为两个自带标题的部分）

<body>
 <div data-role="page" id="main">
   <div data-role="header">
     <h1>World Cup</h1>
   </div>
   <div data-role="content">
      <ul data-role="listview">
          <li data-role="list-divider">Group A
          <li>Argentina
          <li>Nigeria
          <li>England
          <li>Japan
          <li data-role="list-divider">Group B
          <li>United States
          <li>Mexico
          <li>Korea
          <li>Greece
          <li data-role="list-divider">Group C
          <li>Germany
          <li>Finland
          <li>Chile
          <li>South Africa
      </ul>
   </div>
  </div>
 </body>
</html>

4.交互行（链接在行，不在文字，即点击行即可跳转，ul不带编号，ol带编号）

列表的文字应该剪短（26个字符），否则会以省略号显示。

<body>
 <div data-role="page" id="main">
   <div data-role="header">
     <h1>Interactive</h1>
   </div>
   <div data-role="content">
      <ul data-role="listview">
          <li><a href="#page2">Internal Page link</a>
          <li><a href="other.html">External Page link</a>
          <li><a href="http://www.mobilexweb.com">Absolute external link</a>
          <li><a href="tel:+13051010200">Call to a phone number using a link</a>
          <li><a href="javascript:alert('Hi!')">JavaScript link</a>
      </ul>
   </div>
  </div>
 </body>

改变交互行的默认图标：

<li data-icon="info"><a href="#moreinfo">More information</a></li>

不要交互行图标：

<li data-icon="false"><a href="#page2">No icon interactive row</a></li>

5.内嵌列表（继承结构或导航，列表点击后还是列表，看起来像有不同的页面）

如果层级及列表项很多，最好使用不同的页面，以便减少DOM和初始化加载的时间，所以不要把整个站点都放在一个内嵌列表里。所以，创建这样的列表使其中一些列表项指向其它文档或页面，另一些列表项则包含内嵌列表。

<body>
 <div data-role="page" id="main">
   <div data-role="header">
     <h1>Training</h1>
   </div>
   <div data-role="content">
      <ul data-role="listview">
          <li><a href="order.html">Order Now!</a>

          <li>Cities available
                <ul data-role="listview">
                      <li>Boston
                      <li>New York
                      <li>Miami
                      <li>San Francisco
                      <li>San Jose
                </ul>
          <li>Topics
                <ul data-role="listview">
                      <li>Intro to Mobile Web
                            <ul data-role="listview">
                                <li>WML and other oldies
                                <li>XHTML MP
                                <li>HTML 4.01
                                <li>HTML5
                            </ul>
                      <li>Mobile Browsers
                            <ul data-role="listview">
                                <li>Safari for iOS
                                <li>Android Browser
                                <li>Firefox for Mobile
                                <li>Opera
                            </ul>
                      <li>Tablet Browsers
                      <li>Using jQuery
                </ul>
          <li>Promotions
                <ul data-role="listview">
                      <li>10% off before May
                      <li><a href="promo3x2.html">3x2</a>
                      <li>10% off to subscribers
                </ul>
      </ul>
   </div>
  </div>
 </body>

内嵌表中，JM会自动使用行中的文本作为新创建的页面的标题，所以还要注意文本简短，以免超出标题区域。

6.分隔按钮的列表（同一行包含两个交互操作，文字和图标。常见的是一个是详情操作和一个编辑操作，当然可以自己定义）

 <body>
  <div data-role="page" id="main">
    <div data-role="header">
      <h1>Your Friends</h1>
    </div>

    <div data-role="content">
       <ul data-role="listview">
           <li><a href="details/bill">Bill Gates</a>
               <span style="background-color: rgb(51, 204, 255);"><a href="edit/bill"></a></span>

           <li><a href="details/steve">Steve Jobs</a>
               <a href="edit/steve"></a>

           <li><a href="details/mark">Mark Zuckerberg</a>
               <a href="edit/mark"></a>

           <li><a href="details/larry">Larry Page</a>
               <a href="edit/larry"></a>
       </ul>
    </div>
   </div>
  </body>

在 ul标签通过data-split-theme来定义右边图标定义不同的主题，data-split-icon来修改第二个操作的图标。

如果让某些行显得比普通行更重要，可以将对应行的标题包含在h2、h3等标签内，这样行高会增加一些。

7.使用图片（微信样式）

小图标（右侧）：

<li>
   <img src="/icons/email.png" class="ul-li-icon">
   Send by e-mail

大图标（左侧缩略图）：

<li>
   <img src="/thumb/washington.png">
   George Washington

8.附加内容（除了标题之外还有其它文字内容）

<body>
    <div data-role="header">
      <h1>Order online</h1>
    </div>
    <div data-role="content">
       <ul data-role="listview">
           <li><a href="buy.html">Soda</a>
               <span class="ui-li-aside">$1.00</span>
           <li><a href="buy.html">Sandwich</a>
               <span class="ui-li-aside">$3.20</span>
           <li><a href="buy.html">Ice cream</a>
               <span class="ui-li-aside">$1.50</span>
       </ul>
    </div>
   </div>
 </body>

9.标题和描述（既有标题又有描述）

<body>
    <div data-role="header">
      <h1>Order online</h1>
    </div>
    <div data-role="content">
       <ul data-role="listview">
           <li><a href="buy.html"><span style="font-family: Arial, Helvetica, sans-serif;"><h2></span>Soda</h2></a>
               <p>Choose your favorite</p>
           <li><a href="buy.html"><h2>Sandwich</h2></a>
               <p>Ham & Cheese</p>
           <li><a href="buy.html"><h2>Ice cream</h2></a>
               <p>Chocolate,Vanilla</p>
       </ul>
    </div>
   </div>
 </body>

10.计数气泡（QQ邮箱个数提示）

<li><a href="inbox.html">Inbox</a>
    <span class="ui-li-count">86</span>

ul中用data-count-theme定义count样式

11.搜索过滤数据（百度搜索效果，很强大）

<ul data-role="listview" data-filter="true" data-filter-placeholder=
    "Search contacts...">
  <!-- list rows -->
</ul>

ul中data-filter-theme定义搜索栏样式

不安分的johnscorpio

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery Mobile学习笔记（四）——列表

jQuery Mobile中列表详解
复制链接

扫一扫

专栏目录