jQuery Mobile 建立ListView清單

ListView清單是將HTML標籤

• 項目編號 (ol和li元素)
• 項目符號 (ul和li元素)
轉換成ListView元件，即加上data-role="listview"屬性，即可完成。

建立靜態清單：

單純顯示項目資料!! 

<<下載範例>>

<div data-role="content">

            <ul data-role="listview">

                <li>A</li>

                <li>B</li>

                <li>C</li>

            </ul>

        </div>

互動列清單：

讓清單列可以點擊，只要在項目內加入超鏈結指令即可，轉換成互動列。

<<下載範例>>

    <ul data-role="listview" >
                <li>A<a href="http://www.yahoo.com.tw"> YAHOO</a></li>
                <li>B</li>
                <li>C</li>
     </ul>

在ListView 新增標題列：

在建立清單的標題列的方法如下，可以標示此清單列的標題。
<<範例下載>>

<ul data-role="listview" >

     <li data-role="list-divider">我是標提列 </li>

    <li><a href="http://www.yahoo.com.tw"> YAHOO</a></li>

    <li>B</li>

    <li>C</li>

</ul>

巢狀的ListView 

巢狀清單（Nested Lists）使用界面來建立階層架構的巡覽。

<<範例下載>>

<ul data-role="listview">

       <li>客戶端網頁技術

          <ol data-role="listview">

            <li>HTML5</li>

            <li>CSS3</li> 

            <li>JavaScript</li>

            <li>jQuery</li> 

            <li>jQuery Mobile</li>

          </ol>

       </li>

       <li>伺服端網頁技術

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

             <li>ASP.NET Web Pages</li>

             <li>ASP.NET MVC</li>

             <li>Web API</li>

          </ul>

       </li>

    </ul>

互動列的圖示

在建立互動列之後，我們可以修改互動列的圖示。

<<範例下載>>

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

       data-theme="c" data-dividertheme="b">

       <li data-role="list-divider">主選單</li>

       <li><a href="register.html">報名研討會</a></li>

       <li data-icon="false"><a href="speakers.html">講師陣容</a></li>

       <li data-icon="star"><a href="schedule.html">課程內容</a></li>

       <li data-icon="info"><a href="information.html">聯絡資訊</a></li>

  </ul>