HTML5開發移動web應用—JQuery Mobile(3)-列表


Jquery Mobile中提供了制作列表的組建,它的data-view為listview。下面是一個典型的Jquery Mobile列表,代碼如下:

<div data-role="page"id="pageone">
<div data-role="content">
<h2>有序列表:</h2>
<ol data-role="listview">
<li><a href="#">列表項</a></li>
<li><a href="#">列表項</a></li>
<li><a href="#">列表項</a></li>
</ol>
<h2>無序列表:</h2>
<ul data-role="listview">
<li><a href="#">列表項</a></li>
<li><a href="#">列表項</a></li>
<li><a href="#">列表項</a></li>
</ul>
</div>
</div>
上面我們定義了兩種類型的列表,一個是有序列表(ul),另一個是無序列表(ol)。這兩種列表的定義和HTML相同,只要在相應的標簽中添加data-role="listview"屬性即可。

在這些最基本的功能之上,我們可以繼續添加Jquery Mobile中為我們提供定制好的樣式或者功能。下面的代碼中我們利用data-inset屬性為列表添加圓角和外邊距:

<ul data-role="listview"data-inset="true">
我們經常看到一種列表,它們對內容進行了分組,即相同列表的選項放在同一個大標題下。Jquery Mobile中也為我們提供了實現這種功能的簡單組建,list-divider:

<ul data-role="listview">
<li data-role="list-divider">歐洲</li>
<li><a href="#">法國</a></li>
<li><a href="#">德國</a></li>
</ul>

可以設定自動排序,比如所有的都是字母通過autodividers可以自動按首字母排序,代碼如下:

<ul data-role="listview"data-autodividers="true">
<li><a href="#">Adam</a></li>
<li><a href="#">Angela</a></li>
<li><a href="#">Bill</a></li>
<li><a href="#">Calvin</a></li>
...
</ul>

如果我們想為列表添加搜索功能,可以將data-filter屬性設置為true,這樣列表就會自動根據用戶輸入的信息顯示刪選后的結果。與此配套的data-filter-placeholder可以設定搜索框默認占位符:

<ul data-role="listview"data-filter="true" data-filter-placeholder="搜索姓名">

在jquery Mobile中,我們為列表添加圖片的時候,圖片會自動適應列表的大小,變成80*80像素,代碼如下:

<ul data-role="listview">
<li><a href="#"><img src="chrome.png"></a></li>
</ul>

如果想想使用16*16px的小圖標,在img的class上添加ui-li-icon即可:

<li><a href="#"><imgsrc="us.png" alt="USA"class="ui-li-icon">USA</a></li>

最后,現在手機上比較流行的列表數量提示效果,也可以通過Jquery Mobile實現,代碼如下:

<ul data-role="listview">
<li><a href="#">Inbox<spanclass="ui-li-count">335</span></a></li>
<li><a href="#">Sent<spanclass="ui-li-count">123</span></a></li>
<li><a href="#">Trash<spanclass="ui-li-count">7</span></a></li>
</ul>



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com