jQM中文手冊：jQuery Mobile Ajax開發(fā)
有些時候因為項目的需要我們還是需要對這些參數(shù)進(jìn)行自定義的。在學(xué)習(xí)jM的初始化參數(shù)之前，我們需要先來了解mobileinit事件。
Mobileinit事件
jQuery Mobile的加載事件和普通的jQuery插件有所不同，它會在document.ready事件之前執(zhí)行。因此我們在需要對jQuery Mobile的默認(rèn)運行參數(shù)進(jìn)行調(diào)整的時候就需要在document.ready事件之前來對這些參數(shù)進(jìn)行設(shè)置，jM為我們提供了mobileinit事件來處理加載之前需要執(zhí)行的代碼。
例如：
- $(document).bind("mobileinit", function(){
- //apply overrides her
- });
初始化配置項的兩種方法
方法一：通過jQuery的$.extend方法來設(shè)置多個配置項
- $(document).bind("mobileinit", function(){
- $.extend( $.mobile , {
- foo: bar
- });
- });
方法二：獨立設(shè)置每個配置項
- $(document).bind("mobileinit", function(){
- $.mobile.foo = bar;
- });
初始化配置項
以下是可以通過$.mobile對象來初始化的配置項：
activeBtnClass (string, default: "ui-page-active"):
設(shè)置按鈕處于激活狀態(tài)時的CSS樣式。
字符串類型，在默認(rèn)狀態(tài)下參數(shù)是引用樣式表中的” ui-page-active "。
覆蓋范圍：Buttons、List views、Select menus等組件的觸發(fā)狀態(tài)。
例如：
- $(document).bind("mobileinit", function(){
- $.mobile.activeBtnClass="ui-btn-hover-a";
- });
將按鈕激活狀態(tài)的樣式定義為樣式” ui-btn-hover-a”
activePageClass (string, default: "ui-page-active"):
設(shè)置當(dāng)前激活狀態(tài)頁面的樣式，一個jM頁面中必將有一個頁面容器是處于激活狀態(tài)的，其它jM頁面容器將會處于隱藏狀態(tài)，
字符串類型，在默認(rèn)狀態(tài)下參數(shù)是引用樣式表中的” ui-page-active”，樣式ui-page-active是用來將頁面設(shè)置為顯示狀態(tài)的樣式。所以在自定義這個樣式到時候必須要在樣式中聲明以下屬性：”display:block !important; overflow:visible !important;” 。（注意：不熟悉jM的CSS框架的朋友經(jīng)常會遇到自定義的樣式不起作用的情況，這一般是由于自定義的樣式和原有CSS框架的繼承關(guān)系不同引起的，可以在不起作用的樣式后面加上!important來提高自定義樣式的優(yōu)先級）
例如：
- $(document).bind("mobileinit", function(){
- $.mobile.activePageClass="ui-page-custom";
- });
將頁面激活狀態(tài)的樣式定義為樣式” ui-page-custom”，” ui-page-custom”中必須定義” display:block !important; overflow:visible !important;”屬性。#p#
ajaxEnabled (boolean, default: true):
同時設(shè)置頁面中的鏈接和表單提交是否使用Ajax方法，也就是說表單的提交和a標(biāo)記中的鏈接，都是采用ajax調(diào)用。
布爾類型，在默認(rèn)狀態(tài)下參數(shù)是true。
例如：
- $(document).bind("mobileinit", function(){
- $.mobile.ajaxEnabled=false;
- });
如果你的項目中沒有用到Ajax，那么建議將這里設(shè)為false
ajaxFormsEnabled (deprecated boolean, default: true):
單獨設(shè)置頁面中的表單提交是否使用Ajax方法。
布爾類型，在默認(rèn)狀態(tài)下參數(shù)是true。
ajaxLinksEnabled (deprecated boolean, default: true):
單獨設(shè)置頁面中的鏈接是否使用Ajax方法。
布爾類型，在默認(rèn)狀態(tài)下參數(shù)是true。
autoInitialize (boolean, default: true):
設(shè)置頁面是否自動初始化，當(dāng)設(shè)置為false時，jQM將推遲對頁面的渲染，方便我們動態(tài)構(gòu)建頁面的Dom元素等異步操作時引發(fā)的頁面渲染失敗問題。
在頁面元素構(gòu)建完成后用$.mobile.initializePage();來開始渲染頁面。
布爾類型，默認(rèn)狀態(tài)下參數(shù)為true。
例如:
- $(document).bind("mobileinit", function(){
- $.mobile.autoInitialize=false; //刪除這行配置參數(shù)就會出現(xiàn)渲染錯誤
- });
- $(function(){
- function newDom(){
- $("div[data-role='content']")
- .append("<a href='web.html' data-role='button'>Link button</a>");
- $.mobile.initializePage();//加載完成后開始渲染頁面
- }
- setTimeout(newDom,500); //延時加載
- });
defaultTransition (string, default: 'slide'):
設(shè)置默認(rèn)的頁面過渡效果，如果不想使用過渡效果就將參數(shù)設(shè)置為”none”。
字符類型，默認(rèn)參數(shù)”slide”。
gradeA (function that returns a boolean, default: a function returning the value of $.support.mediaquery):
用于判斷瀏覽器是否屬于A級瀏覽器。
布爾類型，默認(rèn)$.support.mediaquery用于返回這個布爾值。
loadingMessage (string, default: "loading"):
設(shè)置加載提示框里顯示的文本，如果設(shè)置為false，將不顯示加載提示框。
字符類型，默認(rèn)值”loadind”。
metaViewportContent (string, default: "width=device-width, minimum-scale=1, maximum-scale=1"):
設(shè)置用于頁面的適應(yīng)比例的mata元素，如果設(shè)置為false，將不添加Mata元素。
字符類型，默認(rèn)” width=device-width, minimum-scale=1, maximum-scale=1”。
nonHistorySelectors (string, default: "dialog"):
設(shè)置何種data-rel參數(shù)不會記錄到哈希表。
由于現(xiàn)階段data-rel只有” dialog”參數(shù)，建議不要自定義此項。
subPageUrlKey (string, default: "ui-page"):
用于設(shè)置引用子頁面時哈希表中的標(biāo)識。
字符類型，默認(rèn)” ui-page”。
初始化配置部分結(jié)束
