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