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

jquery-mobile學習筆記

[複製連結]

等級:25 - 爐火純青

經驗值:0 / 245

魔法值:13942 / 13942

生命值:5%

升級   100%

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

    [LV.Master]伴壇終老

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

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

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

    ×
    jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
    $ M: `* V0 {. p1 SjQuery Mobile 可以應用於智能手機與平板電腦。 - m& a4 _3 K* J) P
    jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。9 T: M/ \' n- @; u* H/ k; e; w! L

    ! `7 D" ]$ b2 V, S什麼是 jQuery Mobile?
    ( ~4 b" D2 d. _& D  |  A
    ! X' j% w$ f  @2 `  kjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
    3 j8 |/ Z; H% V: ~/ z* P) z& d* ~( ]1 m$ e' M- }8 a; H& N) b0 b
    jQuery Mobile 工作與所有主流的智能手機和平板電腦上: 6 A8 N0 @8 s# W( R* O

    % C: C7 U; K% I' u& N2 ojQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上,如果您瞭解 jQuery,您可以很容易的學習 jQuery Mobile。
    2 @" A* X( G; L7 `jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和  AJAX 腳本代碼來完成頁面的佈局渲染。, x* w& o0 `- C/ i
    & M% N& t: _( R  a
    為什麼使用 jQuery Mobile?
    0 r3 m' P0 P  J7 _5 ~- h. ]  ^- `% x: }
    通過使用jQuery Mobile 可以 "寫更少的代碼,做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁,且兼容所有移動設備。  e2 |# _3 l8 }4 j- ]  v
    lamp 不同設備使用了不同開發語言,jQuery Mobile可以很好的兼容不容的設備或操作系統:$ J' P# a, u: P0 X

    # _% X: k2 P6 d1 P" O    Android 和 Blackberry(黑莓) 使用JAVA語言。8 ^& p7 c$ x- A: E9 ~
        iOS 使用 Objective C 語言
    ) c2 r- A9 V. r    Windows Phone 使用 C# 和 .net, 等。3 ^7 d) @) z9 a1 G& V: `+ ^
    4 N, v- e+ t/ F2 `9 E. M/ \
    jQuery Mobile 解決了不同設備兼容的問題,因為它只使用HTML,CSS和 JavaScript,這是所有移動網絡瀏覽器的標準!9 A! R; N; g/ Q: H8 ]1 ]

    3 N: k, ^' }% Q& W" @4 tjQuery Mobile 安裝
      ^' W7 z' I# z& D; Q1 H在你的網頁中增加 jQuery Mobile6 c' S, k6 F" ^6 r" ~9 H8 ^7 B

    ' g: n* \8 n* m4 z$ g8 X6 [. I你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中:
    : W) _$ l4 s2 E( ~7 P$ O/ M+ f0 n$ J7 J  }# N& m9 Z+ z* s2 D" t" r
        從 CDN 中加載 jQuery Mobile (推薦)
    9 B- d& t9 Y. Y8 `% j; w$ a    從jQuerymobile.com 下載 jQuery Mobile庫
    ' i" A/ U. x$ Z  k, t2 o5 x4 [' m* x9 {' K  t
    下載 jQuery Mobile1 m2 Z; R5 y7 i; `* R8 a; w. ~

    . M0 K. I" \3 N4 ?# Z! t如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。! R3 P3 J, s2 i* d) d
    ( [2 E( b/ |# o! z
    <head>+ |3 Q' p- a$ h: [: R, {
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ! |/ i% ?/ q( L# g! a% H<link rel="stylesheet" href="jquery.mobile-1.4.5.css">( @; m6 {# g/ H* `, t
    <script src="jquery.js"></script>
    $ s2 A% {4 J0 [9 ]$ `* G<script src="jquery.mobile-1.4.5.js"></script>
    9 o4 x6 f( ~  y+ u$ ?$ X; Q8 E</head>1 [  W( y8 A# H  ~
    2 G& j' D1 R' P! e6 n+ w; r, [
    提示: 將下載的檔案放置於與網頁同一目錄下。
    # w# C7 y) ~5 rlamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?3 U+ z: H3 }* j6 F# L8 K. u+ ?( V9 J
    3 r# f% G, D, U7 V& ]
    在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言!
    3 c, K+ e2 [/ S% a! }. w. \/ d: o( q, B8 D" n' I9 f
    jQuery Mobile 頁面
    . {, s& s& n' K! y開始學習 jQuery Mobile4 b& s+ u  t8 x6 l, v
    實例
    8 G( w4 m9 ?; C. {% a' n( j6 f<body>+ r2 {; m! Y0 s5 f# W
    <div data-role="page">2 u( L9 }; ]  X! \: o6 ~; ?

    1 r2 e5 V# U4 e1 \$ J4 B  I+ _' @  <div data-role="header">
    ) u6 o* ]5 P( a( ?2 L/ K    <h1>歡迎來到我的主頁</h1>" N- p( B, j, l5 l9 w
      </div>
    , F, I0 W1 S: W. ~
    4 z5 s0 [( W( {8 N/ j9 T5 P6 a  <div data-role="main" class="ui-content">& [% l8 Q; Q& U9 O; v1 y3 W$ I9 @2 p
        <p>我現在是一個移動端開發者!!</p>
    % ^3 w) D: m5 p/ f$ y1 ]  </div>
    1 _" Y; _! @& j4 f) x, c$ O
    ! i" `8 Z, Y, c$ B' |  <div data-role="footer">
    * R/ p5 H6 Z: `* T    <h1>底部文字</h1># z  k+ k% Q8 k0 f+ X
      </div>
    4 u0 z! x2 y; Q3 o/ p- A3 t$ }4 f) p% s( J
    </div># B. L6 t4 F* [7 y1 v9 [" U( g$ {6 e
    </body>
    2 ^- \# Z" P* x" _- d2 }* w  Z實例解析:, C& m7 }* E3 T
    ) W$ P5 @. Q6 D4 N  E9 L
        data-role="page" 是在瀏覽器中顯示的頁面。
    3 }2 J- c% }- e6 I& H0 F" w    data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)/ @% v/ s0 l: s* U
        data-role="main" 定義了頁面的內容,比如文字, 圖片,表單,按鈕等。
    " {7 f# @) r" a7 q3 x' M- c    "ui-content" 類用於在頁面增加內邊距和外邊距。
    0 s2 w& i2 n) I$ B    data-role="footer" 用於建立頁面底部工具條。% o5 R9 y# ]) Q' W0 F
        在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。2 {" l( J9 N: N7 U
    6 w( E8 K- T5 K- m0 F: g
    lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
    * A( G! A. X/ [0 n
    . Y3 }. H$ C6 @! ]" G7 O6 Y2 {在頁面中增加 jQuery Mobile) A) A& z! m5 j. [7 `* x" D" H1 h

      r& h* N) h: E8 ~  Y+ I使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。" S$ [: [/ e- _8 h: O( ~0 h! Z7 x7 i" q
    2 V4 a: F, g& I6 o
    你可以使用不同的href屬性來區分使用同一個唯一id的頁面:
    + W  u: H  g! r- u實例
    , N; W  I/ }6 R  \4 `* K<div data-role="page" id="pageone">9 A# Z( ^$ U+ J4 ?8 `7 M# ~
      <div data-role="main" class="ui-content">
    & a# @9 a% W: L7 l6 j7 z% f    <a href="#pagetwo">跳轉到第二個頁面</a>
    8 j3 a1 ]& Y2 Z8 [  x  </div>, Z& j/ B# I9 c' {/ |6 b% T+ J+ O
    </div>. z' u$ Y2 x# _/ _5 G+ U, O

    # x7 O/ p( t$ N<div data-role="page" id="pagetwo">6 K. M, b, i5 c9 ^7 S8 \9 j: p
      <div data-role="main" class="ui-content">
    $ D, Z9 C8 k, n: a' x0 X/ ]7 t    <a href="#pageone">跳轉到第一個頁面</a>* G8 D! h1 r4 u2 F6 R' H, e& U0 h
      </div>; m) ^8 M& q0 I* Q
    </div>8 [; t7 O8 W! e/ p: @3 Z* U
    注意: 當web應用有大量的內容(文字,圖片,腳本等)將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案:# t: H" n$ n. i9 r! l

    ! ?* A# y; ]$ ?1 _6 d5 ^<a href="externalfile.html">訪問外部檔案</a>
    7 y; J  _! u: i% J6 q. F# n/ W  I4 F/ E; N. _4 {, k) g( X1 f
    頁面作為對話框使用
    1 x/ {5 r) {# G1 o9 H3 u
    ! b2 H- G) n8 C9 T6 A5 H' i對話框是用於顯示頁面內容顯示或者表單內容的輸入。+ m+ X" Y# N3 p4 o5 A
    & u% ]& d2 v2 k
    在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:  C* E5 m+ q8 }, c' V& b7 C6 k9 b
    實例" k. i. @& }- h' U1 j; V: b
    <div data-role="page" id="pageone">/ W: x: u" p, }/ D0 [4 D' M, O! J
      <div data-role="main" class="ui-content">9 ~, J, t# M  W. G) L$ `
        <a href="#pagetwo">跳轉到第二個頁面</a>7 u3 ?) B, h' u8 r* M/ {
      </div>
    ( x. p! q2 b8 f$ P$ ]1 M: h+ a- z</div>/ c  ]8 Z( ]. e' O0 K

    - j1 v( r. b% \<div data-role="page" data-dialog="true" id="pagetwo">
    3 l. a& s" Z% f: G  <div data-role="main" class="ui-content">* }1 b8 p. J7 W7 i
        <a href="#pageone">跳轉到第一個頁面</a>
    7 L' }2 v% i6 _2 x" {2 [  </div>
    1 C. `- M) k5 g" Y5 ?3 G</div>

    文章的最近訪客

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

    本版積分規則

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

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

    Powered by Discuz! X3.5

    © 2001-2025 Discuz! Team.

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