找回密碼
 立即註冊
搜尋
熱門搜尋: 活動 交友 discuz
點閱: 1834|回覆: 0

jquery-mobile學習筆記

[複製連結]

等級:25 - 爐火純青

經驗值:0 / 245

魔法值:13940 / 13940

生命值:5%

升級   100%

  • TA的每日心情
    奮斗
    昨天 14:52
  • 簽到天數: 5627 天

    [LV.Master]伴壇終老

    發表於 2016-6-25 16:22:43 | 顯示全部樓層 |閱讀模式

    馬上註冊,結交更多好友,享用更多功能,讓你輕鬆玩轉社群。

    您需要 登入 才可以下載或檢視,沒有帳號?立即註冊

    ×
    jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 % t& w* o: M2 s
    jQuery Mobile 可以應用於智能手機與平板電腦。 ) }: |2 R+ I0 x* R, s
    jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。! o1 |3 G" v# o* @0 l; d( R
    1 g, y& X. [, N. R/ ^. l
    什麼是 jQuery Mobile?
    6 q% o. r' Z7 b* r, E  g2 u. @& t% I# H# e* V. h# a4 q$ R5 ?3 D' j" O0 ~' A
    jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 % d3 e! [9 s1 W

    4 D$ l% f: c. F! e( s# ^jQuery Mobile 工作與所有主流的智能手機和平板電腦上: + E. O; h* V" |1 l4 o( p

    : N, j7 s- k- ^8 UjQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上,如果您瞭解 jQuery,您可以很容易的學習 jQuery Mobile。
    / g; h/ ~; @! o% d4 rjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和  AJAX 腳本代碼來完成頁面的佈局渲染。
    5 Y; B' q9 K3 R
    4 t$ }+ s) S0 {為什麼使用 jQuery Mobile?( Y  d5 d7 Q0 ?* w  u% D
    ' k# O4 S2 K, ], G) H
    通過使用jQuery Mobile 可以 "寫更少的代碼,做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁,且兼容所有移動設備。
      c+ `% q7 F$ w% b0 L3 x8 `& q! \lamp 不同設備使用了不同開發語言,jQuery Mobile可以很好的兼容不容的設備或操作系統:8 f; B( D2 D4 b/ ~' `0 `2 C& Q" [
    9 M! K% x  K5 O+ t. L
        Android 和 Blackberry(黑莓) 使用JAVA語言。
    + n' z  J9 s8 T: {4 _5 m: N( a3 p    iOS 使用 Objective C 語言
    " W9 a8 }. {1 d' b( m    Windows Phone 使用 C# 和 .net, 等。
    4 ^1 g2 G( ~) J
    ' k  w$ B. T, EjQuery Mobile 解決了不同設備兼容的問題,因為它只使用HTML,CSS和 JavaScript,這是所有移動網絡瀏覽器的標準!% q8 u& l) y) v7 j+ F
      ~" l3 E; B. R) a5 Z% k
    jQuery Mobile 安裝
    * P8 {: Y2 D& w6 |4 |/ X# H在你的網頁中增加 jQuery Mobile* B6 _% D, L, e  H  w( T. [! n
    0 z1 \4 R$ n- x( q! ~' Q
    你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中:
    + a' c# J1 N$ k: R2 M
    0 Q) Z0 G  w  y2 y    從 CDN 中加載 jQuery Mobile (推薦)
    8 I. R5 `6 w, F    從jQuerymobile.com 下載 jQuery Mobile庫3 F- v0 x7 t& r1 ^8 d- G

    # P, _6 |6 p% M' Q5 x下載 jQuery Mobile
    6 t8 M% ^" R$ T& y- s2 O5 s2 W1 N6 }5 _" g- N
    如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。& y1 a9 J# K5 Y! T" ?6 ?' T
    6 b/ V4 z3 ]+ }9 e! V
    <head>
    * q4 O+ a2 L' Z/ u, p9 u  x( Y. R$ a" k<meta name="viewport" content="width=device-width, initial-scale=1">
    ( e  u/ v, F; |4 G9 n<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
    0 C3 L  P  e# S- v<script src="jquery.js"></script>
    ; w; X1 P# d9 P. v7 v( ~) g' Y<script src="jquery.mobile-1.4.5.js"></script>
    ) a" |" A  o! N2 t8 l</head>
    2 U! P! p3 e0 q% u, F$ ?! C: Y% T* ]' Y8 Z+ `
    提示: 將下載的檔案放置於與網頁同一目錄下。: T- l& Y% e) b5 ?; i* H3 t
    lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?: i. p: W& z; f+ P$ j1 }; m. N

    " i: e/ ^5 }" s! s* `4 n在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言!- W7 n& @) O4 ?0 U, k+ y
      J( ^+ z$ u# g3 [+ C' _/ n* k
    jQuery Mobile 頁面
    + Z$ _$ h6 U2 O+ t" P開始學習 jQuery Mobile$ |* g+ B; L# Y
    實例6 T- K7 F9 @8 {* e. ~% k
    <body>9 w, t* W- w6 ?- y
    <div data-role="page">6 c& t7 ^' c. Y* f: `
    ! ?/ ~5 m( |* \" w  t) M& O
      <div data-role="header">
    0 P& |* ~! G& X% O9 f, L( \( d    <h1>歡迎來到我的主頁</h1>
    . Z5 h/ a- s9 \9 H  </div>
    2 [5 I. v% f0 x. [0 E
    % T6 t: q0 }+ t! `$ L3 m  <div data-role="main" class="ui-content">
    5 p' J6 E; m" n/ q! F% _5 o    <p>我現在是一個移動端開發者!!</p>3 U1 _/ g1 A5 X4 S& k$ Y8 Z
      </div>
    6 b4 l4 I  {( T0 |7 b2 }0 e' k( ~- c$ c1 u$ L9 \7 }( a7 |
      <div data-role="footer">2 X! P* c% N% N( g! J& T/ P. Z4 G
        <h1>底部文字</h1>
    2 G/ N% q5 ~% |5 m9 P' o  </div>/ @5 `- Q0 p* F) H. n, K
    ) _$ K7 s0 \# B- V
    </div>
    5 C0 U1 _8 m9 L% d</body>& [; L# `, Q$ \
    實例解析:
    ' }2 ?* U" ^3 U. A( V- e6 R' a/ y/ m
        data-role="page" 是在瀏覽器中顯示的頁面。
    : V# V; w$ g7 w( _6 f    data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)% \4 f* |& t3 n# c
        data-role="main" 定義了頁面的內容,比如文字, 圖片,表單,按鈕等。
    , v7 V5 j4 c1 P    "ui-content" 類用於在頁面增加內邊距和外邊距。" G4 H7 B+ n* m$ _5 L: ]
        data-role="footer" 用於建立頁面底部工具條。; m7 ]5 n  z" l4 S( R
        在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。' r! J( j) R: c( ^% w

    % y" o! a/ `! v5 {1 D# ]) nlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。1 ?; T# D9 N' c# k* e
    3 M3 Y5 V. i/ c; \% n8 V- d
    在頁面中增加 jQuery Mobile
    9 {; ?1 O% ~! z+ [8 r" Y! m" v+ Z1 Q, L. W4 t
    使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。# {; B- y/ A8 s9 y6 C! W$ i
    0 h1 d% T6 r3 X& d
    你可以使用不同的href屬性來區分使用同一個唯一id的頁面:, n/ ~' y$ s) {0 {- W% w
    實例9 G+ Q0 K/ G2 A# e& v
    <div data-role="page" id="pageone">7 P# [8 b* k3 K
      <div data-role="main" class="ui-content">
    ; b* q  ?/ N8 s* I5 t7 r% \! O    <a href="#pagetwo">跳轉到第二個頁面</a>
    7 j5 @5 z0 Z2 W, G% ~$ D3 S7 x  </div>$ e2 P5 I1 r5 M- c2 u) U
    </div>
    * R$ Y+ ~1 W) p& x) t
      Q; |# s, y; |) x<div data-role="page" id="pagetwo">
    ) Q  J) H- X0 A& p  <div data-role="main" class="ui-content">
    7 H. W1 u6 K  Q  j# X7 \6 M( V    <a href="#pageone">跳轉到第一個頁面</a>
    & j8 S5 ~; F# H8 g0 o4 n: V- \7 O  </div>1 Z0 }2 F( C+ C" y% W! S. w# ^
    </div>5 I$ J, A9 t  g- Q) j" j! I
    注意: 當web應用有大量的內容(文字,圖片,腳本等)將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案:
    3 @. I; g: o' N$ W9 I( G. ]- {1 `" k( `
    <a href="externalfile.html">訪問外部檔案</a>% ~- ^! A4 Y2 K$ `
    & A/ G+ o& S* J. \7 b
    頁面作為對話框使用# n, m- s+ u% C+ o  @" |

    9 j6 ]& f) _7 `3 n對話框是用於顯示頁面內容顯示或者表單內容的輸入。; W) A& O' ^0 B

    " S6 u* X' n/ J8 {+ ?" ~在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:* G, o* I- T, Q$ p( M
    實例
    & y: E/ Q1 M1 A2 P5 U<div data-role="page" id="pageone">. ~( ^9 B$ [# K0 [
      <div data-role="main" class="ui-content">
    # Y* X3 B3 Z# t' M+ d) r- F    <a href="#pagetwo">跳轉到第二個頁面</a>
    7 k4 C/ N- b4 P* W  </div>
    ! A- H4 A1 h& A8 R! L& q</div>
    ! K/ c9 m1 c* g! Z" v- Z# o
    & a+ a6 p( w$ C: C2 K( Q<div data-role="page" data-dialog="true" id="pagetwo">
    0 @: V/ x; s, R: S/ w" R  <div data-role="main" class="ui-content">
    8 H4 D* W. _2 \    <a href="#pageone">跳轉到第一個頁面</a>) I' x& f! \: H: w: i- `& f
      </div>
    ' ^0 b) n' x; d* ^' ^" d, F. K</div>

    文章的最近訪客

    您需要登入後才可以回覆文章 登入 | 立即註冊

    本版積分規則

    QQ|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)

    GMT+8, 2025-6-16 07:18 , Processed in 0.013207 second(s), 7 queries , Gzip On, Redis On.

    Powered by Discuz! X3.5

    © 2001-2025 Discuz! Team.

    快速回覆 返回頂端 返回列表