安裝: <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>