关于jQuery Mobile学习笔记之列表视图-列表视图控件

关于jQuery Mobile学习笔记中的列表视图是本文要介绍的内容，主要是来了解jQuery Mobile中关于列表视图的操作，具体内容来看本文详解。

列表视图

列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role=”listview”属性。

下面的一些情景将会用到创建列表视图

简单的文件列表项

简单的文件列表，会有一个好看的盒环绕着每一个列表项

链接列表，框架会自动为每一个链接加一个箭头”>”，显示在链接按钮的右侧

嵌套列表，如果你在一个li中嵌套另一个ul，jQuery Mobile会为这个嵌套列表自动建立一个”page”，并为它的父li自动加一个链接，这样很容易实现树状菜单选项，设置功能等等。

分隔线的按钮列表，在一个li中存放2个链接，你可以建立一个还垂直分隔条，用户可点击左侧或右侧的列表选项，展现不同的内容

记数气泡如果你在列表选项中添加class=”ui-li-count”，框架会在其中生成一个”小泡泡”图标显现于列表选项的右侧，并在”小泡泡”中显示一些内容。类似在收信箱中看到已经收到的信息条数

查找过滤在ul或ol中添加data-filter=”true”属性。则这个列表项就具备的查询的功能。”Filter result…”文本框将会显示在列表项的上面，允许用户根据条件来将一个大的列表项变小（过滤显示）

列表分隔将列表项分割，可以在任意列表项上添加属性data-role=”list-divider

列表缩略图和图标。将img元素放在在列表项的开始， jQuery Mobile将会以缩略图的形式来展现，图片的大小为80 X 80像素。如果添加class=”ui-li-icon”类样式img元素的大小将会以16 X 16像素的图标

以下是一个列表项的实例

<!DOCTYPE html>   
<html>   
  <head>   
 <title>jQuery Mobile Lists Demo</title>   
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  /> 
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
</head>   
<body>   
 
<div data-role="page" id="home"> 
  <div data-role="header"> 
    <h1>Lists Demo</h1> 
  </div> 
  <div data-role="content"> 
    <h2 style="padding: 1em 0;">A list view</h2> 
    <ul data-role="listview" data-inset="true"> 
      <li>Cat</li> 
      <li>Dog</li> 
      <li>Mouse</li> 
      <li>Squirrel</li> 
    </ul> 
    <h2 style="padding: 1em 0;">A list of links</h2> 
    <ul data-role="listview" data-inset="true"> 
      <li><a href="#">About this app</a></li> 
      <li><a href="#">Buy ice cream</a></li> 
      <li><a href="#">Find a store</a></li> 
    </ul> 
    <h2 style="padding: 1em 0;">Nested lists</h2> 
    <ul data-role="listview" data-inset="true"> 
      <li>Play  
        <ul> 
          <li><a href="#">Easy</a></li> 
          <li><a href="#">Medium</a></li> 
          <li><a href="#">Hard</a></li> 
        </ul> 
      </li> 
      <li>Settings  
        <ul> 
          <li><a href="#">Graphics</a></li> 
          <li><a href="#">Sound</a></li> 
          <li><a href="#">Device</a></li> 
        </ul> 
      </li> 
      <li>Highscores  
        <ul> 
          <li><a href="#">View</a></li> 
          <li><a href="#">Submit</a></li> 
          <li><a href="#">Reset</a></li> 
        </ul> 
      </li> 
    </ul> 
    <h2 style="padding: 1em 0;">A split button list with filter</h2> 
    <ul data-role="listview" data-inset="true" data-filter="true"> 
      <li> 
        <a href="#">The Grapes of Wrath</a> 
        <a href="#">Buy This Book</a> 
      </li> 
      <li> 
        <a href="#">The Trial</a> 
        <a href="#">Buy This Book</a> 
      </li> 
      <li> 
        <a href="#">A Tale of Two Cities</a> 
        <a href="#">Buy This Book</a> 
      </li>        
    </ul> 
    <h2 style="padding: 1em 0;">A list with count bubbles</h2> 
    <ul data-role="listview" data-inset="true"> 
      <li><a href="#">SuperWidgets</a> <span class="ui-li-count">14</span></li> 
      <li><a href="#">MegaWidgets</a> <span class="ui-li-count">0</span></li> 
      <li><a href="#">WonderWidgets</a> <span class="ui-li-count">327</span></li>        
    </ul> 
  </div> 
</div> 
</body> 
</html> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.

data-inset=”true”将格式化列表块为圆角化，如果你使用这种样式的话，列表条目的宽度拉伸成与浏览器窗口的宽度一致

还有好多有趣的列表视图可以参见jQuery Mobile档。链接如下

http://jquerymobile.com/demos/1.0a1/#docs/lists/index.html 
1.

主题

jQuery Mobile渲染的灰色、黑色和蓝色及圆形的组件使其看起来很漂亮，但是如果你的整个应用都使用这样的样式，将会使其变得很乏味。jQuery Mobile允许你自定义官方一些组件的主题。例如：

Font family  
Drop shadows 
1.
2.

按钮和盒状元素的边框圆角半径

图标组件

另外，每一个主题包含26种不同颜色的切换（标记从a 到z），可以控制前景颜色，背景色和渐变色，典型用法是使页面元素部分替换，你可以使用data-theme属性。例如：

<!DOCTYPE html>   
<html>   
  <head>   
  <title>Page Title</title>   
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  /> 
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
</head>   
<body>   
<div data-role="page" id="home"> 
  <div data-role="header"> 
    <h1>Home</h1> 
  </div> 
  <div data-role="content"> 
    <a href="#" data-role="button" data-theme="a">About this app</a> 
    <a href="#" data-role="button" data-theme="b">About this app</a> 
    <a href="#" data-role="button" data-theme="c">About this app</a> 
    <a href="#" data-role="button" data-theme="d">About this app</a> 
    <a href="#" data-role="button" data-theme="e">About this app</a> 
  </div> 
</div> 
</body> 
</html> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

小结：关于jQuery Mobile学习笔记之列表视图的内容介绍完了，希望通过本文的学习能对你有所帮助！