jQuery Mobile 婊戝潡鎺т歡
婊戝潡鍏佽鎮(zhèn)ㄤ粠涓瀹氳寖鍥村唴鐨勬暟瀛椾腑閫夊彇鍊鹼細(xì)
濡傞渶鍒涘緩婊戝潡錛岃浣跨敤 <input type="range">錛?/p>
瀹炰緥
<form method="post" action="demoform.asp"> <div data-role="fieldcontain"> <label for="points">Points:</label> <input type="range" name="points" id="points" value="50" min="0" max="100"> </div> </form> 浣跨敤涓嬪垪灞炴ф潵瑙勫畾闄愬畾錛?/p>
- max - 瑙勫畾鍏佽鐨勬渶澶у?/li>
- min - 瑙勫畾鍏佽鐨勬渶灝忓?/li>
- step - 瑙勫畾鍚堟硶鐨勬暟瀛楅棿闅?/li>
- value - 瑙勫畾榛樿鍊?/li>
鎻愮ず錛?/span>濡傛灉鎮(zhèn)ㄥ笇鏈涚獊鍑烘樉紺烘埅姝㈡粦鍧楀肩殑榪欐杞ㄩ亾錛岃娣誨姞 data-highlight="true"錛?/p> 鍒囨崲寮鍏沖父鐢ㄤ簬寮/鍏蟲垨瀵?閿欐寜閽細(xì) 濡傞渶鍒涘緩鍒囨崲錛岃浣跨敤 data-role="slider" 鐨?<select> 鍏冪礌錛屽茍娣誨姞涓や釜 <option> 鍏冪礌錛?/p> 鎻愮ず錛?/span>璇蜂嬌鐢?"selected" 灞炴ф潵鎶婇夐」涔嬩竴璁劇疆涓洪閫夛紙紿佸嚭鏄劇ず錛夛細(xì)瀹炰緥
<input type="range"
data-hightlight="true">鍒囨崲寮鍏?/h2>
瀹炰緥
<form method="post" action="demoform.asp"> <div data-role="fieldcontain"> <label for="switch">Toggle Switch:</label> <select name="switch" id="switch" data-role="slider"> <option value="on">On</option> <option value="off">Off</option> </select> </div> </form> 瀹炰緥
<option value="off"
selected>Off</option>
]]>
jQuery Mobile 閫夋嫨鑿滃崟
iPhone 涓婄殑閫夋嫨鑿滃崟錛?/p>
Android 璁懼涓婄殑閫夋嫨鑿滃崟錛?/p>
<select> 鍏冪礌鍒涘緩甯︽湁鑻ュ共閫夐」鐨勪笅鎷夎彍鍗曘?/p>
<select> 鍏冪礌涓殑 <option> 鍏冪礌瀹氫箟鍒楄〃涓殑鍙敤閫夐」錛?/p>
瀹炰緥
<form method="post" action="demoform.asp"> <fieldset data-role="fieldcontain"> <label for="day">閫夋嫨鏃ユ湡</label> <select name="day" id="day"> <option value="mon">鏄熸湡涓</option> <option value="tue">鏄熸湡浜?lt;/option> <option value="wed">鏄熸湡涓?lt;/option> </select> </fieldset> </form> 鎻愮ず錛?/span>濡傛灉鍒楄〃涓寘鍚簡涓闀垮垪鐩稿叧鐨勯夐」錛岃鍦?<select> 涓嬌鐢?<optgroup> 鍏冪礌錛?/p> 鏈〉涓婃柟鐨勫浘鐗囷紝灞曠ず浜嗙Щ鍔ㄥ鉤鍙版樉紺洪夋嫨鑿滃崟鐨勭嫭鐗規(guī)柟寮忋?/p> 濡傛灉鎮(zhèn)ㄥ笇鏈涘湪鎵鏈夌Щ鍔ㄨ澶囦笂鏄劇ず涓鑷村瑙傜殑閫夋嫨鑿滃崟錛岃浣跨敤 jQuery 鐨勮嚜瀹氫箟閫夋嫨鑿滃崟錛宒ata-native-menu="false" 灞炴э細(xì) 濡傞渶鍦ㄩ夋嫨鑿滃崟涓夊彇澶氫釜閫夐」錛岃鍦?<select> 鍏冪礌涓嬌鐢?multiple 灞炴э細(xì)瀹炰緥
<select name="day" id="day">
<optgroup label="Weekdays"> <option value="mon">Monday</option> <option value="tue">Tuesday</option> <option value="wed">Wednesday</option> </optgroup> <optgroup label="Weekends"> <option value="sat">Saturday</option> <option value="sun">Sunday</option> </optgroup> </select> 鑷畾涔夐夋嫨鑿滃崟
瀹炰緥
<select name="day" id="day"
data-native-menu="false">Multiple Selections
瀹炰緥
<select name="day" id="day"
multiple data-native-menu="false">鏇村瀹炰緥
]]>
jQuery Mobile 鏂囨湰杈撳叆
杈撳叆瀛楁鏄氳繃鏍囧噯鐨?HTML 鍏冪礌緙栧啓鐨勶紝jQuery Mobile 浼?xì)湄?fù)瀹冧滑璁劇疆涓撻棬閽堝縐誨姩璁懼鐨勭編瑙傛槗鐢ㄧ殑鏍峰紡銆傛?zhèn)q樺彲浠ヤ嬌鐢ㄦ柊鐨?HTML5 <input> 綾誨瀷錛?/p>
瀹炰緥
<form method="post" action="demoform.asp"> <div data-role="fieldcontain"> <label for="fullname">鍏ㄥ悕錛?lt;/label> <input type="text" name="fullname" id="fullname"> <label for="bday">鐢熸棩錛?lt;/label> <input type="date" name="bday" id="bday"> <label for="email">鐢?shù)閭Q?lt;/label> <input type="email" name="email" id="email" placeholder="鎮(zhèn)ㄧ殑閭歡鍦板潃.."> </div> </form>
鎻愮ず錛?/span>璇蜂嬌鐢?placeholder 鏉ヨ瀹氱畝鐭殑鎻愮ず錛屼互鎻忚堪杈撳叆瀛楁鐨勯鏈熷鹼細(xì)
<input placeholder="sometext">
鏂囨湰妗?/h2>
璇蜂嬌鐢?<textarea> 鏉ュ疄鐜板琛屾枃鏈緭鍏ャ?/p>
娉ㄩ噴錛?/span>鏂囨湰妗嗕細(xì)鑷姩鎵╁ぇ錛屼互閫傚簲鎮(zhèn)ㄨ緭鍏ョ殑鏂囨湰琛屻?/p>瀹炰緥
<form method="post" action="demoform.asp"> <div data-role="fieldcontain"> <label for="info">Additional Information:</label>
<textarea name="addinfo" id="info"></textarea> </div> </form>
鎼滅儲妗?/h2>
杈撳叆綾誨瀷 type="search" 鏄?HTML5 涓殑鏂扮被鍨嬶紝鐢ㄤ簬瀹氫箟渚涜緭鍏ユ悳绱㈣瘝鐨勬枃鏈瓧孌碉細(xì)
瀹炰緥
<form method="post" action="demoform.asp"> <div data-role="fieldcontain"> <label for="search">Search:</label> <input type="search" name="search" id="search"> </div> </form> 鍗曢夋寜閽?/h2>
褰撶敤鎴峰彧閫夋嫨鏈夐檺鏁伴噺閫夐」涓殑涓涓椂錛屼細(xì)鐢ㄥ埌鍗曢夋寜閽?/p>
濡傞渶鍒涘緩涓濂楀崟閫夋寜閽紝璇鋒坊鍔?type="radio" 鐨?input 鍏冪礌浠ュ強(qiáng)鐩稿簲鐨?label銆傚湪 <fieldset> 鍏冪礌涓寘瑁呭崟閫夋寜閽傛?zhèn)ㄤ篃鍙互澧炲姞涓涓?<legend> 鍏冪礌鏉ュ畾涔?<fieldset> 鐨勬爣棰樸?/p>
鎻愮ず錛?/span>璇風(fēng)敤 data-role="controlgroup" 灞炴ф潵緇勫悎榪欎簺鎸夐挳錛?/p>瀹炰緥
<form method="post" action="demoform.asp"> <fieldset
data-role="controlgroup"> <legend>Choose your gender:</legend> <label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"> </fieldset> </form>
澶嶉夋
褰撶敤鎴烽夋嫨鏈夐檺鏁伴噺閫夐」涓殑涓涓垨澶氫釜閫夐」鏃訛紝浼?xì)鐢ㄥ埌澶嶉夋錛?/p>
瀹炰緥
<form method="post" action="demoform.asp"> <fieldset data-role="controlgroup"> <legend>Choose as many favorite colors as you'd like:</legend> <label for="red">Red</label> <input type="checkbox" name="favcolor" id="red" value="red"> <label for="green">Green</label> <input type="checkbox" name="favcolor" id="green" value="green"> <label for="blue">Blue</label> <input type="checkbox" name="favcolor" id="blue" value="blue"> </fieldset> </form>
鏇村瀹炰緥
濡傞渶瀵瑰崟閫夋鎴栧閫夋榪涜姘村鉤鍒嗙粍錛岃浣跨敤 data-type="horizontal" 灞炴э細(xì)
瀹炰緥
<fieldset data-role="controlgroup" data-type="horizontal">鎮(zhèn)ㄤ篃鍙互浣跨敤鍩熷鍣ㄦ潵鍖呰 <fieldset>錛?/p>
瀹炰緥
<div data-role="fieldcontain"><fieldset data-role="controlgroup"> <legend>Choose your gender:</legend> </fieldset></div>
濡傛灉鎮(zhèn)ㄥ笇鏈?#8220;棰勯?#8221;鍏朵腑涓涓寜閽紝璇蜂嬌鐢?HTML <input> 鏍囩鐨?checked 灞炴э細(xì)
瀹炰緥
<input type="radio"checked> <input type="checkbox"checked>
]]>
jQuery Mobile 浼?xì)鑷姩湄?fù) HTML 琛ㄥ崟娣誨姞浼樺紓鐨勪究浜庤Е鎺х殑澶栬銆?/p>
jQuery Mobile 琛ㄥ崟緇撴瀯
jQuery Mobile 浣跨敤 CSS 鏉ヨ緗?HTML 琛ㄥ崟鍏冪礌鐨勬牱寮忥紝浠ヤ嬌鍏舵洿鏈夊惛寮曞姏鏇存槗鐢ㄣ?/p>
鍦?jQuery Mobile 涓紝鎮(zhèn)ㄥ彲浠ヤ嬌鐢ㄤ互涓嬭〃鍗曟帶浠訛細(xì)
- 鏂囨湰妗?/li>
- 鎼滅儲妗?/li>
- 鍗曢夋
- 澶嶉夋
- 閫夋嫨鑿滃崟
- 婊戝姩鏉?/li>
- 緲昏漿鍒囨崲寮鍏?/li>
褰撴?zhèn)ㄤ?jQuery Mobile 琛ㄥ崟鎵撲氦閬撴椂錛屽簲璇ヤ簡瑙ｄ互涓嬩俊鎭細(xì)
- <form> 鍏冪礌蹇呴』璁劇疆 method 鍜?action 灞炴?/li>
- 姣忎釜琛ㄥ崟鍏冪礌蹇呴』璁劇疆鍞竴鐨?"id" 灞炴с傝 id 鍦ㄧ珯鐐圭殑欏甸潰涓繀欏繪槸鍞竴鐨勩傝繖鏄洜涓?jQuery Mobile 鐨勫崟欏甸潰瀵艱埅妯″瀷鍏佽璁稿涓嶅悓鐨?#8220;欏甸潰”鍚屾椂鍛堢幇銆?/li>
- 姣忎釜琛ㄥ崟鍏冪礌蹇呴』鏈変竴涓爣璁幫紙label錛夈傝璁劇疆 label 鐨?for 灞炴ф潵鍖歸厤鍏冪礌鐨?id銆?/li>
瀹炰緥
<formmethod="post"action="demoform.asp"> <label for="fname">First name:</label> <input type="text" name="fname" id="fname"> </form>
濡傞渶闅愯棌 label錛岃浣跨敤綾?ui-hidden-accessible銆傝繖寰堝父鐢紝褰撴?zhèn)ㄩ渶瑕佸厓绱犵殑 placeholder 灞炴у厖褰?label 鏃訛細(xì)
瀹炰緥
<form method="post" action="demoform.asp"> <label for="fname" class="ui-hidden-accessible">濮撳悕錛?lt;/label> <input type="text" name="fname" id="fname" placeholder="濮撳悕..."> </form> 鍩熷鍣?/h2>
濡傛灉闇瑕?label 鍜岃〃鍗曞厓绱犲湪瀹藉睆騫曚笂鏄劇ず姝ｅ父錛岃鐢ㄥ甫鏈?data-role="fieldcontain" 灞炴х殑 <div> 鎴?<fieldset> 鍏冪礌鏉ュ寘瑁?label 鎴栬〃鍗曞厓绱狅細(xì)
瀹炰緥
<form method="post" action="demoform.asp"><div data-role="fieldcontain"><label for="fname">First name:</label> <input type="text" name="fname" id="fname"> <label for="lname">Last name:</label> <input type="text" name="lname" id="lname"></div></form>
鎻愮ず錛?/span>fieldcontain 灞炴у熀浜庨〉闈㈠搴︽潵璁劇疆 label 鍜岃〃鍗曟帶浠剁殑鏍峰紡銆傚綋欏甸潰瀹藉害澶т簬 480px 鏃訛紝瀹冧細(xì)鑷姩灝?label 涓庤〃鍗曟帶浠舵斁緗簬鍚屼竴琛屻傚綋灝忎簬 480px 鏃訛紝label 浼?xì)琚攧〗簬琛ㄥ崟鍏冪礌涔嬩笂銆?/p> 鎻愮ず錛?/span>濡傞渶閬垮厤 jQuery Mobile 鑷姩涓哄彲鐐瑰嚮鍏冪礌璁劇疆鏍峰紡錛岃浣跨敤 data-role="none" 灞炴э細(xì) 鎻愮ず錛?/span>jQuery Mobile 浼?xì)鑷姩閫氳繃 AJAX 榪涜琛ㄥ崟鎻愪氦錛屽茍浼?xì)灏濊瘯灏嗘湇鍔″櫒鍝嶅簲鏁村悎鍏ュ簲鐢ńE嬪簭鐨?DOM 涓?/p>瀹炰緥
<label for="fname">First name:</label> <input type="text" name="fname" id="fname"
data-role="none"> 鍦?jQuery Mobile 涓彁浜よ〃鍗?/h3>
]]>
jQuery Mobile 鍒楄〃瑙嗗浘
jQuery Mobile 涓殑鍒楄〃瑙嗗浘鏄爣鍑嗙殑 HTML 鍒楄〃錛氭湁搴忓垪琛?(<ol>) 鍜屾棤搴忓垪琛?(<ul>)銆?/p>
濡傞渶鍒涘緩鍒楄〃錛岃鍚?<ol> 鎴?<ul> 鍏冪礌娣誨姞 data-role="listview"銆傚闇浣胯繖浜涢」鐩彲鐐瑰嚮錛岃鍦ㄦ瘡涓垪琛ㄩ」錛?lt;li>錛変腑瑙勫畾閾炬帴錛?/p>
瀹炰緥
<oldata-role="listview"> <li><a href="#">鍒楄〃欏?lt;/a></li> </ol> <uldata-role="listview"> <li><a href="#">鍒楄〃欏?lt;/a></li> </ul>
濡傞渶涓哄垪琛ㄦ坊鍔犲渾瑙掑拰澶栬竟璺濓紝璇蜂嬌鐢?data-inset="true" 灞炴э細(xì)
瀹炰緥
<ul data-role="listview" data-inset="true">鎻愮ず錛?/span>榛樿鍦幫紝鍒楄〃涓殑鍒楄〃欏逛細(xì)鑷姩杞崲涓烘寜閽紙鏃犻渶 data-role="button"錛夈?/p> 鍒楄〃鍒嗛殧絎︼紙List Dividers錛夌敤浜庢妸欏圭洰緇勭粐鍜岀粍鍚堜負(fù)鍒嗙被/鑺傘?/p> 濡傞渶瑙勫畾鍒楄〃鍒嗛殧絎︼紝璇峰悜 <li> 鍏冪礌娣誨姞 data-role="list-divider" 灞炴э細(xì) 濡傛灉鎮(zhèn)ㄧ殑鍒楄〃鏄瓧姣嶉『搴忕殑錛堟瘮濡傞氳褰曪級錛宩Query Mobile 鑷姩娣誨姞鎭板綋鐨勫垎闅旂錛岄氳繃鍦?<ol> 鎴?<ul> 鍏冪礌涓婅緗?data-autodividers="true" 灞炴э細(xì) 鎻愮ず錛?/span>data-autodividers="true" 灞炴ч氳繃瀵瑰垪琛ㄩ」鏂囨湰鐨勯瀛楁瘝榪涜澶у啓鏉ュ垱寤哄垎闅旂銆?/p> 濡傞渶鍦ㄥ垪琛ㄤ腑娣誨姞鎼滅儲妗嗭紝璇蜂嬌鐢?data-filter="true" 灞炴э細(xì) 榛樿鍦幫紝鎼滅儲妗嗕腑鐨勬枃鏈槸 "Filter items..."銆?/p> 濡傞渶淇敼榛樿鏂囨湰錛岃浣跨敤 data-filter-placeholder 灞炴э細(xì)鍒楄〃鍒嗛殧絎?/h2>
瀹炰緥
<ul data-role="listview"> <li
data-role="list-divider">嬈ф床</li> <li><a href="#">娉曞浗</a></li> <li><a href="#">寰峰浗</a></li> </ul> 瀹炰緥
<ul data-role="listview"
data-autodividers="true"> <li><a href="#">Adam</a></li> <li><a href="#">Angela</a></li> <li><a href="#">Bill</a></li> <li><a href="#">Calvin</a></li> ... </ul> 鎼滅儲榪囨護(hù)鍣?/h2>
瀹炰緥
<ul data-role="listview"
data-filter="true"></ul>瀹炰緥
<ul data-role="listview" data-filter="true"
data-filter-placeholder="鎼滅儲濮撳悕">鏇村瀹炰緥
]]>
jQuery Mobile 鎻愪緵鐨勪竴濂楀浘鏍囧彲浠ゆ?zhèn)ㄧ殑鎸夐挳鏇村叿鍚稿紩鍔涖?/p>
涓?jQuery Mobile 鎸夐挳娣誨姞鍥炬爣
濡傞渶鍚戞?zhèn)ㄧ殑鎸夐挳娣诲姞鍥炬爣锛岃鋴社?data-icon 灞炴э細(xì)
<a href="#anylink" data-role="button" data-icon="search">鎼滅儲</a>鎻愮ず錛?/span>鎮(zhèn)ㄤ篃鍙互鍦?<button> 鎴?<input> 鍏冪礌涓嬌鐢?data-icon 灞炴с?/p> 涓嬮潰鎴戜滑鍒楀嚭浜?jQuery Mobile 鎻愪緵鐨勪竴浜涘彲鐢ㄥ浘鏍囷細(xì) 濡傞渶鍏充簬 jQuery Mobile 鎸夐挳鍥炬爣鐨勫畬鏁翠俊鎭紝璇瘋闂垜浠殑 jQuery Mobile 鍥炬爣鍙傝冩墜鍐?/a>銆?/p>灞炴у?/th> 鎻忚堪 鍥炬爣 瀹炰緥 data-icon="arrow-l" 宸︾澶?/td> 嫻嬭瘯 data-icon="arrow-r" 鍙崇澶?/td> 嫻嬭瘯 data-icon="delete" 鍒犻櫎 嫻嬭瘯 data-icon="info" 淇℃伅 嫻嬭瘯 data-icon="home" 棣栭〉 嫻嬭瘯 data-icon="back" 榪斿洖 嫻嬭瘯 data-icon="search" 鎼滅儲 嫻嬭瘯 data-icon="grid" 緗戞牸 嫻嬭瘯
瀹氫綅鍥炬爣
鎮(zhèn)ㄤ篃鑳藉瑙勫畾鍥炬爣琚斁緗殑浣嶇疆錛氫笂銆佸彸銆佷笅鎴栧乏銆?/p>
璇蜂嬌鐢?data-iconpos 灞炴ф潵瑙勫畾浣嶇疆錛?/p>
鍥炬爣浣嶇疆錛?/h3><a href="#link" data-role="button" data-icon="search" data-iconpos="top">涓?lt;/a> <a href="#link" data-role="button" data-icon="search" data-iconpos="right">鍙?lt;/a> <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">涓?lt;/a> <a href="#link" data-role="button" data-icon="search" data-iconpos="left">宸?lt;/a>
data-iconpos="top">涓?lt;/a> <a href="#link" data-role="button" data-icon="search" data-iconpos="right">鍙?lt;/a> <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">涓?lt;/a> <a href="#link" data-role="button" data-icon="search" data-iconpos="left">宸?lt;/a> 鎻愮ず錛?/span>榛樿鍦幫紝鎵鏈夋寜閽腑鐨勫浘鏍囬潬宸︽斁緗?/p>
鍙樉紺哄浘鏍?/h2>
濡傛灉鍙渶鏄劇ず鍥炬爣錛岃灝?data-iconpos 璁劇疆涓?"notext"錛?/p>
Back:
<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">鎼滅儲</a>]]>
縐誨姩搴旂敤紼嬪簭鏋勫緩浜庤Е鎺ф搷浣滅殑渚垮埄鎬т箣涓娿?/p>
鍦?jQuery Mobile 涓垱寤烘寜閽?/h2>
jQuery Mobile 涓殑鎸夐挳鍙氳繃涓夌鏂規(guī)硶鍒涘緩錛?/p>
- 浣跨敤 <button> 鍏冪礌
- 浣跨敤 <input> 鍏冪礌
- 浣跨敤 data-role="button" 鐨?<a> 鍏冪礌
<button>
<button>鎸夐挳</button>
<input>
<input type="button" value="鎸夐挳">
<a>
<a href="#" data-role="button">鎸夐挳</a>鎻愮ず錛?/span>jQuery Mobile 涓殑鎸夐挳浼?xì)鑷姩鑾峰緱鏍峰紡锛寴q欏寮轟簡浠栦滑鍦ㄧЩ鍔ㄨ澶囦笂鐨勪氦浜掓у拰鍙敤鎬с傛垜浠帹鑽愭?zhèn)ㄤ娇鐢?data-role="button" 鐨?<a> 鍏冪礌鏉ュ垱寤洪〉闈箣闂寸殑閾炬帴錛岃?<input> 鎴?<button> 鍏冪礌鐢ㄤ簬琛ㄥ崟鎻愪氦銆?/p>
瀵艱埅鎸夐挳
濡傞渶閫氳繃鎸夐挳鏉ラ摼鎺ラ〉闈紝璇蜂嬌鐢?data-role="button" 鐨?<a> 鍏冪礌錛?/p>
瀹炰緥
<a href="#pagetwo" data-role="button">杞埌欏甸潰浜?lt;/a>琛屽唴鎸夐挳
榛樿鎯呭喌涓嬶紝鎸夐挳浼?xì)鍗犳嵁灞忩q曠殑鍏ㄩ儴瀹藉害銆傚鏋滄?zhèn)ㄩ渶瑕佹寜閽傚簲鍏跺唴瀹癸紝鎴栬呭鏋滄?zhèn)ㄩ渶瑕佷袱涓垨澶氫釜鎸夐挳騫舵帓鏄劇ず錛岃娣誨姞 data-inline="true"錛?/p>
瀹炰緥
<a href="#pagetwo" data-role="button" data-inline="true">杞埌欏甸潰浜?lt;/a>緇勫悎鎸夐挳
jQuery Mobile 鎻愪緵浜嗗鎸夐挳榪涜緇勫悎鐨勭畝鍗曟柟娉曘?/p>
璇峰皢 data-role="controlgroup" 灞炴т笌 data-type="horizontal|vertical" 涓鍚屼嬌鐢紝浠ヨ瀹氭按騫蟲垨鍨傜洿鍦扮粍鍚堟寜閽細(xì)
瀹炰緥
<divdata-role="controlgroup"data-type="horizontal"> <a href="#anylink" data-role="button">鎸夐挳 1</a> <a href="#anylink" data-role="button">鎸夐挳 2</a> <a href="#anylink" data-role="button">鎸夐挳 3</a> </div>
鎻愮ず錛?/span>榛樿鎯呭喌涓嬶紝緇勫悎鎸夐挳鏄瀭鐩村垎緇勭殑錛屽郊姝ら棿娌℃湁澶栬竟璺濆拰絀虹櫧銆傚茍涓斿彧鏈夌涓涓拰鏈鍚庝竴涓寜閽嫢鏈夊渾瑙掞紝鍦ㄧ粍鍚堝悗灝卞垱閫犲嚭浜嗘紓浜殑澶栬銆?/p>
鍚庨鎸夐挳
濡傞渶鍒涘緩鍚庨鎸夐挳錛岃浣跨敤 data-rel="back" 灞炴э紙浼?xì)蹇界暐閿氱?href 鍊鹼級錛?/p>
瀹炰緥
<a href="#" data-role="button" data-rel="back">榪斿洖</a>鏇村鐢ㄤ簬鎸夐挳鐨?data-* 灞炴?/h2>
| 灞炴?/th> | 鍊?/th> | 鎻忚堪 | 瀹炰緥 |
|---|---|---|---|
| data-corners | true | false | 瑙勫畾鎸夐挳鏄惁鏈夊渾瑙掋?/td> | 嫻嬭瘯 |
| data-mini | true | false | 瑙勫畾鏄惁鏄皬鍨嬫寜閽?/td> | 嫻嬭瘯 |
| data-shadow | true | false | 瑙勫畾鎸夐挳鏄惁鏈夐槾褰便?/td> | 嫻嬭瘯 |
濡傞渶鏈夊叧 jQuery Mobile data-* 灞炴х殑瀹屾暣淇℃伅錛岃璁塊棶鎴戜滑鐨?nbsp;jQuery Mobile Data 灞炴у弬鑰冩墜鍐?/a>銆?/p> 涓嬩竴鑺傛紨紺哄浣曚負(fù)鎸夐挳娣誨姞鍥炬爣銆?/p>
]]>
jQuery Mobile 鍖呭惈浜嗗厑璁告?zhèn)ㄩ夋嫨欏甸潰鎵撳紑鏂瑰紡鐨?CSS 鏁堟灉銆?/p>
jQuery Mobile 榪囨浮鏁堟灉
jQuery Mobile 鎷ユ湁涓緋誨垪鍏充簬濡備綍浠庝竴欏佃繃娓″埌涓嬩竴欏電殑鏁堟灉銆?/p>
娉ㄩ噴錛?/span>濡傞渶瀹炵幇榪囨浮鏁堟灉錛屾祻瑙堝櫒蹇呴』鏀寔 CSS3 3D 杞崲錛?/p>
嫻忚鍣ㄦ敮鎸?/h2>- Internet Explorer 10 鏀寔 3D 杞崲錛堟洿鏃╃殑鐗堟湰涓嶆敮鎸侊級
- Opera 浠嶇劧涓嶆敮鎸?3D 杞崲
榪囨浮鏁堟灉鍙簲鐢ㄤ簬浠繪剰閾炬帴鎴栭氳繃浣跨敤 data-transition 灞炴ц繘琛岀殑琛ㄥ崟鎻愪氦錛?/p>
<a href="#anylink" data-transition="slide">婊戝姩鍒伴〉闈簩</a>涓嬮潰鐨勮〃鏍煎睍紺轟簡鍙笌 data-transition 灞炴т竴鍚屼嬌鐢ㄧ殑鍙敤榪囨浮錛?/p>
| 榪囨浮 | 鎻忚堪 | 嫻嬭瘯 |
|---|---|---|
| fade | 榛樿銆傛貳鍏ユ貳鍑哄埌涓嬩竴欏點?/td> | 嫻嬭瘯 |
| flip | 浠庡悗鍚戝墠緲誨姩鍒頒笅涓欏點?/td> | 嫻嬭瘯 |
| flow | 鎶涘嚭褰撳墠欏甸潰錛屽紩鍏ヤ笅涓欏點?/td> | 嫻嬭瘯 |
| pop | 鍍忓脊鍑虹獥鍙ｉ偅鏍瘋漿鍒頒笅涓欏點?/td> | 嫻嬭瘯 |
| slide | 浠庡彸鍚戝乏婊戝姩鍒頒笅涓欏點?/td> | 嫻嬭瘯 |
| slidefade | 浠庡彸鍚戝乏婊戝姩騫舵貳鍏ュ埌涓嬩竴欏點?/td> | 嫻嬭瘯 |
| slideup | 浠庝笅鍒頒笂婊戝姩鍒頒笅涓欏點?/td> | 嫻嬭瘯 |
| slidedown | 浠庝笂鍒頒笅婊戝姩鍒頒笅涓欏點?/td> | 嫻嬭瘯 |
| turn | 杞悜涓嬩竴欏點?/td> | 嫻嬭瘯 |
| none | 鏃犺繃娓℃晥鏋溿?/td> | 嫻嬭瘯 |
鎻愮ず錛?/span>鍦?jQuery Mobile 涓紝娣″叆娣″嚭鏁堟灉鍦ㄦ墍鏈夐摼鎺ヤ笂閮芥槸榛樿鐨勶紙濡傛灉嫻忚鍣ㄦ敮鎸侊級銆?/p> 鎻愮ず錛?/span>浠ヤ笂鎵鏈夋晥鏋滃悓鏃舵敮鎸佸弽鍚戝姩浣滐紝渚嬪錛屽鏋滄?zhèn)ㄥ笇鏈洐宓闈粠宸﹀悜鍙虫粦鍔ㄥQ岃屼笉鏄粠鍙沖悜宸︼紝璇蜂嬌鐢ㄥ間負(fù) "reverse" 鐨?data-direction 灞炴с傚湪鍚庨鎸夐挳涓婃槸榛樿鐨勩?/p>瀹炰緥
<a href="#pagetwo" data-transition="slide"
data-direction="reverse">婊戝姩</a>
]]>
浣跨敤 jQuery Mobile 鍏ラ棬
鎻愮ず錛?/span>灝界 jQuery Mobile 閫傜敤浜庢墍鏈夌Щ鍔ㄨ澶囷紝瀹冨湪鍙板紡璁＄畻鏈轟笂浠嶇劧鍙兘瀛樺湪鍏煎鎬ч棶棰橈紙鐢變簬鏈夐檺鐨?CSS3 鏀寔錛夈?/p> 鍥犳鍦ㄦ湰鏁欑▼涓紝鎴戜滑鎺ㄨ崘鎮(zhèn)ㄤ嬌鐢ㄨ胺姝岀殑 Chrome 嫻忚鍣紝浠ヨ幏寰楁渶濂界殑闃呰浣撻獙銆?/p> 鍦ㄨ繖浜涘鍣ㄤ腑錛屾?zhèn)ㄥ彲浠ユ氛d姞浠繪剰 HTML 鍏冪礌 - 孌佃惤銆佸浘鍍忋佹爣棰樸佸垪琛ㄧ瓑絳夈?/p> 鎻愮ず錛?/span>HTML5 data-* 灞炴х敤浜庨氳繃 jQuery Mobile 涓虹Щ鍔ㄨ澶囧垱寤?#8220;瀵硅Е鎺у弸濂界殑”浜や簰澶栬銆?/p> 鍦?jQuery Mobile錛屾?zhèn)ㄥ彲浠ュ湪鍗曚竴 HTML 鏂囦歡涓垱寤哄涓〉闈€?/p> 璇烽氳繃鍞竴鐨?id 鏉ュ垎闅旀瘡寮犻〉闈紝騫朵嬌鐢?href 灞炴ф潵榪炴帴褰兼錛?/p> 娉ㄩ噴錛?/span>鍖呭惈澶ч噺鍐呭鐨?web 搴旂敤紼嬪簭浼?xì)濯勫搷鍔犺浇鏃堕椷_(dá)紙姣斿鏂囨湰銆侀摼鎺ャ佸浘鍍忓拰鑴氭湰絳夌瓑錛夈傚鏋滄?zhèn)ㄤ笉甯屾湜鍦ㄥ唴閮ㄩ摼鎺宓闈㈠Q岃浣跨敤澶栭儴鏂囦歡錛?/p> 瀵硅瘽妗嗘槸鐢ㄦ潵鏄劇ず淇℃伅鎴栬姹傝緭鍏ョ殑瑙嗙獥綾誨瀷銆?/p> 濡傞渶鍦ㄧ敤鎴風(fēng)偣鍑伙紙杞昏Е錛夐摼鎺ユ椂鍒涘緩涓涓璇濇錛岃鍚戣閾炬帴娣誨姞 data-rel="dialog"錛?/p>瀹炰緥
<body> <div
data-role="page"> <div data-role="header"> <h1>嬈㈣繋璁塊棶鎴戠殑涓婚〉</h1> </div> <div data-role="content"> <p>鎴戞槸涓鍚嶇Щ鍔ㄥ紑鍙戣咃紒</p> </div> <div data-role="footer"> <h1>欏佃剼鏂囨湰</h1> </div> </div> </body> 渚嬪瓙瑙ｉ噴錛?/h3>
鍦?jQuery Mobile 涓坊鍔犻〉闈?/h2>
瀹炰緥
<div data-role="page"
id="pageone"> <div data-role="content"> <a href="#pagetwo">杞埌欏甸潰浜?lt;/a> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="content"> <a href="#pageone">杞埌欏甸潰涓</a> </div> </div> <a href="externalfile.html">杞埌澶栭儴欏甸潰</a>灝嗛〉闈㈢敤浣滃璇濇
瀹炰緥
<div data-role="page" id="pageone"> <div data-role="content"> <a href="#pagetwo"
data-rel="dialog">杞埌欏甸潰浜?lt;/a> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="content"> <a href="#pageone">杞埌欏甸潰涓</a> </div> </div>
]]>
鍚戞?zhèn)ㄧ殑缃憴鍓|坊鍔?jQuery Mobile
鏈夊涓姙娉曞彲渚涙?zhèn)ㄥ湪缃戠珯涓婂紑濮嬩嬌鐢?jQuery Mobile銆傛?zhèn)ㄥ彲浠ュQ?/p>
- 浠?CDN 寮曠敤 jQuery Mobile錛堟帹鑽愶級
- 浠?jQuerymobile.com 涓嬭澆 jQuery Mobile 搴?/li>
浠?CDN 寮曠敤 jQuery Mobile
鎻愮ず錛?/span>CDN (Content Delivery Network) 鐢ㄤ簬閫氳繃 web 鏉ュ垎鍙戝父鐢ㄧ殑鏂囦歡錛屼互姝ゅ姞蹇敤鎴風(fēng)殑涓嬭澆閫熷害銆?/p> 涓?jQuery 綾諱技錛屾棤闇鍦ㄦ?zhèn)ㄧ殑璁〗帡鏈轰笂瀹夎鋼Q浣曠▼搴忥紱鎮(zhèn)ㄥ彧闇鐩存帴鍦?HTML 欏甸潰涓紩鐢ㄤ互涓嬫牱寮忚〃鍜?JavaScript 搴擄紝榪欐牱 jQuery Mobile 灝卞彲浠ュ伐浣滀簡錛?/p>jQuery Mobile CDN:
<head> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head>
涓嬭澆 jQuery Mobile
濡傛灉鎮(zhèn)ㄥ笇鏈涘湪鏈嶅姟鍣ㄤ笂瀛樻斁 jQuery Mobile錛屾?zhèn)ㄥ彲浠ヤ?nbsp;jQuerymobile.com 涓嬭澆鏂囦歡銆?/p>
<head> <link rel=stylesheet href=jquery.mobile-1.3.2.css> <script src=jquery.js></script> <script src=jquery.mobile-1.3.2.js></script> </head>
鎻愮ず錛?/span>璇峰皢涓嬭澆鐨勬枃浠舵斁鍒版?zhèn)ㄥ笇鏈涗娇鐢ㄧ殑鏂囦欢澶逛腑銆?/p> 鎻愮ず錛?/span>鎮(zhèn)ㄦ槸涓嶆槸濂囨負(fù)浠涔?<script> 鏍囩涓病鏈?type="text/javascript" 灞炴э紵 鍦?HTML5 涓灞炴т笉鏄繀闇鐨勩侸avaScript 鏄?HTML5 浠ュ強(qiáng)鎵鏈夌幇浠ｆ祻瑙堝櫒涓殑榛樿鑴氭湰璇█錛?/p>
]]>
jQuery Mobile
jQuery Mobile 鏄垱寤虹Щ鍔?web 搴旂敤紼嬪簭鐨勬鏋躲?/p>
jQuery Mobile 閫傜敤浜庢墍鏈夋祦琛岀殑鏅鴻兘鎵嬫満鍜屽鉤鏉跨數(shù)鑴戙?/p>
jQuery Mobile 浣跨敤 HTML5 鍜?CSS3 閫氳繃灝藉彲鑳藉皯鐨勮剼鏈欏甸潰榪涜甯冨眬銆?/p>
姣忕珷涓殑 TIY 瀹炰緥
閫氳繃鎴戜滑鐨勫湪綰跨紪杈戝櫒錛屾?zhèn)ㄨ兘澶熅~栬緫浠ｇ爜錛岀劧鍚庣偣鍑?yán)L彁浜ゆ寜閽潵鏌ョ湅緇撴灉銆?/p>
瀹炰緥
<div data-role="page" id="pageone"> <div data-role="header"> <h1>鍦ㄦ澶勫啓鍏ユ爣棰?lt;/h1> </div> <div data-role="content"> <p>鍦ㄦ澶勫啓鍏ユ鏂?lt;/p> </div> <div data-role="footer"> <h1>鍦ㄦ澶勫啓鍏ラ〉鑴氭枃鏈?lt;/h1> </div> </div>
璇風(fēng)偣鍑?#8220;浜茶嚜璇曚竴璇?#8221;鎸夐挳鏉ユ煡鐪嬬粨鏋溿?/p>
jQuery Mobile 瀹炰緥
閫氳繃瀹炰緥鏉ュ涔?fàn)锛佸?W3School錛屾?zhèn)ㄥ彲浠ユ墤謭板ぇ閲?jQuery Mobile 瀹炰緥錛屽茍浜茶嚜榪涜嫻嬭瘯銆?/p>
jQuery Mobile 鍙傝冩墜鍐?/h2>
鍦?W3School錛屾?zhèn)畣鎵惧埌鍖呭惈鎵鏈?jQuery Mobile 灞炴х殑瀹屾暣鍙傝冩墜鍐屻?/p>
]]>