標籤：
1.在<head>元素中包括JavaScript檔案是傳統的方法。然而，依據Yahoo！”80%的終於使用者回應時間在前端上”的說法，這些事件大部分花在資產的下載上，比如樣式表，圖片，指令碼等。降低這些資產的數量明顯非常重要，在HTML檔案的最後包括JavaScript也變得更加常見。這是由於指令碼阻止並行下載，也就是說其它資產在每一個指令碼單獨下載完之前無法下載。為了確保指令碼放在正確的位置，在</html>結束標記之前包括它。
2.注意：建立自己定義 data- 屬性的唯一限制是屬性的自己定義部分的長度至少為一個字元，不能包含大寫字母。
3.jQuery Mobile架構一次僅僅能顯示當中一個頁面，使用 data-title 屬性動態改變頁面標題。
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>切換頁面</title><link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"><script src="js/jquery-1.9.0.js"></script><script src="js/jquery.mobile-1.4.4.js"></script></head><body class="container"><!-- page 1 --><div data-role="page" id="page-one" data-title="Page 1"><div data-role="header"><h1>Page 1</h1></div><div data-role="content"><p>Body copy for page 1</p><p><a href="#page-two">Link to page 2</a></p></div><div data-role="footer">Copyright</div></div><!-- page 2 --><div data-role="page" id="page-two" data-title="Page 2"><div data-role="header"><h1>Page 2</h1></div><div data-role="content"><p>Body copy for page 2</p><p><a href="#page-one">Link to page 1</a></p></div><div data-role="footer">Copyright</div></div></body></html>
4.用jQuery Mobile建立主要的對話方塊表單非常easy。僅僅要在不論什麼連結錨標記上使用data-rel屬性，並將其值設定為dialog。
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>對話方塊</title><link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"><script src="js/jquery-1.9.0.js"></script><script src="js/jquery.mobile-1.4.4.js"></script></head><body><div data-role="page"><div data-role="header"><h1>Dialog Test</h1></div><div data-role="content"><p><a href="#multipage-dialog" data-rel="dialog">Open Muti-page Dialog</a></p></div><div data-role="footer">Copyright</div></div><div data-role="page" id="multipage-dialog"><div data-role="header"><h1>Multi-page dialog window</h1></div><div data-role="content"><p><a href="dialog.html" data-rel="back">OK</a></p></div></div></body></html>
5.很多輸入元素類型被jQuery Mobile自己主動增強為按鈕。這包含類型屬性被設定為button，submit，reset或image的輸入元素，它們的預設面板都同樣。更改這樣的預設的增強唯一手段是將data-role設定為none。
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>編輯對話方塊</title><link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"><script src="js/jquery-1.9.0.js"></script><script src="js/jquery.mobile-1.4.4.js"></script></head><body><div data-role="page"><div data-role="header"><h1>John Doe</h1><a href="#options-dialog" data-icon="gear" class="ui-btn-right" data-rel="dialog">Edit Profile</a></div><div data-role="content"><p>123 E Street</p><p>Chicago, I1 60622</p></div><div data-role="footer">Copyright</div></div><div data-role="page" id="options-dialog"><div data-role="header"><h1>Edit John Doe</h1><a href="#" data-icon="check">Save</a></div><div data-role="content"><label for="profile-image">Profile Image</label><p><img src="images/boy.jpg"></p><input type="file" id="profile-image" name="prfile-image"><label for="street-address">Street Address</label><input type="text" id="street-address" name="street-address" value="123 E Street"><label for="city">City</label><input type="text" id="city" name="city" value="Chicago"><label for="state">State</label><input type="text" id="state" name="state" value="I1"><label for="zip-code">Zip Code</label><input type="text" id="zip-code" name="zip-code" value="60622"></div></div></body></html>
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>controlgroup</title><link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"><script src="js/jquery-1.9.0.js"></script><script src="js/jquery.mobile-1.4.4.js"></script><style type="text/css">.align-left{ float:left;}.align-right{ float:right;}</style></head><body class="container"><div data-role="page" id="page-one"><div data-role="header"><div data-role="controlgroup" data-type="horizontal" class="align-left"><a href="#" data-role="button" data-icon="home">Home</a><a href="#" data-role="button" data-icon="arrow-l">Back</a></div><div data-role="controlgroup" data-type="horizontal" class="align-right"><a href="#" data-role="button" data-icon="delete">Delete</a><a href="#" data-role="button" data-icon="check">Save</a></div><h1>Page</h1></div><div data-role="content"><p>Body</p></div><div data-role="footer">Copyright</div></div></body></html>
6.jQuery Mobile架構巧妙地依據button數量平均切割navbar的空間。唯一須要注意的是，假設它們包括超過5個超連結，就會開始卷繞到多行。這從某種程度上來說是一種局限，可是也是可取之處，由於行動裝置沒有足夠的水平空間容納這麼多button。
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>navbar</title><link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"><script src="js/jquery-1.9.0.js"></script><script src="js/jquery.mobile-1.4.4.js"></script></head><body><div data-role="page"><div data-role="header" data-fullscreen="true" data-position="fixed"><img alt="header" src="images/header.png"><div data-role="navbar"><ul><li><a href="#" data-icon="home" data-iconpos="top">Home</a></li><li><a href="#" data-icon="arrow-l" data-iconpos="top">Edit</a></li><li><a href="#" data-icon="arrow-r" data-iconpos="top">Search</a></li><li><a href="#" data-icon="arrow-u" data-iconpos="top">About</a></li><li><a href="#" data-icon="arrow-d" data-iconpos="top">Help</a></li></ul></div></div><div data-role="content"><p>Body</p></div><div data-role="footer">Copyright</div></div></body></html>
7.網格行--具有ui-block-a類的每一個元素自己主動清除行，建立一個新行。查看jQuery Mobile架構中包括的用於ui-block-a類的實際CSS，你就會發現它清除了左浮動。
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ui-block</title><link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"><script src="js/jquery-1.9.0.js"></script><script src="js/jquery.mobile-1.4.4.js"></script></head><body><div data-role="page"><div data-role="header"><h1>Head</h1></div><div data-role="content"><div class="ui-grid-c"><div class="ui-block-a"><div class="ui-bar ui-bar-b">A</div></div><div class="ui-block-b"><div class="ui-bar ui-bar-b">B</div></div><div class="ui-block-c"><div class="ui-bar ui-bar-b">C</div></div><div class="ui-block-d"><div class="ui-bar ui-bar-b">D</div></div><div class="ui-block-a"><div class="ui-bar ui-bar-b">A</div></div><div class="ui-block-b"><div class="ui-bar ui-bar-b">B</div></div><div class="ui-block-c"><div class="ui-bar ui-bar-b">C</div></div><div class="ui-block-d"><div class="ui-bar ui-bar-b">D</div></div></div></div><div data-role="footer">Copyright</div></div></body></html>
8.為容器加入collapsible data-role，標題元素自己主動轉換為一個button，可用來展開和收合段落。
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>collapsible</title><link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"><script src="js/jquery-1.9.0.js"></script><script src="js/jquery.mobile-1.4.4.js"></script></head><body><div data-role="page"><div data-role="header"><h1>Head</h1></div><div data-role="content"><div data-role="collapsible" data-collapsed="false"><h3>Collapsible content header</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div data-role="collapsible"><h3>Collapsible child #1</h3><p>Lorem ipsum dolor sit amet.</p></div><div data-role="collapsible"><h3>Collapsible child #2</h3><p>Lorem ipsum dolor sit amet.</p></div></div></div><div data-role="footer">Copyright</div></div></body></html>
9.要定義可摺疊面板，必須建立一個包括一組可摺疊內容地區的容器元素。在這個容器元素上，data-role必須設定為collapsible-set值。
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>collapsible-set</title><link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"><script src="js/jquery-1.9.0.js"></script><script src="js/jquery.mobile-1.4.4.js"></script></head><body><div data-role="page"><div data-role="header"><h1>Head</h1></div><div data-role="content"><div data-role="collapsible-set"><div data-role="collapsible"><h3>Collapsible child #1</h3><p>Lorem ipsum dolor sit amet.</p></div><div data-role="collapsible"><h3>Collapsible child #2</h3><p>Lorem ipsum dolor sit amet.</p></div></div></div><div data-role="footer">Copyright</div></div></body></html>
10. jQuery Mobile在無序列表元素的開始標記中附加了一個值為listview的data-role屬性，對這些列表元素進行增強。
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>listview</title><link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"><script src="js/jquery-1.9.0.js"></script><script src="js/jquery.mobile-1.4.4.js"></script></head><body><div data-role="page"><div data-role="header"><h1>Head</h1></div><div data-role="content"><ul data-role="listview"><li><a href="#">Home</a></li><li><a href="#">Articles</a></li><li><a href="#">Videos</a></li><li><a href="#">Books</a></li><li><a href="#">More</a></li></ul></div><div data-role="footer">Copyright</div></div></body></html>
11.jQuery Mobile架構使得在列表中加入一個搜尋過濾欄很easy：僅僅要為列表加入一個data-filter屬性，並將值設定為true就可以，能夠用附加屬性data-filter-placeholder改動預設文本，該屬性用於有序列表或者無序列表的開始元素。
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>filter</title><link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"><script src="js/jquery-1.9.0.js"></script><script src="js/jquery.mobile-1.4.4.js"></script></head><body><div data-role="page"><div data-role="header"><h1>Head</h1></div><div data-role="content"><ul data-role="listview" data-filter="true" data-filter-placeholder="Search the song list ..."><li>Across The Universe</li><li>Act Naturally</li><li>Ain't She Sweet</li><li>Baby It's You</li><li>Bad Boy</li><li>Because</li></ul></div><div data-role="footer">Copyright</div></div></body></html>
12.為滾動欄加入高亮顯示 data-highlight="true"
<label for="my-slider">My slider</label><input type="range" name="slider" id="my-slider" value="50" min="0" max="100" step="10" data-highlight="true">
13.切換開關 data-role="slider"
<label for="flip-switch">Do you like pizza?</label><select name="flip-switch" id="flip-switch" data-role="slider" data-highlight="true"><option value="yes">Yes</option><option value="no">No</option></select>
14.jQuery Mobile有一個主題系統，包括了由字母“a”到“e”定義的5個樣本。樣本能夠在單個網頁上混合和匹配，同意全然自己定義，使用樣本非常easy，僅僅要使用data-theme屬性就可以。
<a href="#" data-role="button" data-theme="a">Swatch A</a><a href="#" data-role="button" data-theme="b">Swatch B</a><a href="#" data-role="button" data-theme="c">Swatch C</a><a href="#" data-role="button" data-theme="d">Swatch D</a><a href="#" data-role="button" data-theme="e">Swatch E</a>
15.jQuery Mobile包括一個名為mobileinit的初始化事件，它在jQuery的document.ready事件之前載入。這使得你能夠覆蓋和擴充jQuery Mobile的預設全域選項，也是全部自己定義的開始。為了擴充mobileinit事件，你必須正確排列JavaScript的順序。你必須在jQuery Mobile載入之前，jQuery架構載入之後包括自己定義JavaScript事件處理器。
jQuery Mobile移動開發
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
