jquery modile 筆記

標籤：應用程式   平板電腦   移動端開發   mobile   jquery   

    接觸移動端開發很長時間了，今天做下筆記，幾下所學到的，今天的筆記是關於jquery modile滴。

    首先，大家要知道:

    jQuery Mobile 是建立移動 web 應用程式的架構。

    jQuery Mobile 適用於所有流行的智能手機和平板電腦。

    jQuery Mobile 使用 HTML5 和 CSS3 通過儘可能少的指令碼對頁面進行布局。

代碼：

<link rel="stylesheet" href="jquery.mobile-1.4.5.css" />

<script src="jquery-1.10.2.min.js"></script>

<script src="jquery.mobile-1.4.5.js"></script>

這要引入的三個檔案。

由於jq mobile 是依賴於jq的，要先引入jq檔案，否則jquery-1.10.2.min.js會報錯的，jquery.mobile-1.4.5.css也是要引入的，控制樣式。

data-role="page",定義了一個頁面容器，用於構建多頁面設計。

data-role="header",頁首或標題列。

data-role="content",是內容主體的封裝容器。

data-role="footer",頁尾。

data-position=‘fixed‘，可以將頁尾定位在螢幕底部，其實，如果頁面高度沒有螢幕高度高，會定位在頁面底部。

data-transition="",設定頁面轉換效果，值為slide(滑動)，slideup(捲起)，slidedown(向下滑動)，pop(彈出)，fade(淡入淡出)，flip(翻轉)，none(無)。

    頁面到頁面的轉換過程，其實，步驟是這樣的：

1、使用者輕巧按鈕，導航到下一個頁面。

2、架構使用一個Hijax請求載入下一個頁面，然後添加到當前頁面的DOM中，當前頁面其實是和下一個頁面並排放置的，因此準備發生一個平滑轉換。

3、架構轉換到另一個頁面。

4、顯示下一個頁面，轉換完成。

data-role="dialog",彈層。

本文出自 “時光” 部落格，請務必保留此出處http://timeblog.blog.51cto.com/8650972/1586099

jquery modile 筆記