Mobile

jQuery Mobile的基本使用方法和簡單的知識點

　安裝:  <link rel="stylesheet" href="下載到本地的文件目錄.min.css" media="screen" title="no title">這個是jQuery Mobile庫，下載網址:jquerymobile.com

 　　 　  <script src="./js/jquery-1.12.4.min.js"></script>這個是jQuery的庫，下載網址:jquery.com/download

　　　    <script src="./js/jquery.mobile-1.4.5.min.js"></script>這個是jQuery Mobile庫，下載網址:jquerymobile.com

　Demo:須要引入meta, 爲了使咱們的網站適應移動設備屏幕尺寸. 並設置不要讓頁面縮放, 讓他以1:1的比例.

　　　　 <meta name="viewport" content="width=device-width,initial-scale=1">

　　　　在body標籤內寫:

　　　　　　<div data-role='page'>
    　　　　　　  <div data-role="header">……</div>
    　　　　　　  <div role="main">……</div>
    　　　　　　  <div data-role="footer">……</div>
  　　　　　   </div>

　　注意：

　　data-role參數表：

　　　page:頁面容器，其內部的mobile元素將會繼承這個容器上所設置的屬性

　　　header:頁面標題容器，這個容器內部能夠包含文字、返回按鈕、功能按鈕等元素

　　　footer:頁面頁腳容器，這個容器內部也能夠包含文字、返回按鈕、功能按鈕等元素

　　　content:頁面內容容器，這是一個很寬容的容器，內部能夠包含標準的html元素和jQueryMobile元素

　　　controlgroup:將幾個元素設置成一組，通常是幾個相同的元素類型

　　　fieldcontain:區域包裹容器，用增長邊距和分割線的方式將容器內的元素和容器外的元素明顯分隔

　　　navbar:功能導航容器，通俗的講就是工具條

　　　listview:列表展現容器，相似手機中聯繫人列表的展現方式

　　　list-divider:列表展現容器的表頭，用來展現一組列表的標題，內部不可包含連接

　　　button:按鈕，將連接和普通按鈕的樣式設置成爲jQueryMobile的風格

　　　none:阻止框架對元素進行渲染，使元素以html原生的狀態顯示，主要用於form元素。

　顯示頂部和底部:在頂部和底部分別加入下面的屬性, 就能夠讓跟着頁面跑的頂部和底部固定下來.

　　　　data-position="fixed"

 頁，主題及佈局

　　頁面切換：　當咱們頁面進行跳轉的時候, 須要加上動畫效果, 下面就會jQeruy mobile提交的效果.

　　 data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none

　　這裏面fade表明的是淡入淡出；filp是翻轉的意思；pop是從中心漸顯展開；slide是從右側向左滑入頁面；slideup是從底部向上滑入；slidedown是從上向下滑入；

　　對話框：若是須要使用對話框屬性, 可能在連接中增長下面屬性就能將頁面變成對話框.

　　　　　　data-rel="dialog"

　　button按鈕的添加：使用data-role=「button」,或者利用函數：$(選擇器).button();

　　　　　　參考代碼：(三種方法)

　　　　　　　<button type="button" name="button">按鈕</button>

　　　　　　    <input type="button" value="按鈕">

　　　　　　　 <a href="連接地址" data-role="button">按鈕</a>

　　　　　　有時候，你想把一組按鈕放進一個單獨的容器內，使他們看起來想一個獨立的導航部件。你能夠把一組按鈕包裹在一個容器內,而後給該容器添加 data-role=「controlgroup」 屬性.

　　　　　　　 <div data-role="controlgroup">

　　　　　　　　　<a href="連接地址" data-role="button">Yes</a>

　　　　　　　　　<a href="連接地址" data-role="button">No</a>

　　　　　　　　　<a href="連接地址" data-role="button">Maybe</a>

　　　　　　　  </div>

　　　　　　　默認狀況下，組按鈕表現爲垂直列表，若是給容器添加 data-type=「horizontal」 的屬性，則能夠轉換爲水平按鈕的列表，按鈕會橫向一個挨着一個地水平排列，並設置只有足夠大以適應內容的寬度.

　　　　　　　<div data-role="controlgroup" data-type="horizontal">

　　　　　　　　　<a href="連接地址" data-role="button">Yes</a>

　　　　　　　　　<a href="連接地址" data-role="button">No</a>

　　　　　　　　　<a href="連接地址" data-role="button">Maybe</a>

　　　　　　　  </div>