上海緣震網(wǎng)絡(luò)有限公司在前面的文章中我們上海網(wǎng)頁設(shè)計就提到,jQuery Mobile是采用HTML5標(biāo)準(zhǔn)的data屬性來驅(qū)動元素生成各種界面組件的。實際上,jQuery Mobile不僅提供上述這些方面的功能,還在JavaScript可編程方面提供更多的可配置、可定制的參數(shù)和方法。
同樣,作為基于jQuery的jQuery Mobile移動框架,它也提供了一個類似的事件。當(dāng)jQuery Mobile開始運行時,它會在document對象上觸發(fā)一個mobileinit事件。我們可以通過該事件重寫默認(rèn)的相應(yīng)函數(shù),配置各種屬性參數(shù)。
使用方法如下:
$(document).bind("mobileinit",function(){
//在這里添加用戶自定義的代碼
});
由于mobileinit事件在運行jQuery Mobile的時候會立即觸發(fā),因此如果我們需要編寫自定義事件就必須在mobileinit事件之前進行。因此自定義事件的JavaScript文件的導(dǎo)入位置,就必須在jQuery類庫文件之后,jQuery Mobile類庫文件之前。
例如:
<script src="jquery.js"></script>
<script src="自定義事件處理函數(shù)js文件.js"><script>
<script src="jquerymobile.js></script>
jQuery Mobile為開發(fā)者提供了一個對象:$.mobile。該對象的作用是配置各種選項及其默認(rèn)值。
例如:
$(document).bind("mobileinit",function(){
$.mobile.foo = "foo";
});
除了上述通過$.mobile.foo 的點語法對某個屬性值進行初始化以外,還可以使用jQuery自帶的方法$.extend通過繼承方式對屬性值進行初始化。
$(document).bind("mobileinit",function(){
$.extend($.mobile,{
foo:"foo"
});
});
jQuery Mobile提供了非常多的可配置選項。
1.ns
類型:字符串,默認(rèn)值是空字符串。
用法:$.mobile.ns = "mynamespace"
描述:自定義命名空間,避免命名空間沖突。使用方法是通過指定data-屬性來自定義命名空間。當(dāng)指定了ns值時,data屬性所對應(yīng)的自定義命名空間屬性名就是data-mynamespace-foo。通常情況下,當(dāng)開發(fā)者需要開發(fā)一套自定義主題樣式時才需要使用該選項。
2.autolnitializePage
類型:布爾值,默認(rèn)值是true。
用法:$.mobile.autoInitializePage = false
描述:默認(rèn)情況下,當(dāng)頁面DOM元素準(zhǔn)備就緒后,程序會自動加載autolnitializePage函數(shù)。如果autolnitializePage選項被設(shè)置為false,頁面就不會被立即渲染,并保持隱藏狀態(tài),一直到人工調(diào)用$.mobile.initializePage 函數(shù)后才會渲染各種頁面和視圖組件。
initializePage函數(shù)是jQuery Mobile框架的內(nèi)部初始化函數(shù),該函數(shù)的主要功能是在DOM元素中查找和增強頁面中的各個視圖,并指定默認(rèn)顯示的第一個視圖。
3.subPageUrlKey
類型:字符串,默認(rèn)值是ui-page。
用法:$.mobile.autoInisubPageUrlKey = "page"
描述:該參數(shù)的主要功能是改變jQuery Mobile視圖在URL地址中的key參數(shù)名,STRONG>上海網(wǎng)站設(shè)計舉例:example.html?ui-page=subpage。當(dāng)選項參數(shù)改成subPageUrlKey-"page"時,其url地址會被改為example.html?page=subpage。
當(dāng)ui-page的值是一個URL地址時,jQuery Mobile框架會發(fā)送一個Ajax請求,并返回顯示該URL頁面。
4.activePageClass
類型:字符串,默認(rèn)值是ui-page-active。
用法:$.mobile.activePageClass = "ui-ns-page-active"
描述:該選項參數(shù)參數(shù)的主要功能是自定義活動狀態(tài)頁面和過渡狀態(tài)時的視圖CSS樣式。
5.activeBtnClass
類型:字符串,默認(rèn)值是ui-btn-active。
用法:$.mobile.activeBtnClass = "ui-ns-page-active"
描述:該選項參數(shù)的主要功能是自定義處于活動狀態(tài)的按鈕的樣式風(fēng)格。
6.ajaxEnabled
類型:布爾值,默認(rèn)值是true。
用法:$.mobile.ajaxEnabled = false
描述:該選項參數(shù)的作用是設(shè)置當(dāng)單擊鏈接或提交表單或按鈕時,是否使用Ajax方式加載頁面或提交數(shù)據(jù)。默認(rèn)情況下,jQuery Mobile采用Ajax請求,而采用傳統(tǒng)的HTTP方式請求跳轉(zhuǎn)或提交方式。
7.hashListeningEnabled
類型:布爾值,默認(rèn)值是true。
用法:$.mobile.hashListeningEnabled = false
描述:設(shè)置jQuery Mobile是否自動監(jiān)聽和處理location.hash的變化,如果設(shè)置為false,可以使用手動的方式處理hash的變化,或者簡單的使用鏈接地址進行跳轉(zhuǎn)。
8.defaultPageTransition
類型:布爾值,默認(rèn)值是true。
用法:$.mobile.defaultPageTransition = "fade"
描述:該選項菜熟的作用是設(shè)置頁面切換默認(rèn)的效果。如果設(shè)置none,頁面切換時將不會有效果。可選的切換效果包括:slide(左右劃入)、slideup(由下向上滑入)、slidedown(由上向下滑入)、pop(由中心展開)、fade(漸顯)、flip(翻轉(zhuǎn))。
9.touchOverflowEnabled
類型:布爾值,默認(rèn)值是false。
用法:$.mobile.touchOverflowEnabled = true
描述:是否使用設(shè)備的原生區(qū)域滾動特性。目前除iOS5外,大部分設(shè)備還不支持原生的區(qū)域滾動特性。
10.defaultDialogTransition
類型:字符串,默認(rèn)值是pop。
用法:$.mobile.defaultDialogTransition = "none"
描述:該選項設(shè)置Ajax對話框的彈出效果,若設(shè)置為none,則沒有過渡效果。其可選的效果和defaultPageTransition屬性相同。
11.minScrollBack
類型:字符串,默認(rèn)值為150。
用法:$.mobile.minScrollBack = "200"
描述:當(dāng)滾動超出所設(shè)置的高度時才會出發(fā)滾動位置記憶功能。當(dāng)滾動高度沒有超過所設(shè)置的高度時,后腿到該頁面滾動條會到達(dá)的頂部。通過設(shè)置該選項的數(shù)值來減小位置記憶的數(shù)據(jù)量。
12.loadingMessage
類型:字符串,默認(rèn)值是loading。
用法:$.mobile.loadingMessage = "加載中"
描述:設(shè)置頁面加載狀態(tài)的文本內(nèi)容。如果設(shè)置為false,則不會顯示任何內(nèi)容。
13.pageLoadErrorMessage
類型:字符串,默認(rèn)值是Error Loading Page。
用法:$.mobile.pageLoadErrorMessage = "頁面加載失敗"
描述:設(shè)置當(dāng)Ajax請求頁面失敗時顯示的提示文本內(nèi)容。
14.gradeA
類型:布爾值,默認(rèn)值是$.support.mediaquery的值。
用法:$.mobile.gradeA
描述:當(dāng)瀏覽器復(fù)合所有支持的條件時才會返回true。默認(rèn)返回$support.mediaquery的值。
上面介紹了jQuery Mobile 1.0bata3版本中提供個可配置參數(shù)選項,由于該版本仍然是一個beta版本,因此上海網(wǎng)頁設(shè)計認(rèn)為這類配置參數(shù)可能會隨著后續(xù)版本的更新而發(fā)生變化,例如有可能在下一個版本中發(fā)現(xiàn)某些配置選項已經(jīng)被拋棄或者會新增更多的配置選項等。