javascript

jQuery mobile

要使用jquery mobile必須要有符合的html定義，在jquery mobile初始化時，它會將頁面上相關的tag和attribute，轉成對應的樣式。以下是一個基本的page結構：

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div>
    <!--   /header   -->

    <div data-role="content">   
        <p>Page content goes here.</p>  
    </div>
    <!--   /content   -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
    <!--   /footer   -->
</div>
<!-- /page --> 
 
###### 每個tag attribute功能如下：
data-role：每個tag在jquery mobile的type，會根據不同type去設定樣式 。
(ex:page、button....)
 
data-rel：有dialog和back兩個屬性值，dialog根據href對應不同動作，back則回上一頁。
<!-- 跳到id是page2的頁面(利用錨點的特性) -->
<a href="#page2" data-rel="dialog">Open dialog</a>
<!-- 發ajax取得頁面 -->
<a href="index.html" data-rel="dialog">Open dialog</a>
 
data-transition：切換page的效果。(pop、slide、slideup、sildedown、flip、fade)
<a href="index.html" data-transition="pop">I'll pop</a>
 
###### 若是以js動態插入html可使用以下語法： 
//
var html = "<a href='index.html' data-role='button'>Link button</a>";
$("#content").append(html)
             .page();