全棧工程師 09 筆記（jquery mobile）

weixin_34194087發表於2016-08-17
全棧工程師筆記jQuery

jQuery Mobile 前端框架

  1. jQuery Mobile 是建立移動 web 應用程式的框架。
  1. jQuery Mobile 適用於所有流行的智慧手機和平板電腦。
  2. jQuery Mobile 使用 HTML5 和 CSS3 通過儘可能少的指令碼對頁面進行佈局。
    jQueryMobile 官網 http://jquerymobile.com/
    jQueryMobile 幫助 http://api.jquerymobile.com/
    w3school http://www.w3school.com.cn/jquerymobile/index.asp
    jQuery 官網 http://jquery.com/

jQuery Mobile 安裝

  1. 建立一個靜態頁面檔案
    touch index.html

  2. head頭部引入

    從 CDN 中載入 jQuery Mobile 百度CDN：

    <!-- 網上載入 -->
<head>
  <!-- 引入 jQuery Mobile 樣式 -->
  <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <!-- 引入 jQuery 庫 -->
  <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <!-- 引入 jQuery Mobile 庫 -->
  <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

下載 jQuery Mobile
將 jQuery Mobile 放於你的主機中,可以從 jQuerymobile.com下載該檔案。

    <head>  
    <link rel="stylesheet" href="jquery.mobile-1.4.5.css">
    <script src="jquery.js"></script> 
    <script src="jquery.mobile-1.4.5.js"></script> 
   </head>

設定螢幕寬度(兩種)

    1. <!-- meta使用viewport以確保頁面可自由縮放 -->
     <meta name="viewport" content="width=device-width, initial-scale=1">
    2. <!-- 設定螢幕密度為高頻，中頻，低頻自動縮放，禁止使用者手動調整縮放 -->
     <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

div data-role屬性：

data-role="page" 是在瀏覽器中顯示的頁面。
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
"ui-content" 類用於在頁面新增內邊距和外邊距。
data-role="footer" 用於建立頁面底部工具條。
提示：在這些容器中你可以新增任何 HTML 元素 - 段落, 圖片, 標題, 列表等。

在 jQuery Mobile 中新增頁面

在 jQuery Mobile，您可以在單一 HTML 檔案中建立多個頁面。 請通過唯一的 id 來分隔每張頁面，並使用 href 屬性來連線彼此在 jQuery Mobile，您可以在單一 HTML 檔案中建立多個頁面。 請通過唯一的 id 來分隔每張頁面，並使用 href 屬性來連線彼此

例子：

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">    
      <a href="#pagetwo">跳轉到第二個頁面</a> 
  </div>
</div>
<div data-role="page" id="pagetwo">  
  <div data-role="main" class="ui-content">    
     <a href="#pageone">跳轉到第一個頁面</a> 
  </div>
</div>

為 jQuery Mobile 按鈕

在 jQuery Mobile 中，按鈕可通過三種方式建立：
使用 <button> 元素
使用 <input> 元素
使用帶有 data-role="button" 的 <a> 元素

  1. 普通按鈕：data-role="button"
    <a href="#" data-role="button">按鈕</a>
    <a href="#pagetwo" data-role="button">轉到頁面二</a>

  2. 行內按鈕：
    如果需要按鈕適應其內容，或者如果需要兩個或多個按鈕並排顯示，請新增 data-inline="true"
    <a href="#pagetwo" data-role="button" data-inline="true">轉到頁面二</a>

  3. 組合按鈕：

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

  4. 後退按鈕：
    <a href="#" data-role="button" data-rel="back">返回</a>

  5. 更多用於按鈕的 data-* 屬性：值都是 true/false
    data-corners 規定按鈕是否有圓角
    data-mini 規定是否是小型按鈕
    data-shadow 規定按鈕是否有陰影

jQuery Mobile 頁面切換效果

頁面切換效果可被應用於任何使用 data-transition 屬性的連結或表單提交：

<a href="#anylink" data-transition="slide">切換到第二個頁面</a>
過度 描述
fade 預設。淡入到下一頁
flip 從後向前翻轉到下一頁
flow 丟擲當前頁面，引入下一頁
pop 像彈出視窗那樣轉到下一頁
slide 從右向左滑動到下一頁
slidefade 從右向左滑動並淡入到下一頁
slideup 從下到上滑動到下一頁
slidedown 從上到下滑動到下一頁
turn 轉向下一頁
none 過渡無效果

想要頁面從左向右滑動，而不是從右向左滑動，請使用帶有 "reverse" 值的 data-direction 屬性。在後退按鈕上這是預設的。

<a href="#pagetwo" data-transition="slide" data-direction="reverse">切換</a>

** 頁面底部的導航欄**

<div data-role="footer"> 
  <div data-role="navbar">
     <ul>
       <li><a href="#" data-icon="plus">更多</a></li> 
       <li><a href="#" data-icon="minus">更少</a></li> 
       <li><a href="#" data-icon="delete">刪除</a></li>
       <li><a href="#" data-icon="check">喜愛</a></li>
       <li><a href="#" data-icon="info">資訊</a></li> 
     </ul>
   </div>
</div>

相關文章