jQuery Mobile筆記三


8、列表

8.1 列表基礎

(1)<li> 標籤訂義列表項目。 <ol> 標籤訂義有序列表。 <ul> 標籤訂義無序列表。 <li> 標籤可用在有序列表 (<ol>) 和無序列表 (<ul>) 中。 css

(2)爲列表元素添加data-role="listview"屬性後,jQuery Mobile將本地HTML列表加強爲移動視圖,默認佔據整個屏幕;若是列表包含連接,以觸摸按鈕方式顯示,帶有右側對齊的箭頭圖標;ide

無序函數

有序ui

<ul data-role="listview" data-theme="c">this

<li><a href="#">Action</a></li>spa

<li><a href="#">Adventure</a></li>prototype

</ul>orm

<ol data-role="listview" data-theme="c">事件

<li><a href="#">Action</a></li>圖片

<li><a href="#">Adventure</a></li>

</ol>

8.2 內置列表

(1)data-inset="true"不佔據整個屏幕,在一個圓角區域內

(2)data-role="list-divider"一組列表條目的頁眉 ;data-divider-theme="a"主題樣式

(3)默認文本顯示時是左對齊,使用一個包含class="ui-li-aside"類的元素進行包裝右對齊

<ul data-role="listview" data-inset="true">

<li data-role="list-divider" data-divider-theme="a">Contact Options</li>

<li><a href="#"><img src="../images/75-phone.png" alt="Call" class="ui-li-icon">Call</a></li>

<li><a href="#"><img src="../images/18-envelope.png" alt="Email" class="ui-li-icon">Email</a></li>

<li><a href="#"><p><strong>6</strong> PM<span class="ui-li-aside"><strong>Birthday Party</strong></span></p></a></li>

<li data-role="list-divider">Wed <p class="ui-li-aside"><strong>Feb 8 2012</strong></p></li>

</ul>

8.3 帶有縮略圖和圖標的列表

(1)縮略圖,將圖片縮放爲80象素正方形

<ul data-role="listview">

<li>

  <a href="#">

<img src="../images/kungfupanda2.jpg" />

<h3>Kung Fu Panda</h3>

<p>Rated: PG</p>

<p>Runtime: 95 min.</p>

  </a>

</li>

</ul>

(2)圖標 16×16 使用class="ui-li-icon"

<ul data-role="listview" data-inset="true" data-theme="d">

<li data-role="list-divider">User Reviews</li>

<li>

  <a href="#">

<img src="../images/111-user.png" class="ui-li-icon">

<p><strong>Go See It!</strong></p>

<p>This movie had a strong script and powerful performances from its well-rounded cast.  X-Men is a welcome return to form for the franchise.</p>

  </a>

</li>

<ul>

8.4 拆分按鈕列表

建立主按鈕和附屬按鈕,支持多個動做

<ul data-role="listview" data-split-icon="star" data-split-theme="d">

<li>

  <a href="#">

<img src="../images/kungfupanda2.jpg" />

<h3>Kung Fu Panda</h3>

<p>Rated: PG</p>

<p>Runtime: 95 min.</p>

  </a>

  <a href="#">Buy Tickets</a>

</li>

</ul>

8.5 只讀列表——移除錨標籤

<ul data-role="listview" >

<li>

<img src="../images/kungfupanda2.jpg" />

<h3>Kung Fu Panda</h3>

<p>Rated: PG</p>

<p>Runtime: 95 min.</p>

</li>

</ul>

8.6 列表徽章(list badge

<ul data-role="listview" data-inset="true" data-theme="e" data-count-theme="e">

<li data-role="list-divider">Comments</p></li>

<li>

<img src="../images/111-user.png" class="ui-li-icon">

<p>Thanks for the review.  I plan to check it out this weekend.</p>

<span class="ui-li-count">1 day</span>

</li>

</ul>


8.7 使用搜索欄過濾列表

<div data-role="content">

<ul data-role="listview" id="calendar-list" data-filter="true" data-filter-placeholder="Search...">

<li data-role="list-divider">Mon <p class="ui-li-aside"><strong>Feb 6 2012</strong></p></li>

<li><a href="#"><p><strong>6</strong> PM<span class="ui-li-aside"><strong>Birthday Party</strong></span></p></a></li>

<li data-role="list-divider">Wed <p class="ui-li-aside"><strong>Feb 8 2012</strong></p></li>

<li><a href="#"><p><strong>6</strong> PM<span class="ui-li-aside"><strong>User Group Meeting</strong></span></p></a></li>

<li data-role="list-divider">Fri <p class="ui-li-aside"><strong>Feb 10 2012</strong></p></li>

<li><a href="#"><p><strong>2</strong> PM<span class="ui-li-aside"><strong>Skiing Lessons</strong></span></p></a></li>

<li><a href="#"><p><strong>5</strong> PM<span class="ui-li-aside"><strong>Team Celebration!</strong></span></p></a></li>

</ul>

</div>

修改默認搜索函數,有兩種方法用於從寫過濾的回調函數

(1)綁定mobileinit事件,並將filterCallback選項設置爲任何自定義的搜索函數

$(document).bind('mobileinit',function(){ 

  // Globally configure search filter placeholder text

$.mobile.listview.prototype.options.filterPlaceholder = "Search me..."; 

// Configure a "starts with" search instead of the default

$.mobile.listview.prototype.options.filterCallback = function( text, searchValue ){

// New "Starts With" search, return false when there's a match

return !(text.toLowerCase().indexOf( searchValue ) === 0);

};

});

Callback函數提供兩個參數:textsearchValueText參數包含列表條目的文本,而searchValue參數包含搜索過濾器的值。

用於通配符搜索的默認行爲是 return text.toLowerCase().indexOf(searchValue) === -1

(2)建立列表後動態配置搜索函數

$('#calendar-page').live("pagebeforeshow", function(){

  $("#calendar-list").listview('option', 'filterCallback', 

function( text, searchValue ){

// New "Starts With" search, return false when there's a match

return !(text.toLowerCase().indexOf( searchValue ) === 0);

}

);

});

8.8 List總結


9、表格

9.1 表格模板

<div data-role="content">

<div class="<grid-css-attribute>">

<div class="<block-css-attribute>">Block A</div>

<div class="<block-css-attribute>">Block B</div>

</div>

</div>

(1)表格容器

列的數量

表格CSS屬性

2

ui-grid-a

3

ui-grid-b

4

ui-grid-c

5

ui-grid-d

(2)塊

X

CSS屬性

1

ui-block-a

2

ui-block-b

3

ui-block-c

4

ui-block-d

5

ui-block-e

9.2舉例:

9.2.1兩列表格

<div data-role="content" >

<div class="ui-grid-a">

<div class="ui-block-a"><strong>Block A</strong><br>The text will wrap within the grid.</div>

<div class="ui-block-b"><strong>Block B</strong><br>More text.</div>

</div>

</div>

9.2.2 三列表格

添加style

<div data-role="content">

<div class="ui-grid-b"> 

<div class="ui-block-a">

<div class="ui-bar ui-bar-e" style="height:100px;">Block A</div>

</div>

<div class="ui-block-b">

<div class="ui-bar ui-bar-e" style="height:100px;">Block B</div>

</div>

<div class="ui-block-c">

<div class="ui-bar ui-bar-e" style="height:100px;">Block C</div>

</div>

</div>

</div>

9.2.3四列表格

帶圖標

<div data-role="content">

<div class="ui-grid-c" style="text-align: center;"> 

<div class="ui-block-a">

<img src="../images/cloud-default.png" height="57" width="57">

</div>

<div class="ui-block-b">

<img src="../images/cloud-bright.png" height="57" width="57">

</div>

<div class="ui-block-c">

<img src="../images/cloud-ripple.png" height="57" width="57">

</div>

<div class="ui-block-d">

<img src="../images/cloud-sparkle.png" height="57" width="57">

</div>

</div>

</div>

9.3不規則表格

<style>

/* Set 2-column grid to 25/75% */

.ui-grid-a .ui-block-a {

    width: 25%;

}

.ui-grid-a .ui-block-b {

    width: 75%;

}

/* Set 3-column grid to 25/50/25% */

.ui-grid-b .ui-block-a {

    width: 25%;

}

.ui-grid-b .ui-block-b {

    width: 50%;

}

.ui-grid-b .ui-block-c {

    width: 25%;

}

</style>

<div data-role="content" >

<div class="ui-grid-a"> 

<div class="ui-block-a">

<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">25%</div>

</div>

<div class="ui-block-b">

<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">75%</div>

</div>

</div>

<div class="ui-grid-b"> 

<div class="ui-block-a">

<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">25%</div>

</div>

<div class="ui-block-b">

<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">50%</div>

</div>

<div class="ui-block-c">

<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">25%</div>

</div>

</div>

</div>

相關文章
相關標籤/搜索