2二、(轉載)jQueryMobile 知識點總結

本文轉自:http://www.cnblogs.com/jxyedu

HTML5技術生態介紹

H5的現狀與將來

HTML5是用於取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標準的 HTML 標準版本,如今仍處於發展階段,但大部分瀏覽器已經支持某些 HTML5 技術。HTML 5有兩大特色:首先,強化了 Web 網頁的表現性能。其次,追加了本地數據庫等 Web 應用的功能。廣義論及HTML5時,實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它但願可以減小瀏覽器對於須要插件的豐富性網絡應用服務javascript

開發中選擇html5理由

  1. 兼容性老版本的瀏覽器上也能夠運行 (將來的標準)
  2. 實用性,簡化了標籤,細分了功能,增長了移動互聯網元素
  3. 革命性,HTML再也不是簡單的標籤語言,增長了API、渲染等

html5有哪些特色

  1. 本地存儲,離線應用
  2. API調用,地圖,位置,LBS等
  3. 鏈接通信,WebSocket
  4. 多媒體技術
  5. 三維、圖形, canvas技術
  6. CSS3 + JavaScript支持

Web App, Native APP,Hybird App介紹 (重要)

Web App 介紹

這個主要是採用統一的標準的HTML,JavaScript.CSS等web技術開發. 用戶無需下載,經過不一樣平臺的瀏覽器訪問來實現跨平臺,同時能夠經過瀏覽器支持充分使用HTML5特性,缺點是這些基於瀏覽器的應用沒法調用系統API來實現一些高級功能,也不適合高性能要求的場合css

Native APP介紹

就是所謂的原生應用.指的是用平臺特定的開發語言所開發的應用.使用它們的優勢是能夠徹底利用系統的API和平臺特性,在性能上也是最好的。缺點是因爲開發技術不一樣,若是你要覆蓋多個平臺,則要針對每一個平臺獨立開發,無跨平臺特性html

Hybird App介紹

則是爲了彌補如上二者開發模式的缺陷的產物.分別繼承雙方的優點.首先它讓爲數衆多的web開發人員能夠幾乎零成本的轉型成移動應用開發者.其次,相同的代碼只需針對不一樣平臺進行編譯就能實如今多平臺的分發,大大提升了多平臺開發的效率;而相較於web App,開發者能夠經過包裝好的接口,調用大部分經常使用的系統API。PhoneGap正是Hybird APP的表明開發框架html5

移動開發所面臨的問題

  1. 從應用開發的角度來講,一樣的程序邏輯卻不得不在多個平臺上使用不一樣的語言和API 重複編碼.
  2. 從代碼維護的角度來講,針對同一個項目須要同時維護多份代碼,一旦程序邏輯發生變化,將致使大規模的代碼修改與迴歸測試
  3. 從經濟角度來講,要同時開發和維護多個平臺的應用程序,將花費企業巨大的人力和時間成本

Html5 移動應用軟件開發框架

JqueryMobile介紹

jQuery Mobile是jQuery在手機上和平板設備上的版本。jQuery Mobile 不只會給主流移動平臺帶來jQuery核心庫,並且會發佈一個完整統一的jQuery移動UI框架。支持全球主流的移動平臺。此框架簡單易用。頁面開發主要使用標記,無需或僅需不多 JavaScript. 此框架簡單易用。頁面開發主要使用標記,無需或僅需不多 JavaScriptjava

爲何要學 jQuery Mobile

  1. 爲了建立 UI 部件,你只須要編寫 HTML 便可,JM 爲了對這些 HTML 元素進行修飾
  2. 可方便的重用已有的 HTML 代碼
  3. 一些簡單的應用直接用 HTML 便可實現,無需 JavaScript
  4. JM 具備相對小的對象模型,能夠快速輕鬆學習,特別是他是一個 jQuery 的插件
  5. JM 對代碼沒有特定的要求,這多是很是靈活的,但維護難度也加大
  6. 易於和其餘框架進行集利於PhoneGap
  7. 不依賴某個特定的供應商

PhoneGap介紹

在多廠商的利益競爭下,當前的智能終端平臺呈現出了「百家爭鳴」的現象。當前的移動終端系統呈現出較爲零散的割據狀態,其中, Nokia 主推的 Symbian、Apple 的iOS、和 Google 的 Android,分別佔據了較大的市場份額。然而,因爲當前主流的移動平臺之間互不兼容,針對不一樣的移動平臺系統,當前並無能夠兼容的應用開發接口和語言;當前,使用 C/C++ 的 Symbian、使用 Object C 的iOS和使用 Java 的 Android 應用開發技術,幾乎是徹底沒法融合的jquery

 

爲何要學 Phonegap

  1. 開發成本低
  2. 對各大主流平臺的兼容性很是好
  3. 採用W3C標準化技術
  4. 可以快速進行開發,迭代更新容易
  5. 輕量級和插件式架構顯著下降了維護成本
  6. 開源免費,並由Adobe公司和Apache基金會共同支持

 

開發環境搭建

資源文件介紹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. data-role="page" 是顯示在瀏覽器中的頁面
  2. data-role="header" 建立頁面上方的工具欄(經常使用於標題和搜索按鈕)
  3. data-role="content" 定義頁面的內容,好比文本、圖像、表單和按鈕,等等
  4. data-role="footer" 建立頁面底部的工具欄

本身構建jQuery Mobile開發環境

下載官方的資源

  1. http://jquerymobile.com/
  2. 建議使用比較成熟的1.3.2功能
  3. Copy-and-Paste snippet for jQuery CDN hosted files
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>

 

個人第一個jQuery Mobile的案例

<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>

 

 

按鈕、圖標

jQuery Mobile 中建立按鈕

可經過三種方法建立

  1. 使用 <button> 元素
  2. 使用 <input> 元素
  3. 使用 data-role="button" 的 <a> 元素
 <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>

jQuery Mobile 中建立圖標

常見的可用圖標: data-icon屬性

  <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>

 

 

定位圖標: 請使用 data-iconpos 屬性來規定位置

 
 
 
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>  

 

 

列表

jQuery Mobile 列表視圖

有序列表、無序列表

如需建立列表,請向 <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> 

給列表添加搜索框功能: data-filter="true"

 <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>

 

jQuery Mobile 列表內容

列表縮略圖

對於大於 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>

 

計數泡沫:請使用行內元素,好比 <span>設置 class "ui-li-count" 屬性並添加數字

 <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>

 

 

表單

效果圖以下:

常見的表單控件類型

  • 文本框
  • 搜索框
  • 單選框
  • 複選框
  • 選擇菜單
  • 滑動條
  • 翻轉切換開關

建立表單注意事項

  1. <form> 元素必須設置 method 和 action 屬性
  2. 每一個表單元素必須設置惟一的 "id" 屬性。該 id 在站點的頁面中必須是惟一的
  3. 每一個表單元素必須有一個標記(label)。請設置 label 的 for 屬性來匹配元素的 id

基本的表單格式

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>

 

 

導航欄和工具欄

jQuery Mobile 導航欄

使用 data-role="navbar" 屬性來定義導航欄

導航欄由一組水平排列的連接構成,一般位於頁眉或頁腳內部。默認地,導航欄中的連接會自動轉換爲按鈕(無需 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>

 

 

jQuery Mobile 工具欄

在頁眉中設置標題欄

頁眉一般會包含頁眉標題/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>

 

定位頁眉和頁腳

  • Inline - 默認.頁眉和頁腳與頁面內容位於行內。
  • Fixed - 單擊隱刺頁腳. 
  • Fullscreen - 與Fiex類似,可是單擊後同時隱藏頁眉,頁腳. 
1 <div data-role="header" data-position="fixed" data-fullscreen="true"></div>
2 <div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

 

 

佈局

Jquery Mobile常見的佈局

固定佈局(Fixed Layout)

使用固定寬度的包裹層(Wrapper), 內部的各個部分可使用百分比或者固定的寬度來表示. 這裏最重要的是, 外面的所謂包裹層(或稱爲容器)的寬度是固定不變的, 因此不論訪問者的瀏覽器是什麼分辨率, 他們看到的網頁寬度都彼此相同

 

 

什麼是流式佈局(Fluid Layout)

流式佈局(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>
相關文章
相關標籤/搜索