最新jQuery Mobile 1.2版本新特性
大家還記得在jQuery 1.0 RC版本發布的時候我們曾經發布過一個jQuery Mobile RC版本介紹文章介紹主要的特性。就在前不久，jQuery Mobile團隊又發布了jQuery Mobile 1.2。新版本中帶來了一些非常不錯的特性。在今天的這篇文章中我們將繼續介紹1.2版本的一些新的widget，及其一些針對老版本widget的功能加強。希望大家喜歡！
Widgets
jQuery Mobile最核心的地方就在于widgets。提供了與用戶交互的界面。在最新的版本中，加入了一個全新的widget：popup modal。
Popups （彈出層）
彈出層是一個覆蓋于頁面其它內容的小的區域。可以用來設計提示欄，顯示照片，地圖或者其它內容。在jQuery mobile 1.2中，實現了這個超棒的widgets。
在本篇文章中，我們將使用如下代碼框架來演示代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile 1.2</title>
<link rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="content">
<!-- 請將以下的文章代碼粘貼到此處 -->
</div>
</body>
</html>這里我們使用CDN來加載javascript。
友情提示：請大家使用Chrome來訪問以下的“在線調試”地址，謝謝！
為了添加popup彈出層，我們需要添加如下屬性來定義所參考類型是popup：
data-rel="popup"
然后定義具體的插件類型，如下：
data-role="popup"
展示的觸發層內容，可以是表單，菜單或者圖片，完整代碼如下：
<a href="#simplepopup" data-rel="popup">Open Popup</a>
<div data-role="popup" id="simplepopup">
<p>This is a completely basic popup, no options set.<p>
</div>
Tooltips（工具提示條）
使用popup我們還可以創建工具提示條，如下：
<a href="#tooltip" data-rel="popup" data-role="button">Find out more</a>
<div data-role="popup" id="tooltip" data-theme="e">
<p>You found out more!.</p>
</div>Menus（菜單）
下面我們生成一個菜單，如下：
<a href="#menu" data-rel="popup" data-role="button">Menu</a>
<div data-role="popup" id="menu" data-theme="a">
<ul data-role="listview" data-theme="c" data-inset="true">
<li data-role="divider" data-theme="a">My Menu</li>
<li>Unlinked</li>
<li><a href="methods.html">Linked</a></li>
<li><a href="methods.html">With count</a><span class="ui-li-count">42</span></a></li>
</ul>
</div>
當然，你也可以生成可縮放list，如下：
<a href="#nestedmenu" data-rel="popup" data-role="button">Nested Menu</a>
<div data-role="popup" id="nestedmenu" data-theme="none">
<div data-role="collapsible-set" data-theme="b" data-content-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
<div data-role="collapsible" data-inset="false">
<h2>Colors</h2>
<ul data-role="listview">
<li><a href="#">Red</a></li>
<li><a href="#">Blue</a></li>
</ul>
</div>
<div data-role="collapsible" data-inset="false">
<h2>Shapes</h2>
<ul data-role="listview">
<li><a href="#">Circle</a></li>
<li><a href="#">Square</a></li>
</ul>
</div>
</div>
</div> 
Form（表單）
我們也可以生成彈出式樣的登錄表單，如下：
<a href="#login" data-rel="popup" data-position-to="window" data-role="button">Login</a>
<div data-role="popup" id="login" data-theme="a">
<form style="padding:10px 20px;">
<h3>Please sign in</h3>
<label for="un" class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="un" placeholder="username" />
<label for="pw" class="ui-hidden-accessible">Password:</label>
<input type="password" name="pass" id="pw" placeholder="password" />
<button type="submit" data-theme="b">Sign in</button>
</form>
</div>
Dialogs（對話框）
對話框也是我們常用的，如下：
<a href="#dialog" data-rel="popup" data-position-to="window" data-role="button" data-transition="pop">Dialog</a>
<div data-role="popup" id="dialog" data-overlay-theme="a" data-theme="c">
<div data-role="header" data-theme="a">
<h1>Delete Page?</h1>
</div>
<div data-role="content" data-theme="d">
<h3>Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">No</a>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="b">Yes, Delete it</a>
</div>
</div>
Photos（圖片展示）
使用懸浮方式展示圖片，如下：
<a href="#photo" data-rel="popup" data-position-to="window" data-role="button" data-transition="fade">Photo</a>
<div data-role="popup" id="photo" data-overlay-theme="a" data-theme="d" data-corners="false">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="nojs" class="ui-btn-right">Close</a><img src="http://www.gbin1.com//gbin1/themes/gbin1_2column_page/images/logo.png" />
</div>
List Views （可縮放列表）
這個效果肯定你也會需要：
<div data-role="collapsible" data-theme="b" data-content-theme="c">
<h2>Favorite Spice Girl?</h2>
<ul data-role="listview">
<li><a href="index.html">Posh</a></li>
<li><a href="index.html">Scary</a></li>
<li><a href="index.html">Sporty</a></li>
<li><a href="index.html">Baby</a></li>
<li><a href="index.html">Ginger</a></li>
</ul>
</div>
功能加強
其它的更新包括了一些功能上的加強。
jQuery支持更新
開始支持jQuery1.8。sizzle.js的重寫帶來了性能的提升及其其它。并且開始考慮放棄支持1.6，如果你使用舊版本的話，可能會不舒服。
列表視圖的自動分隔
data-autodividers="true"
原來：
現在：
注意這里不包括管理排序，分組和過濾。如果你需要類似功能，考慮這個插件：jQuery Mobile Tinysort plugin.
只讀列表
提供了只讀列表，但是對于能不能點擊不是很明顯。
提供了更好的表單元素寬度調整
jQuery mobile version1.2解決了表單元素的問題，有時候不能完全的占有父元素寬度
其它的設備的支持
添加了另外一些平臺：iOS6；Android1.4(Jellybean)，Tizen，firefox for Android和Kindle Fire HD。
完整的更新列表
你可以在官方博客來查看完整的更新，希望我們的介紹能夠給你帶來一部分的新版本體驗，如果你有任何問題，請給我們留言！
本文由用戶 jjfat 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！