HTML5是用於取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標準的 HTML 標準版本,如今仍處於發展階段,但大部分瀏覽器已經支持某些 HTML5 技術。HTML 5有兩大特色:首先,強化了 Web 網頁的表現性能。其次,追加了本地數據庫等 Web 應用的功能。廣義論及HTML5時,實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它但願可以減小瀏覽器對於須要插件的豐富性網絡應用服務javascript
這個主要是採用統一的標準的HTML,JavaScript.CSS等web技術開發. 用戶無需下載,經過不一樣平臺的瀏覽器訪問來實現跨平臺,同時能夠經過瀏覽器支持充分使用HTML5特性,缺點是這些基於瀏覽器的應用沒法調用系統API來實現一些高級功能,也不適合高性能要求的場合css
就是所謂的原生應用.指的是用平臺特定的開發語言所開發的應用.使用它們的優勢是能夠徹底利用系統的API和平臺特性,在性能上也是最好的。缺點是因爲開發技術不一樣,若是你要覆蓋多個平臺,則要針對每一個平臺獨立開發,無跨平臺特性html
則是爲了彌補如上二者開發模式的缺陷的產物.分別繼承雙方的優點.首先它讓爲數衆多的web開發人員能夠幾乎零成本的轉型成移動應用開發者.其次,相同的代碼只需針對不一樣平臺進行編譯就能實如今多平臺的分發,大大提升了多平臺開發的效率;而相較於web App,開發者能夠經過包裝好的接口,調用大部分經常使用的系統API。PhoneGap正是Hybird APP的表明開發框架html5
jQuery Mobile是jQuery在手機上和平板設備上的版本。jQuery Mobile 不只會給主流移動平臺帶來jQuery核心庫,並且會發佈一個完整統一的jQuery移動UI框架。支持全球主流的移動平臺。此框架簡單易用。頁面開發主要使用標記,無需或僅需不多 JavaScript. 此框架簡單易用。頁面開發主要使用標記,無需或僅需不多 JavaScriptjava
在多廠商的利益競爭下,當前的智能終端平臺呈現出了「百家爭鳴」的現象。當前的移動終端系統呈現出較爲零散的割據狀態,其中, Nokia 主推的 Symbian、Apple 的iOS、和 Google 的 Android,分別佔據了較大的市場份額。然而,因爲當前主流的移動平臺之間互不兼容,針對不一樣的移動平臺系統,當前並無能夠兼容的應用開發接口和語言;當前,使用 C/C++ 的 Symbian、使用 Object C 的iOS和使用 Java 的 Android 應用開發技術,幾乎是徹底沒法融合的jquery
資源文件介紹web
<link href="jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/> <script src="jquery-1.6.4.min.js" type="text/javascript"></script> <script src="jquery.mobile-1.0.min.js" type="text/javascript"></script>
基本的代碼結構chrome
1 <div data-role="page" id="page"> 2 <div data-role="header"> 3 <h1>第 1 頁</h1> 4 </div> 5 <div data-role="content"> 6 <ul data-role="listview"> 7 <li><a href="#page2">第 2 頁</a></li> 8 <li><a href="#page3">第 3 頁</a></li> 9 <li><a href="Untitled-2.html">第 4 頁</a></li> 10 </ul> 11 </div> 12 <div data-role="footer"> 13 <h4>頁面腳註</h4> 14 </div> 15 </div>
1 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> 2 3 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 4 5 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<div data-role="page"> <div data-role="header"> <h1>歡迎來到Jquery Mobile世界</h1> </div> <div data-role="content"> <p>歡迎,這裏是正文內容</p> </div> <div data-role="footer"> <h1>頁腳文本</h1> </div> </div>
<button>button 按鈕</button> <input type="submit" value="input 按鈕" /> <a href="#page2" data-role="button">a 標籤按鈕</a>
總結: jQuery Mobile 中的按鈕會自動得到樣式,這加強了他們在移動設備上的交互性和可用性。咱們推薦您使用 data-role="button" 的 <a> 元素來建立頁面之間的連接,而 <input> 或 <button> 元素用於表單提交數據庫
默認狀況下,按鈕會佔據屏幕的所有寬度。若是您須要按鈕適應其內容,或者若是您須要兩個或多個按鈕並排顯示,請添加 data-inline="true"canvas
<a href="#" data-inline="true" data-role="button">行內</a>
規定按鈕是否有陰影 data-shadow="false|true", 按鈕是否有圓角 data-corners="false|true"
1 <a href="#" data-inline="true" data-shadow="true" data-corners="true" data-role="button">行內,陰影,圓角</a> 2 <a href="#" data-inline="true" data-shadow="false" data-corners="false" data-role="button">行內,無陰影正角</a>
如需建立後退按鈕,請使用 data-rel="back" 屬性(會忽略錨的 href 值)data-rel="back"
<!-- 默認返回到上一頁,它會忽略href屬性 --> <a href="http://www.hao123.com" data-role="button" data-rel="back">返回</a>
按鈕的主題顏色. data-theme: letter (a-z)
1 <div data-role="header" data-theme="b"> 2 <h1>第 1 頁</h1> 3 </div>
請將 data-role="controlgroup" 屬性與 data-type="horizontal|vertical" 一同使用
1 <!-- 默認第一個和最後一個有圓角,默認狀況每一個組件都有本身的主題 --> 2 <div data-role="controlgroup" data-type="horizontal"> 3 <a href="#" data-role="button" data-theme="a">首頁</a> 4 <a href="#" data-role="button" data-theme="b">介紹</a> 5 <a href="#" data-role="button" data-theme="c">聯繫</a> 6 </div>
<a href="#" data-inline="true" data-role="button" data-icon="arrow-u">上</a> <a href="#" data-inline="true" data-role="button" data-icon="arrow-d">下</a> <a href="#" data-inline="true" data-role="button" data-icon="arrow-l">左</a> <a href="#" data-inline="true" data-role="button" data-icon="arrow-r">右</a>
1 <a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a> 2 <a href="#link" data-role="button" data-icon="search" data-iconpos="right">右</a> 3 <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">下</a> 4 <a href="#link" data-role="button" data-icon="search" data-iconpos="left">左</a>
1 <a href="#" data-inline="true" data-role="button" data-icon="arrow-u" data-iconpos="top">上</a> 2 <a href="#" data-inline="true" data-role="button" data-icon="arrow-d" data-iconpos="bottom">下</a> 3 <a href="#" data-inline="true" data-role="button" data-icon="arrow-l" data-iconpos="left">左</a> 4 <a href="#" data-inline="true" data-role="button" data-icon="arrow-r" data-iconpos="right">右</a>
注意: 若是隻需顯示圖標,請將 data-iconpos 設置爲 "notext"
<a href="#" data-inline="true" data-role="button" data-icon="search" data-iconpos="notext">搜索</a> <a href="#" data-inline="true" data-role="button" data-icon="home" data-iconpos="notext">主頁</a> <a href="#" data-inline="true" data-role="button" data-icon="info" data-iconpos="notext">消息</a>
如需建立列表,請向 <ol> 或 <ul> 元素添加 data-role="listview"。如需使這些項目可點擊,請在每一個列表項(<li>)中規定連接
建立有序列表(如需爲列表添加圓角和外邊距,請使用 data-inset="true" 屬性)
1 <ol data-role="listview" data-inset="true"> 2 <li><a href="#">列表項</a></li> 3 <li><a href="#">列表項</a></li> 4 </ol>
建立無序列表(如需爲列表添加圓角和外邊距,請使用 data-inset="true" 屬性)
<ul data-role="listview" data-inset="true"> <li><a href="#">列表項</a></li> <li><a href="#">列表項</a></li> </ul>
提示:默認地,列表中的列表項會自動轉換爲按鈕(無需 data-role="button")
列表分隔符(List Dividers)用於把項目組織和組合爲分類/節, 如需規定列表分隔符,請向 <li> 元素添加 data-role="list-divider" 屬性
<ol data-role="listview" data-inset="true"> <li data-role="list-divider">廣東</li> <li><a href="#">廣州</a></li> <li><a href="#">深圳</a></li> </ol>
<ol data-role="listview" data-filter="true" data-filter-placeholder="請輸入姓名" data-inset="true"> <li data-role="list-divider">廣東</li> <li><a href="#">廣州</a></li> <li><a href="#">深圳</a></li> <li><a href="#">珠海</a></li> </ol>
對於大於 16x16px 的圖像,請在連接中添加 <img> 元素, jQuery Mobile 將自動把圖像調整至 80x80px
<ul data-role="listview"> <li> <a href="#"> <img src="images/chrome.png"> <h2>Google Chrome</h2> <p>Google Chrome 免費的開源 web 瀏覽器。發佈於 2008 年。 </p> </a> </li> </ul>
<div data-role="content"> <h2>個人郵箱</h2> <ul data-role="listview" data-inset="true"> <li><a href="#">收件箱<span class="ui-li-count">25</span></a></li> <li><a href="#">發件箱<span class="ui-li-count">432</span></a></li> <li><a href="#">垃圾箱<span class="ui-li-count">7</span></a></li> </ul> </div>
效果圖以下:
div data-role="content"> <form method="post" action="#"> <!-- 容器,可選 --> <div data-role="fieldcontain"> <!-- 能夠隱藏label屬性 --> <label for="name" class="ui-hidden-accessible">姓名:</label> <input type="text" id="name" placeholder="姓名.." /> <button type="submit" data-inline="true">提交</button> </div> </form> </div>
<div data-role="content"> <form method="post" action="demoform.asp"> <div data-role="fieldcontain"> <label for="search">搜索:</label> <input type="search" name="search" id="search" placeholder="搜索內容..."> </div> <input type="submit" data-inline="true" value="提交"> </form> </div>
1 <form method="post" action="#"> 2 <div data-role="fieldcontain"> 3 <label for="name">姓名:</label> 4 <input type="text" id="name" name="name" placeholder="姓名" /> 5 6 <label for="like">介紹:</label> 7 <textarea id="like" placeholder="請輸入介紹.........."></textarea> 8 9 <label for="search">搜索:</label> 10 <input type="search" name="search" id="search" /> 11 12 <legend>Choose your like:</legend> 13 <select data-inline="true" name="day" id="day"> 14 <option value="" selected>請選擇日期.....</option> 15 <option value="mon">星期一</option> 16 <option value="tue">星期二</option> 17 <option value="wed">星期三</option> 18 </select> 19 20 <fieldset data-role="controlgroup" data-type="horizontal"> 21 <legend>Choose your gender:</legend> 22 <label for="boy">boy:</label> 23 <input type="radio" id="boy" name="sex" value="boy"> 24 <label for="gril">gril:</label> 25 <input type="radio" checked id="gril" name="sex" value="girl"> 26 </fieldset> 27 <fieldset data-role="controlgroup" data-type="horizontal"> 28 <legend>Choose your like:</legend> 29 <label for="book">book:</label> 30 <input type="checkbox" id="book" name="sex" value="book"> 31 <label for="sleep">sleep:</label> 32 <input type="checkbox" id="sleep" name="sex" value="sleep"> 33 </fieldset> 34 <label for="points">Points:</label> 35 <input type="range" name="points" id="points" value="50" min="0" max="100"> 36 37 <label for="switch">開關:</label> 38 <select id="switch" data-role="slider"> 39 <option value="on" selected>on</option> 40 <option value="off">off</option> 41 </select> 42 </div> 43 <button data-icon="search" data-inline="true" data-iconpos="right">提交</button> 44 </form>
導航欄由一組水平排列的連接構成,一般位於頁眉或頁腳內部。默認地,導航欄中的連接會自動轉換爲按鈕(無需 data-role="button")。請使用 data-role="navbar" 屬性來定義導航欄:
1 <div data-role="header"> 2 <!-- 五個按鈕內,默認平分.若是有圖標默認在文字正上方 --> 3 <div data-role="navbar"> 4 <ul> 5 <li><a href="#" data-icon="home">首頁</a></li> 6 <li><a href="#" data-icon="search">搜索</a></li> 7 <li><a href="#" data-icon="back">返回</a></li> 8 </ul> 9 </div> 10 </div>
提示:按鈕的寬度,默認地,與其內容一致。使用無序列表來均等地劃分按鈕:一個按鈕佔據 100% 的寬度,兩個按鈕各分享 50% 的寬度,三個按鈕 33.3%,以此類推。不過,若是您在導航欄中規定了五個以上的按鈕,那麼它會彎折爲多行
1 <div data-role="navbar"> 2 <ul> 3 <li><a href="#" data-icon="plus">更多</a></li> 4 <li><a href="#" data-icon="minus">更少</a></li> 5 <li><a href="#" data-icon="delete">刪除</a></li> 6 <li><a href="#" data-icon="check">喜好</a></li> 7 <li><a href="#" data-icon="info">信息</a></li> 8 </ul> 9 </div>
頁眉一般會包含頁眉標題/LOGO 或一到兩個按鈕(一般是首頁、選項或搜索按鈕)
1 <div data-role="header"> 2 <div data-role="header"> 3 <a href="#" data-role="button">首頁</a> 4 <h1>歡迎來到個人主頁</h1> 5 <!-- 若是隻有一個按鈕,則默認顯示在左邊,除非添加樣式:class="ui-btn-right"--> 6 <a href="#" data-role="button" class="ui-btn-right">搜索</a> 7 </div> 8 </div>
提示:頁眉可包含一個或兩個按鈕,然而頁腳沒有限制
頁腳與頁眉的樣式不一樣(它會減去一些內邊距和空白,而且按鈕不會居中).若是要修正該問題,請在頁腳設置類名 "ui-btn"
1 <div data-role="footer" class="ui-btn"> 2 <a href="#" data-role="button">轉播到新浪微博</a> 3 <a href="#" data-role="button">轉播到騰訊微博</a> 4 </div>
1 <div data-role="header" data-position="fixed" data-fullscreen="true"></div> 2 <div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
使用固定寬度的包裹層(Wrapper), 內部的各個部分可使用百分比或者固定的寬度來表示. 這裏最重要的是, 外面的所謂包裹層(或稱爲容器)的寬度是固定不變的, 因此不論訪問者的瀏覽器是什麼分辨率, 他們看到的網頁寬度都彼此相同.
流式佈局(Fluid Layout 或 Liquid Layout), 主要使用百分比來設置各個部分的寬度, 用來適應不一樣的分辨率. 有時候, 對於網頁中的某一部分元素(好比邊界值, 側邊欄), 可使用固定寬度, 但大部分元素是使用百分比來控制的
jQuery Mobile 提供了一套基於 CSS 的列布局方案。不過,通常不推薦在移動設備上使用列布局,這是因爲移動設備的屏幕寬度所限。可是有時您須要定位更小的元素,好比按鈕或導航欄,就像在表格中那樣並排。這時,列布局就恰如其分。網格中的列是等寬的(總寬是 100%),無邊框、背景、外邊距或內邊距。可以使用的佈局網格有四種:
提示:在列容器中,根據不一樣的列數,子元素可設置類 ui-block-a|b|c|d|e。這些列將依次並排浮動。
實例 1: 對於 ui-grid-a 類(兩列布局),您必須規定兩個子元素 ui-block-a 和 ui-block-b。
實例 2: 對於 ui-grid-b 類(三列布局),請添加三個子元素 ui-block-a、ui-block-b 和 ui-block-c
案例代碼以下:
<div data-role="content"> <div class="ui-grid-b"> <!-- 第一行有三個按鈕 --> <div class="ui-block-a"><a href="#" data-role="button" data-icon="home">首頁</a></div> <div class="ui-block-b"><a href="#" data-role="button" data-icon="search">搜索</a></div> <div class="ui-block-c"><a href="#" data-role="button" data-icon="back">返回</a></div> <!-- 第二行有二個按鈕 --> <div class="ui-block-a"><a href="#" data-role="button" data-icon="home">首頁</a></div> <div class="ui-block-b"><a href="#" data-role="button" data-icon="search">搜索</a></div> <!-- 第三行有一個按鈕 --> <div class="ui-block-a"><a href="#" data-role="button" data-icon="back">返回</a></div> </div> </div>