Jquery Mobile----3 列表

時間 2019-11-11

原文原文鏈接

jQuery Mobile 中的列表視圖是標準的HTML 列表; 有序(<ol>) 和無序(<ul>).html

列表視圖：是在ul或ol標籤中添加 data-role="listview" 屬性。在每一個項目(<li>)中添加連接，用戶能夠點擊它：jquery

一、基礎列表

<div data-role="page" id="page1">
   <div data-role="header">
   		<h1>列表</h1>
   </div>
   
   <div data-role="main" class="ui-content">
    	
        <ul data-role="listview" >
            <li><a href="#">Acura</a></li>
            <li><a href="#">Audi</a></li>
            <li><a href="#">BMW</a></li>
        </ul>
   </div>
   
   <div data-role="footer">
   </div>
</div>

二、帶序號的列表

使用 ol 替換 ul 便可express

三、 data-inset="true"，爲列表加外框，且上下左右有距離。

<ul data-role="listview" data-inset="true">
            <li><a href="#">Acura</a></li>
            <li><a href="#">Audi</a></li>
            <li><a href="#">BMW</a></li>
  </ul>

4.帶圖標的列表
<img src="images/gf.png" alt="France" class="ui-li-icon"> 在連接裏面加 img

1. Icons: 16x16 小圖標 :在<img>中加入：class="ui-li-icon"

<ul data-role="listview" data-inset="true">
            <li><a href="#"><img src="a.jpg" class="ui-li-icon" />16x16  的小圖標</a></li>
            <li><a href="#"><img src="a.jpg" class="ui-li-icon" />16x16  的小圖標</a></li>
            <li><a href="#"><img src="a.jpg" class="ui-li-icon" />16x16  的小圖標</a></li>
        </ul>

5.圖文列表：圖片佔位寬度必定，要調整圖片比例

<ul data-role="listview" data-inset="true">
            <li>
                <a href="#"><img src="a.jpg"/>
                <h2>帶圖片的列表</h2>
                <p>Broken Bells</p></a>
            </li>
            
             <li>
                <a href="#"><img src="b窄一點.png"/>
                <h2>帶圖片的列表</h2>
                <p>Broken Bells</p></a>
            </li>
        </ul>

六、修改列表的圖標

<ul data-role="listview" data-inset="true">    
          <li><a href="#">默認是右箭頭</a></li>
          <li data-icon="plus"><a href="#">data-icon="plus"</a></li>
          <li data-icon="minus"><a href="#">data-icon="minus"</a></li>
          <li data-icon="delete"><a href="#">data-icon="delete"</a></li>
          <li data-icon="location"><a href="#">data-icon="location"</a></li>   
          <li data-icon="false"><a href="#">data-icon="false"</a></li>
  </ul>

七、帶分隔的列表

一、分割按鈕：ide

一、在<ul>中加入 data-split-icon="gear" 修改默認圖標的箭頭ui

二、實現分割的方法是在<li>元素中再增長一個<a>元素，即可以在頁面實現分割效果。spa

jQuery Mobile 會自動設置第二個連接爲藍色箭頭的圖標，圖標的連接文字（若是有的話）將在用戶將鼠標懸停在圖標時顯示:code

<ul data-role="listview" data-split-icon="plus"  data-inset="true">
            <li>
                <a href="#">
                    <img src="b窄一點.png">
                    <h2>分割按鈕</h2>
                    <p>Broken Bells</p>
                </a>
            
            <a href="#">放置圖標處</a>
            </li>
            
            <li>
                <a href="#">
                    <img src="a.jpg">
                    <h2>Warning</h2>
                    <p>Hot Chip</p>
                </a>
                <a href="#"></a>
            </li>
            
            <li>
                <a href="#">
                    <img src="a.jpg">
                    <h2>Wolfgang Amadeus Phoenix</h2>
                    <p>Phoenix</p>
                </a>
                <a href="#"></a>
           </li>
    </ul>

在<ul>中設置 data-theme="b"背景能夠變黑。orm

三、點擊分割按鈕跳出彈框htm

一、在分隔的 <a>標籤內作以下改動圖片

連接到要彈出的框：href="#purchase"
在 <a> 元素上添加 data-rel="popup" 屬性
定位窗口 : data-position-to="window"
設置彈出窗口<div data-role="popup" id="myPopup">
按鈕上使用 data-rel="back" 屬性關閉彈窗
背景微黑 :data-overlay-theme="b" ;默認狀況下覆蓋的背景色的透明的。使用 data-overlay-theme="a" 添加淺色背景，使用 data-overlay-theme="b" 添加深色的覆蓋背景：

<ul data-role="listview" data-split-icon="plus"  data-inset="true" data-theme="b">
            <li>
                <a href="#">
                    <img src="b窄一點.png">
                    <h2>分割按鈕</h2>
                    <p>Broken Bells</p>
                </a>
            
            <a href="#purchase" data-rel="popup" data-position-to="window"
 data-transition="pop">Purchase album</a>
            </li>
            
            <li>
                <a href="#">
                    <img src="a.jpg">
                    <h2>Warning</h2>
                    <p>Hot Chip</p>
                </a>
               <a href="#purchase" data-rel="popup" data-position-to="window"
 data-transition="pop"></a>
            </li>
            
            <li>
                <a href="#">
                    <img src="a.jpg">
                    <h2>Wolfgang Amadeus Phoenix</h2>
                    <p>Phoenix</p>
                </a>
               <a href="#purchase" data-rel="popup" data-position-to="window"
 data-transition="pop">Purchase album</a>
           </li>
    </ul>
    
   </div>

   <div data-role="popup" id="purchase" data-theme="a" data-overlay-theme="b"
 class="ui-content" style="max-width:340px;  padding-bottom:2em;">
			<h3>購買專輯？</h3>
			<p>當您購買後，您的下載將當即開始在您的移動設備。</p>
			<a href="#" data-role="button" data-rel="back" data-theme="b" 
data-icon="check" data-inline="true" data-mini="true">Buy: $10.99</a>
			<a href="#" data-role="button" data-rel="back" data-inline="true" 
data-mini="true">Cancel</a>
		</div>

八、分類列表

data-inset="true"不佔據整個屏幕，在一個圓角區域內
給第一個<li>添加 data-role="list-divider"屬性， data-role="list-divider"一組列表條目的頁眉；data-divider-theme="a"主題樣式
氣泡數字<span class="ui-li-count">2</span>
默認文本顯示時是左對齊，使用一個包含class="ui-li-aside"類的元素進行包裝右對齊（在右上側）

<ul data-role="listview" data-inset="true">
                <li data-role="list-divider">分類列表的標題<span class="ui-li-count">2</span></li>
                <li>
                    <a href="index.html">
                        <h2>二級標題1</h2>
                        <p><strong>描述（強調）</strong></p>
                        <p>描述</p>
                        <p class="ui-li-aside"><strong>6:24(右上側)</strong></p>
                    </a>
                </li>
                
                <li>
                    <a href="index.html">
                        <h2>二級標題2</h2>
                        <p><strong>描述（強調）2</strong></p>
                        <p class="ui-li-aside"><strong>9:18</strong></p>
                    </a>
                </li>
                <!------------第二組列表--------------->
                <li data-role="list-divider">第二組列表<span class="ui-li-count">1</span></li>
                <li>
                    <a href="#">
                        <h2>二級標題1</h2>
                        <p><strong>描述（強調）</strong></p>
                        <p class="ui-li-aside"><strong>4:48</strong>PM</p>
                    </a>
                </li>
		</ul>

9.data-role="collapsible" 可摺疊的 listview

在<ul>列表外加<div> 添加 data-role="collapsible"

總列表添加樣式：data-theme="b"
給單個選項添加樣式：data-content-theme="c"

<div data-role="collapsible"  data-theme="b" data-content-theme="b" >
        <h4>摺疊列表放在Div中</h4> <!---表頭-->
        <ul data-role="listview">
          <li><a href="#">Adele</a></li>
          <li><a href="#">Agnes</a></li>
        </ul>
    </div>

10.可摺疊的組列表：幾個組緊貼在一塊兒

設置外層 <div data-role=" collapsible-set " data-theme="b" data-content-theme="d">
設置組成員,可摺疊的列表： <div data-role="collapsible"></div>
在ul中添加data-filter="true"，這樣jquerymobile就會自動添加一個過濾的搜索框，而且實現搜索功能了。(在子列表最上面添加一個搜索框)

<div data-role="collapsible-set">
          
          	 <div data-role="collapsible" data-theme="b">
                <h4>摺疊列表組一</h4>
                <ul data-role="listview">
                  <li><a href="#">子列表1</a></li>
                  <li><a href="#">子列表2</a></li>
                </ul>
            </div>
            
           <div data-role="collapsible" >
                <h4>摺疊列表組二</h4>
                <ul data-role="listview">
                  <li><a href="#">子列表1</a></li>
                  <li><a href="#">子列表2</a></li>
                </ul>
           </div>
          
          </div>

十一、父子列表，顯示子列表數目。

氣泡數字：<span class="ui-li-count"></span>

<ul data-role="listview">
      <li>
         <a href="index.html">Inbox 
         <span class="ui-li-count">12</span>
         </a>
     </li>
 </ul>

一個案例

<form>
                <ul data-role="listview" data-inset="true">
                    <li data-role="fieldcontain">
                        <label for="name2">Text Input:</label>
                        <input name="name2" id="name2" value="" data-clear-btn="true"
                    type="text">
                    </li>

                    <li data-role="fieldcontain">
                        <label for="textarea2">Textarea:</label>
                        <textarea cols="40" rows="8" name="textarea2" id="textarea2"></textarea>
                    </li>

                    <li data-role="fieldcontain">
                        <label for="flip2">Flip switch:</label>
                        <select name="flip2" id="flip2" data-role="slider"><!--滑塊-->
                            <option value="off">Off</option>
                            <option value="on">On</option>
                    </select>
                    </li>

                    <li data-role="fieldcontain">
                        <label for="slider2">Slider:</label>   <!---滑動塊-->
                        <input name="slider2" id="slider2" value="0" min="0" max="100" 
                  data-highlight="true"
                        type="range">
                    </li>

                    <li data-role="fieldcontain">
                        <label for="select-choice-1" class="select">Choose shipping method:</label>
                        <select name="select-choice-1" id="select-choice-1">
                            <option value="standard">Standard: 7 day</option>
                            <option value="rush">Rush: 3 days</option>
                            <option value="express">Express: next day</option>
                            <option value="overnight">Overnight</option>
                        </select>
                    </li>

                    <li class="ui-body ui-body-b">
                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a">
                           <button type="submit" data-theme="d">Cancel</button>
                         </div>
                        <div class="ui-block-b">
                           <button type="submit" data-theme="a">Submit</button>
                        </div>
                    </fieldset>
                    </li>
                </ul>
                </form>