【代碼筆記】h5 jquery mobile 筆記

關於h5 jquery mobile經常使用代碼的筆記，入門h5時作的筆記，我就是順手用sublime text來作筆記致使筆記沒啥標註和重點區分的人...之前考試複習也是順手開sublime text來記重點...不過用sublime真的很順手啊...

 

1.判斷瀏覽器是否支持Web Storage
if( window.localStorage ){
    //瀏覽器支持localStorage
    //localStorage:永久性存儲於客戶端，安全性方面，域內安全（在該域內的全部頁面均可以訪問localStorage數據），不一樣瀏覽器數據獨立，不可跨瀏覽器訪問。
}
if( window.sessionStorage ){
    //瀏覽器支持sessionStorage
}

2.localStorage存儲json數據
var jsonData = {
    name:"user name",
    account:"normal",
    level:"1"
}
//存
localStorage.serItem("jsonData",JSON.stringify(jsonData));
//讀
var newData = JSON.parse(localStorage.getItem("jsonData"));

3.在線狀態檢測
var isOnline = window.navigator.onLine();

4.得到當前位置
navigator.geolocation.getCurrentPosition(function(pos){
    //獲取成功
    //...
},function(){
    //獲取失敗
    //...
},options)

5.檢測瀏覽器是否支持dataset
var title = document.getElementById("title");
if(title.dataset){
    //支持
}else{
    //不支持
}

6.在jquery mobile中，是使用自定義屬性驅動頁面的（data-….），好比：
data-role
定義元素在頁面中的角色，該屬性容許定義不一樣的組件元素及頁面視圖：data-role=」page」
data-title
定義jquery mobile視圖頁面標題
data-transition
定義視圖切換的動畫效果
data-rel
定義具備浮動效果的視圖（相似於用對話框的方式打開）
data-theme
指定元素或者組件內主題樣式風格
data-icon
在元素內增長小圖標
data-iconpos
定義小圖標位置
data-inline
指定按鈕根據內容自適應其長度
data-type
定義分組按鈕水平或者垂直方向排布
data-rel
定義具備特定功能的元素，例如data-rel=」back」返回按鈕
data-add-back-btn
指定視圖頁面自動在頁眉左側添加返回按鈕
data-back-btn-text
指定由視圖頁面自動建立的返回按鈕的文本內容，該屬性的使用一般都須要和data-add-back-btn配合
data-position
該屬性是實如今滑動屏幕時工具欄的顯示和隱藏狀態
data-fullscreen
用於指定全屏視圖頁面
data-native-menu
指定下拉選擇功能採用平臺內置的選擇器
data-placeholder
設置下拉選擇功能的佔位符
data-inset
實現內嵌列表功能
data-split-theme
設置列表右側圖標的主題樣式風格
data-filter
開啓列表過濾功能

7.實現多視圖頁面 
(1)用data-role="page"定義頁面
(2)用a標籤跳轉指定id的data-role="page"的頁面
(3)data-title同理

8.將data-transition值更改能夠改變過渡效果，下面是對應效果的值
fade：淡入淡出效果
flip  ：翻頁效果
flow：流效果
pop ：彈窗效果
slide：滑動效果
slidefade：滑動淡出效果
slideup：上滑動效果
slidedown：下滑動效果
turn：翻頁效果
none：無過分動畫
reverse：反向

9.data-role=button可將超連接變成按鈕，除此以外 submit reset button image 的input標籤也可用此方法

10.data-icon 爲減小網絡下載的大小而提供的圖標
data-icon="arrow-l"    左箭頭        
data-icon="arrow-r"    右箭頭        
data-icon="arrow-u"    上箭頭        
data-icon="arrow-d"    下箭頭        
data-icon="plus"    加        
data-icon="minus"    減        
data-icon="delete"    刪除        
data-icon="check"    檢查        
data-icon="home"    首頁        
data-icon="info"    信息        
data-icon="grid"    網格        
data-icon="gear"    齒輪        
data-icon="search"    搜索        
data-icon="back"    後退        
data-icon="forward"    向前        
data-icon="refresh"    刷新        
data-icon="star"    星        
data-icon="alert"    提醒        

默認在button按鈕最左側位置，可經過data-iconpos設置：left,right,top,bottom。notext表示沒有文字只有圖標的按鈕

10.a標籤用data-rel="back" 模擬後退按鈕。或者是在div上加data-add-back-btn="true" data-back-btn-text="返回",這樣會在該div的視圖區域的data-role=header或footer部分增長後退按鈕（文字由data-back-btn-text指定）

11.用戶輕觸/滑動屏幕時，工具欄的自動隱藏和顯示：在data-role="header"||"footer"的標籤加data-position="fixed".

12.全屏模式工具欄的隱藏：在data-role="header"||"footer"的標籤加data-position="fixed"，在頁面視圖div上加data-fullscreen="true"

13.網格佈局
一列（使用ui-grid-solo類）
兩列（使用ui-grid-a類）
三列（使用ui-grid-b類）
四列（使用ui-grid-c類）
五列（使用ui-grid-d類）
對應每一個格用ui-block-a/b/c..  其中ui-block-a還有清除浮動的做用（用於多列多行的狀況） 

14.摺疊塊：data-role="collapsible" 默認開啓狀態，點擊則摺疊起來(建議用在section標籤上)

15.手風琴效果：頁面視圖div設置 data-role="collapsible-set"，裏面包含若干 data-role="collapsible" 的section 

16.jquery mobile的input類型：slider 範圍選擇。可結合select組成開關組件。
<div data-role="fieldcontain">
    <label for="slider">toggle switches</label>
    <select name="slider" id="slider" data-role="slider">
        <option value="off">關閉</option>
        <option value="on">開啓</option>
    </select>
</div>

17.推薦把單選/多選按鈕放在fieldset中，fieldset設置data-role="controlgroup"。

18.單選按鈕可設置水平排列，此時會省略左側圓圈圖標：data-type="horizontal"。多選按鈕與單選按鈕類似。

19.下拉選擇菜單實現彈出層顯示效果：將select放在data-role="controlgroup"的標籤裏面。data-native-menu設置爲false採用jquery-moblie自定義彈出層窗口，不然使用平臺內置選擇器。

20.下拉菜單分組 
<optgroup label="分組名"></optgroup> <!-- 分組不可選擇 -->

21.含有佔位符的下拉菜單
（1）value="" 的option元素 
（2）沒有文本內容的option元素
 (3)帶有data-placeholder的option元素

22.多層嵌入列表 外層ul 加 data-role="listview" li標籤嵌入內層ul做爲嵌入的列表。

23.分割按鈕列表 li中使用兩個a標籤，jquery mobile會將第二個連接變成只有圖標的按鈕。在ul上用data-split-icon設置圖標 data-split-theme設置圖標的主題風格樣式。

24.列表分隔符 在li標籤上使用data-role="list-divider",能夠用data-groupingtheme指定分隔符的主題。

25.ul設置data-filter="true"實現對靜態列表的搜索功能。注意只能搜索靜態內容，若是要搜索後臺傳過來並顯示的數據，要再本身編寫實現邏輯。

26.含有氣泡計數的列表 在li中加 <span class="ui-li-count">count值</span>

27.列表右側文本內容 在li中加<p class="ui-li-aside">文本內容</p>

28.列表項左側的icon圖標 在li中加<img src="icon.png" alt="xxx" class="ui-li-icon">做爲第一個元素。若只是須要在li中加圖片（不是做爲icon）則去掉ui-li-icon就好。

29.內嵌列表 對ul或ol元素定義data-inset="true"

30.jquery mobile 開始運行時，會在document對象觸發mobileinit時間，所以能夠經過重寫此時間配置應用初始屬性。
$(document).bind("mobileinit",function(){
    //jquery mobile初始化代碼
})

31.設置頁面切換的默認效果 $.mobile.defaultPageTransition = "fade"
JqueryMobile提供了6種效果供用戶選擇，分別是slide（滑動），slideup（由下向上滑入），slidedown（由上向下滑入），pop（彈出），fade（漸變），flip（翻轉）

32.加載中的提示文字 $.mobile.loadingMessage = "加載中"

33.加載失敗的提示文字 $.mobile.pageLoadErrorMessage = "加載中"

34.jquery mobile 事件
$('#xxx').live('pagebeforecreate',function(event){
    //pagebeforecreate:框架初始化以前觸發
})
$('#xxx').live('pagecreate',function(event){
    //pageCreate:當視圖或頁面被切換時觸發
})
$("p").on("tap",function(){
  //touch事件 
  //tap:單擊事件
  //taphold:長單擊（時長1s)事件
  //swipeleft:左滑動（>30px）事件
  //swiperight:右滑動（>30px）事件
});
其餘事件 
方向改變事件（部分瀏覽器不支持，慎用）orientationchange
頁面顯示/隱藏事件 
pagebeforeshow 視圖經過動畫效果開始顯示在屏幕以前觸發
pagebeforehide 視圖經過動畫效果開始隱藏在屏幕以前觸發
pageshow 視圖經過動畫效果顯示在屏幕以後觸發
pageshow 視圖經過動畫效果隱藏在屏幕以後觸發

34.元素上綁定數據 
$.mobile.jqmData(element,key,value)//綁定
$.mobile.jqmRemoveData([data])//移除[name]的data屬性
$.mobile.jqmHasData(element)//判斷是否有綁定數據

35.判斷絕對/相對路徑
$.mobile.path.isRelativeUrl("url")//相對
$.mobile.path.isAbsoluteUrl("url")//絕對

36.絕對/相對路徑轉換
$.mobile.path.makePathAbsolute(relPath,absPath)//absPath做爲參考路徑,針對文件路徑
$.mobile.path.makeUrlAbsolute(relUrl,absUrl)//absPath做爲參考路徑，針對url

37.判斷域 $.mobile.path.osSameDomain(path1,path2);//當且僅當協議和域名相同返回true