jQuery Mobile 1.0版本介紹
日期：2011/12/14
官方已經正式發布了jQuery Mobile 1.0，今天我們這里將介紹這個流行的移動端框架以幫助大家跨平臺開發基于web的應用。 jQuery Mobile是一個流行的jQuery框架的擴展。正如其名，它用來幫助開發基于移動設備的web應用。作為最流行的移動端開發框架之一，它能提供大家一個非桌面應用的解決方案。同時它也被整合到SDK例如PhoneGap中作為本地應用的必要的組件。 支持jQuery的團隊非常努力的開發jQuery移動框架，在最后的3個月終于正式發布了。 今天我們來看看jQuery mobile中的一些特性，希望能幫助大家快速的開發出基本的移動客戶端應用。
創建頁面
在我們正式開始之前，我們需要確認幾件事情。首先，我們需要確認我們使用meta標簽設置正確的viewport。
<meta name="viewport" content="width=device-width, initial-scale=1">
然后，使用這個作為我們在iOS上的首頁，我們可以使用app-capable，如下：
<meta name="apple-mobile-web-app-capable" content="yes" />
以上標簽并不強制需要，但是設置它們是個不錯的主意。
接 下來，我們需要引入CSS及其javascript。當前我們使用缺省的CSS，雖然后面我們將討論分開的樣式結構。對于javascript來說，我們 需要確認我們包括了Version1.6.4的jQuery和jQuery mobile 1.0。jQuery mobile依賴于jQuery，所以你必須倒入jQuery類庫。這篇文章書寫的時候，最新的jQuery是1.7，但是jQuery mobile目前只支持jQuery1.6.4。當然不久后，將會支持1.7。
<link rel="stylesheet" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
接下來，我們將看看主題部分并且創建一個頁面的最典型部分。jQuery Mobile使用HTML5 data屬性來指定元素的行為， data-role可能是最常用的屬性之一，它定義了元素的頁面角色。添加data-role="page"到你的頁面中。
<div data-role="page"> <!-- all page content --> </div>
不需要一定是一個div元素，也可以是html5的section元素，但是結果是一樣的。這樣你創建了你的第一個jQuery Mobile頁面。
上面代碼中我們使用了data-role屬性。我們同樣可以使用data-role="header"和data-role="footer"來設置頁頭和頁腳。用data-role="content"來設置主體body
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile Page</title> <link rel="stylesheet" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>The Header</h1> </div><!-- /header --> <div data-role="content"> <p>This is a single page boilerplate template that you can copy to build you first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p> <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p> <p>This template is standard HTML document with a single "page" container inside, unlike a <a href="multipage-template.html" data-ajax="false">multi-page template</a> that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.</p> </div><!-- /content --> <div data-role="footer"> <h4></h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
如果你使用iphone來展示頁面，你將能夠看到如下內容：
完整的代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>Single page template</title> <link rel="stylesheet" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="one"> <div data-role="header"> <h1>The Header</h1> </div> <div data-role="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet odio ipsum, non volutpat sapien. Sed consequat gravida eros, vitae convallis dui rutrum in. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum in. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum in. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum in. Curabitur ipsum leo, pulvinar</p> </div> <div data-role="footer"> <h4>The Footer</h4> </div> </div> </body> </html>
以上是不是很簡單，但是這僅僅是開始。使用jQuery Mobile開發將非常迅速。對于快速開發原型及其完整功能的應用都非常合適
創建多重頁面(multiple pages)
當然，使用所有的類庫來開發一個頁面有點過分，接下來我們將介紹最有意思的部分，并且添加一些頁面到我們的應用中。
你可以添加倆個新div容器到屬性data-role="content"的div對應閉合標簽后面，但是頁面data-role應該設置id屬性為"two"和"three"。同時給前面我們添加的div加上一個id為"one"。 其它部分都不變。代碼如下：
<div data-role="page" id="two"> <div data-role="header"> <h1>The Header</h1> </div> <div data-role="content"> <p>This is the second page</p> </div> <div data-role="footer"> <h4>The Footer</h4> </div> </div> <div data-role="page" id="three"> <div data-role="header"> <h1>The Header</h1> </div> <div data-role="content"> <p>This is the third page contents</p> </div> <div data-role="footer"> <h4>The Footer</h4> </div> </div>
如果你現在在移動瀏覽器中查看效果，可能沒有任何變化。因為我們需要將這些頁面鏈接到第一個頁面。添加如下代碼到第一個頁面中：
<a href="#two">Page Two</a> <a href="#three">Page Three</a>
如果你點擊第一個頁面中屬性為href="#two"的鏈接，你將會看到動畫效果并且頁面移動到第二個頁面中。當然現在你無法返回到第一個頁面中。你可以同樣添加一個頁面link到頁面two中，這樣就可以返回到頁面one。
按鈕
目前我們頁面比較乏味，但是不用花很大力氣我們就可以添加一些按鈕讓頁面更加漂亮。
如果你添加屬性data-role="button"到對應鏈接上，并且刷新頁面，你可以看到更漂亮的頁面。
主題
目 前我們的頁面展現不錯，我們可以在頁面間導航，但是所有的頁面看起來比較呆板。好消息是jQuery Mobile自帶了一些不錯的主題我們可以使用。這些主題能夠快速的幫助開發人員修改顏色和UI的look and feel。這里我們使用data-theme屬性。我們添加data-them="a"， data-them="b"，data-theme="c"到每個頁面。刷新后，看看效果吧。是不是很酷。
直到最近，唯一的方式來切換你的自定義主題就是引入一個額外的樣式表，并且覆蓋缺省的。很感謝的是，最近10月份的RC版本已經被拆分成2個分開的實體，使得有空間來添加新的ThemeRoller。第一個樣式處理應用的結構，第二個樣式處理主題。
去主題切換頁面看看吧，你會看到如下頁面：
在左手邊，你就有你的主題設置。你可以選擇過濾每一個部分，并且進行調整。然后使用邊欄菜單來進行選擇。你可以自己設定最多為26個的主題。然后下載你需要的主題到你的應用中。
下載Zip文件后，你將會有一個index.html文件，這個文件包括了主題文件夾，你可以在這個文件夾中找到圖片目錄及其2個樣式文件。
現在你可以使用這個樣式替代缺省的主題CSS。
<!DOCTYPE html> <html> <head> <title>jQuery Mobile</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- INSERT CUSTOM THEME CSS--> <link rel="stylesheet" href="css/themes/my-custom-theme.css" /> <!-- INSERT STRUCTURE CSS --> <link rel="stylesheet" /> </head>
現在，你通過data-role="theme"來訪問你創建的主題。你可以參考你創建的ThemeRoller CSS。
<!DOCTYPE html> <html> <head> <title>jQuery Mobile</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- INSERT CUSTOM THEME CSS--> <link rel="stylesheet" href="css/themes/my-custom-theme.css" /> <!-- INSERT STRUCTURE CSS --> <link rel="stylesheet" /> <!-- INSERT jQuery --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <!-- INSERT latest jQuery Mobile --> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" data-theme="a"> <div data-role="header"> <h1>The Header</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>The Footer</h4> </div> </div> </body> </html>
你 可以添加data-theme屬性到任何頁面元素中。如果你添加到屬性為data-role="page"的div中，主題將會應用到頁面上所有元素。你 可以切換不同主題試試，看看不同的搭配效果。這里有其它的一些拖放效果。你可以調整顆粒度，陰影，甚至修改顏色亮度及其飽和度。
浙公網安備 33010602011771號