jQuery Mobile 中文手冊 Ajax開發版(1)

文章目錄

• 初始化

初始化

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

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

Mobileinit事件

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

例如：

$(document).bind("mobileinit", function(){

//apply overrides her

});

初始化配置項的兩種方法

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

 

$(document).bind("mobileinit", function(){

$.extend( $.mobile , {

foo: bar

});

});

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

$(document).bind("mobileinit", function(){

$.mobile.foo = bar;

});

初始化配置項

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

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

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

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

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

例如：

$(document).bind("mobileinit", function(){

$.mobile.activeBtnClass="ui-btn-hover-a";

});

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

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

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

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

例如：

$(document).bind("mobileinit", function(){

$.mobile.activePageClass="ui-page-custom";

});

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