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="#">Adama>li>?? ?<li>a?href="#">Angelaa>li>?? ?<li>a?href="#">Billa>li>?? ?<li>a?href="#">Calvina>li>?? ??...?? ul>?? ~~~ 如果我們想為列表添加搜索功能，可以將data-filter屬性設置為true，這樣列表就會自動根據用戶輸入的信息顯示刪選后的結果。與此配套的data-filter-placeholder可以設定搜索框默認占位符： ~~~ <ul?data-role="listview"data-filter="true"?data-filter-placeholder="搜索姓名">?? ~~~ 在jquery Mobile中，我們為列表添加圖片的時候，圖片會自動適應列表的大小，變成80*80像素，代碼如下： ~~~ 1. <ul?data-role="listview">?? 2. ?<li>a?href="#">img?src="chrome.png">a>li>?? 3. <ul>?? ~~~ 如果想想使用16*16px的小圖標，在img的class上添加ui-li-icon即可： ~~~ <li>a?href="#">imgsrcimgsrc="us.png"?alt="USA"class="ui-li-icon">USAa>li>?? ~~~ 最后，現在手機上比較流行的列表數量提示效果，也可以通過Jquery Mobile實現，代碼如下： ~~~ <ul?data-role="listview">?? ?<li>a?href="#">Inboxspanclassspanclass="ui-li-count">335span>a>li>?? ?<li>a?href="#">Sentspanclassspanclass="ui-li-count">123span>a>li>?? ?<li>a?href="#">Trashspanclassspanclass="ui-li-count">7span>a>li>?? <ul>?? ~~~