關(guān)于jQuery Mobile學(xué)習(xí)筆記之列表視圖
關(guān)于jQuery Mobile學(xué)習(xí)筆記中的列表視圖是本文要介紹的內(nèi)容，主要是來(lái)了解jQuery Mobile中關(guān)于列表視圖的操作，具體內(nèi)容來(lái)看本文詳解。
列表視圖
列表視圖是jQuery Mobile中功能強(qiáng)大的一個(gè)特性。它會(huì)使標(biāo)準(zhǔn)的無(wú)序或有序列表應(yīng)用更廣泛。應(yīng)用方法就是在ul或ol標(biāo)簽中添加data-role=”listview”屬性。
下面的一些情景將會(huì)用到創(chuàng)建列表視圖
簡(jiǎn)單的文件列表項(xiàng)
簡(jiǎn)單的文件列表，會(huì)有一個(gè)好看的盒環(huán)繞著每一個(gè)列表項(xiàng)
鏈接列表，框架會(huì)自動(dòng)為每一個(gè)鏈接加一個(gè)箭頭”>”，顯示在鏈接按鈕的右側(cè)
嵌套列表，如果你在一個(gè)li中嵌套另一個(gè)ul，jQuery Mobile會(huì)為這個(gè)嵌套列表自動(dòng)建立一個(gè)”page”，并為它的父li自動(dòng)加一個(gè)鏈接，這樣很容易實(shí)現(xiàn)樹狀菜單選項(xiàng)，設(shè)置功能等等。
分隔線的按鈕列表，在一個(gè)li中存放2個(gè)鏈接，你可以建立一個(gè)還垂直分隔條，用戶可點(diǎn)擊左側(cè)或右側(cè)的列表選項(xiàng)，展現(xiàn)不同的內(nèi)容
記數(shù)氣泡 如果你在列表選項(xiàng)中添加class=”ui-li-count”，框架會(huì)在其中生成一個(gè)”小泡泡”圖標(biāo)顯現(xiàn)于列表選項(xiàng)的右側(cè)，并在”小泡泡”中顯示一些內(nèi)容。類似在收信箱中看到已經(jīng)收到的信息條數(shù)
查找過(guò)濾 在ul或ol中添加data-filter=”true”屬性。則這個(gè)列表項(xiàng)就具備的查詢的功能。”Filter result…”文本框?qū)?huì)顯示在列表項(xiàng)的上面，允許用戶根據(jù)條件來(lái)將一個(gè)大的列表項(xiàng)變?。ㄟ^(guò)濾顯示）
列表分隔 將列表項(xiàng)分割，可以在任意列表項(xiàng)上添加屬性data-role=”list-divider
列表縮略圖和圖標(biāo)。將img元素放在在列表項(xiàng)的開始， jQuery Mobile將會(huì)以縮略圖的形式來(lái)展現(xiàn)，圖片的大小為80 X 80像素。如果添加class=”ui-li-icon”類樣式img元素的大小將會(huì)以16 X 16像素的圖標(biāo)
以下是一個(gè)列表項(xiàng)的實(shí)例
- <!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”將格式化列表塊為圓角化，如果你使用這種樣式的話，列表?xiàng)l目的寬度拉伸成與瀏覽器窗口的寬度一致
還有好多有趣的列表視圖可以參見(jiàn)jQuery Mobile檔。鏈接如下
- http://jquerymobile.com/demos/1.0a1/#docs/lists/index.html
主題
jQuery Mobile渲染的灰色、黑色和藍(lán)色及圓形的組件使其看起來(lái)很漂亮，但是如果你的整個(gè)應(yīng)用都使用這樣的樣式，將會(huì)使其變得很乏味。jQuery Mobile允許你自定義官方一些組件的主題。例如：
- Font family
- Drop shadows
按鈕和盒狀元素的邊框圓角半徑
圖標(biāo)組件
另外，每一個(gè)主題包含26種不同顏色的切換（標(biāo)記從a 到z），可以控制前景顏色，背景色和漸變色，典型用法是使頁(yè)面元素部分替換，你可以使用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>
小結(jié)：關(guān)于jQuery Mobile學(xué)習(xí)筆記之列表視圖的內(nèi)容介紹完了，希望通過(guò)本文的學(xué)習(xí)能對(duì)你有所幫助！
