自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

關(guān)于jQuery Mobile學(xué)習(xí)筆記之列表視圖

作者：佚名
移動開發(fā)
關(guān)于jQuery Mobile學(xué)習(xí)筆記中的列表視圖是本文要介紹的內(nèi)容，主要是來了解jQuery Mobile中關(guān)于列表視圖的操作，具體內(nèi)容來看本文詳解。

關(guān)于jQuery Mobile學(xué)習(xí)筆記中的列表視圖是本文要介紹的內(nèi)容，主要是來了解jQuery Mobile中關(guān)于列表視圖的操作，具體內(nèi)容來看本文詳解。

列表視圖

列表視圖是jQuery Mobile中功能強(qiáng)大的一個特性。它會使標(biāo)準(zhǔn)的無序或有序列表應(yīng)用更廣泛。應(yīng)用方法就是在ul或ol標(biāo)簽中添加data-role=”listview”屬性。

下面的一些情景將會用到創(chuàng)建列表視圖

簡單的文件列表項

簡單的文件列表，會有一個好看的盒環(huán)繞著每一個列表項

鏈接列表，框架會自動為每一個鏈接加一個箭頭”>”，顯示在鏈接按鈕的右側(cè)

嵌套列表，如果你在一個li中嵌套另一個ul，jQuery Mobile會為這個嵌套列表自動建立一個”page”，并為它的父li自動加一個鏈接，這樣很容易實(shí)現(xiàn)樹狀菜單選項，設(shè)置功能等等。

分隔線的按鈕列表，在一個li中存放2個鏈接，你可以建立一個還垂直分隔條，用戶可點(diǎn)擊左側(cè)或右側(cè)的列表選項，展現(xiàn)不同的內(nèi)容

記數(shù)氣泡 如果你在列表選項中添加class=”ui-li-count”，框架會在其中生成一個”小泡泡”圖標(biāo)顯現(xiàn)于列表選項的右側(cè)，并在”小泡泡”中顯示一些內(nèi)容。類似在收信箱中看到已經(jīng)收到的信息條數(shù)

查找過濾 在ul或ol中添加data-filter=”true”屬性。則這個列表項就具備的查詢的功能。”Filter result…”文本框?qū)@示在列表項的上面，允許用戶根據(jù)條件來將一個大的列表項變小（過濾顯示）

列表分隔 將列表項分割，可以在任意列表項上添加屬性data-role=”list-divider

列表縮略圖和圖標(biāo)。將img元素放在在列表項的開始， jQuery Mobile將會以縮略圖的形式來展現(xiàn)，圖片的大小為80 X 80像素。如果添加class=”ui-li-icon”類樣式img元素的大小將會以16 X 16像素的圖標(biāo)

以下是一個列表項的實(shí)例

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

data-inset=”true”將格式化列表塊為圓角化，如果你使用這種樣式的話，列表條目的寬度拉伸成與瀏覽器窗口的寬度一致

還有好多有趣的列表視圖可以參見jQuery Mobile檔。鏈接如下

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

主題

jQuery Mobile渲染的灰色、黑色和藍(lán)色及圓形的組件使其看起來很漂亮，但是如果你的整個應(yīng)用都使用這樣的樣式，將會使其變得很乏味。jQuery Mobile允許你自定義官方一些組件的主題。例如：

  1. Font family  
  2. Drop shadows 

按鈕和盒狀元素的邊框圓角半徑

圖標(biāo)組件

另外，每一個主題包含26種不同顏色的切換（標(biāo)記從a 到z），可以控制前景顏色，背景色和漸變色，典型用法是使頁面元素部分替換，你可以使用data-theme屬性。例如：

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

小結(jié)：關(guān)于jQuery Mobile學(xué)習(xí)筆記之列表視圖的內(nèi)容介紹完了，希望通過本文的學(xué)習(xí)能對你有所幫助！

責(zé)任編輯：zhaolei 來源： 互聯(lián)網(wǎng)
jQuery Mobile列表視圖
相關(guān)推薦

2011-09-01 14:14:00

jQuery Mobi

2011-09-05 16:47:49

jQuery Mobi

2011-09-01 15:00:48

jQuery MobiDemo

2011-09-05 16:43:00

jQuery Mobi

2011-09-01 10:16:43

JQuery Mobi

2011-09-01 10:27:42

jQuery Mobi

2011-09-06 16:16:48

jQuery Mobi

2012-03-08 11:23:09

jQuery Mobi

2011-09-02 10:59:10

jQuery Mobi

2009-06-06 17:10:01

Java列表排序

2012-11-15 10:18:51

IBMdw

2011-07-19 14:51:54

jQuery Mobi特性

2011-09-02 10:41:51

2021-04-28 10:01:06

Python基礎(chǔ)項目

2011-07-21 14:57:34

jQuery Mobi

2011-05-26 16:28:08

Android jQuery

2011-07-19 17:09:44

jQuery Mobi事件

2011-09-01 10:21:52

jQuery Mobi元素

2011-07-21 16:10:11

button按鈕jQuery Mobi

2011-07-20 14:11:24

響應(yīng)布局jQuery Mobi
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號