jQuery Mobile 中文手冊 Ajax開發版——初始化部分

初始化

jQM在載入的時候會自動的初始化預設配置項，這樣我們就不需要為了學習和配置這些參數花費很多的時間了，大大的提高了開發效率。

但是有些時候因為項目的需要我們還是需要對這些參數進行自訂的。在學習jQM的初始化參數之前，我們需要先來瞭解mobileinit事件。

Mobileinit事件

jQM的載入事件和普通的jQuery外掛程式有所不同，它會在document.ready事件之前執行。因此我們在需要對jQM的預設運行參數進行調整的時候就需要在document.ready事件之前來對這些參數進行設定，jQM為我們提供了mobileinit事件來處理載入之前需要執行的代碼。

例如：

1. $(document).bind("mobileinit", function(){
2. //apply overrides her
3. });

複製代碼

初始化配置項的兩種方法

方法一：通過jQuery的$.extend方法來設定多個配置項

1. $(document).bind("mobileinit", function(){
2. $.extend( $.mobile , {
3.   foo: bar
4. });
5. });

複製代碼

方法二：獨立設定每個配置項

1. $(document).bind("mobileinit", function(){
2. $.mobile.foo = bar;
3. });

複製代碼

初始化配置項

以下是可以通過$.mobile對象來初始化的配置項：

activeBtnClass (string, default: "ui-page-active"):

設定按鈕處於啟用狀態時的CSS樣式。

字串類型，在預設狀態下參數是引用樣式表中的” ui-page-active "。

覆蓋範圍：Buttons、List views、Select menus等組件的觸發狀態。

例如：

1. $(document).bind("mobileinit", function(){
2.       $.mobile.activeBtnClass="ui-btn-hover-a";
3.    });

複製代碼

將按鈕啟用狀態的樣式定義為樣式” ui-btn-hover-a”

activePageClass (string, default: "ui-page-active"):

設定當前啟用狀態頁面的樣式，一個jQM頁面中必將有一個頁面容器是處於啟用狀態的，其它jQM頁面容器將會處於隱藏狀態。

字串類型，在預設狀態下參數是引用樣式表中的” ui-page-active”，樣式ui-page-active是用來將版面設定為顯示狀態的樣式。所以在自訂這個樣式到時候必須要在樣式中聲明以下屬性：”display:block !important; overflow:visible !important;” 。（注意：不熟悉jQM的CSS架構的朋友經常會遇到自訂的樣式不起作用的情況，這一般是由於自訂的樣式和原有CSS架構的繼承關係不同引起的，可以在不起作用的樣式後面加上!important來提高自訂樣式的優先順序）

例如：

1. $(document).bind("mobileinit", function(){
2.       $.mobile.activePageClass="ui-page-custom";
3.     });

複製代碼

將頁面啟用狀態的樣式定義為樣式” ui-page-custom”，” ui-page-custom”中必須定義” display:block !important; overflow:visible !important;”屬性。

ajaxEnabled (boolean, default: true):

同時設定頁面中的連結和表單提交是否使用Ajax方法，也就是說表單的提交和a標記中的連結，都是採用ajax調用。

布爾類型，在預設狀態下參數是true。

例如：

1. $(document).bind("mobileinit", function(){
2.      $.mobile.ajaxEnabled=false;
3. });

複製代碼

如果你的項目中沒有用到Ajax，那麼建議將這裡設為false

ajaxFormsEnabled (deprecated boolean, default: true):

單獨設定頁面中的表單提交是否使用Ajax方法。

布爾類型，在預設狀態下參數是true。

ajaxLinksEnabled (deprecated boolean, default: true):

單獨設定頁面中的連結是否使用Ajax方法。

布爾類型，在預設狀態下參數是true。

autoInitialize (boolean, default: true):

設定頁面是否自動初始化，當設定為false時，jQM將延遲對頁面的渲染，方便我們動態構建頁面的Dom元素等非同步作業時引發的頁面渲染失敗問題。

在頁面元素構建完成後用$.mobile.initializePage();來開始渲染頁面。

布爾類型，預設狀態下參數為true。

例如:

1. $(document).bind("mobileinit", function(){
2.       $.mobile.autoInitialize=false; //刪除這行配置參數就會出現渲染錯誤
3. });
4. $(function(){
5.        function newDom(){
6.       $("div[data-role='content']")
7.       .append("<a href='web.html' data-role='button'>Link button</a>");
8.       $.mobile.initializePage();//載入完成後開始渲染頁面
9.             }
10.        setTimeout(newDom,500); //延時載入
11. });

複製代碼

defaultTransition (string, default: 'slide'):

設定預設的頁面過渡效果，如果不想使用過渡效果就將參數設定為”none”。

字元類型，預設參數”slide”。

gradeA (function that returns a boolean, default: a function returning the value of $.support.mediaquery):

用於判斷瀏覽器是否屬於A級瀏覽器。

布爾類型，預設$.support.mediaquery用於返回這個布爾值。

loadingMessage (string, default: "loading"):

設定載入提示框裡顯示的文本，如果設定為false，將不顯示載入提示框。

字元類型，預設值”loadind”。

metaViewportContent (string, default: "width=device-width, minimum-scale=1, maximum-scale=1"):

設定用於頁面的適應比例的mata元素，如果設定為false，將不添加Mata元素。

字元類型，預設” width=device-width, minimum-scale=1, maximum-scale=1”。

nonHistorySelectors (string, default: "dialog"):

設定何種data-rel參數不會記錄到雜湊表。

由於現階段data-rel只有” dialog”參數，建議不要自訂此項。

subPageUrlKey (string, default: "ui-page"):

用於設定引用子頁面時雜湊表中的標識。

字元類型，預設” ui-page”。

Eddy的部落格：http://www.uedcool.com