關于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>
data-inset=”true”將格式化列表塊為圓角化，如果你使用這種樣式的話，列表條目的寬度拉伸成與瀏覽器窗口的寬度一致
還有好多有趣的列表視圖可以參見jQuery Mobile檔。鏈接如下
- http://jquerymobile.com/demos/1.0a1/#docs/lists/index.html
主題
jQuery Mobile渲染的灰色、黑色和藍色及圓形的組件使其看起來很漂亮，但是如果你的整個應用都使用這樣的樣式，將會使其變得很乏味。jQuery Mobile允許你自定義官方一些組件的主題。例如：
- Font family
- Drop shadows
按鈕和盒狀元素的邊框圓角半徑
圖標組件
另外，每一個主題包含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>
小結：關于jQuery Mobile學習筆記之列表視圖的內容介紹完了，希望通過本文的學習能對你有所幫助！
