2011-02-03 66 views
21

有誰知道如何設置一個默認數據主題的jQuery移動?jQuery Mobile的默認數據主題

看起來有必要爲每個組件設置數據主題。

即使你設置數據主題爲它不會被加載列表和其他部件尊重的頁面數據的作用。

我是否缺少手冊的某些頁面?

回答

1

至於我見過你必須設置爲頁面的div一個主題,它會在裏面繼承。

+0

naugtur,從來就試過了,但在某些情況下,如嵌套列表,主題配置的不尊重。 – 2011-02-04 19:43:40

+0

嘗試JQM alpha3 - 今天發佈 – naugtur 2011-02-04 20:33:28

7

主題的a,b,c,d和e爲所有在CSS文件中,如果你想有一個自定義主題,您可以使用F-Z,複製並將其更改爲你的主題字母。添加數據主題=「Z」你的元素

<body> 
<div data-role="page" id="apply" data-theme="z"> 
... 
</div> 
</body> 
9

對於嵌套列表視圖,來控制你需要重寫被嵌套頭主題設置爲藍色的默認選項報頭的主題。

要做到這一點,你只需添加以下jQuery中加載和jquery.mobile.js負載之間。

例如:

因爲mobileinit事件在執行時立即觸發, 你需要加載jQuery Mobile的前事件處理程序綁定。 因此,我們建議鏈接到你的JavaScript文件在以下 順序:

<script src="jquery.js"></script> 
<script src="custom-scripting.js"></script> 
<script src="jquery-mobile.js"></script> 

因此,在 「自定義scripting.js」 把下面的...

$(document).bind("mobileinit", function() { 
    $.mobile.listview.prototype.options.headerTheme = "a"; 
}); 

其中「a 「是你想要應用到嵌套的標題主題..

或者你可以在jquery移動源中覆蓋它,搜索」headerTheme「它將圍繞線5020

30

像喬爾說的,你必須覆蓋默認值。目前似乎沒有其他辦法。

取喬爾的示例代碼:

<script src="jquery.js"></script> 
<script src="custom-scripting.js"></script> 
<script src="jquery-mobile.js"></script> 

自定義您的自定義scripting.js

這是幾個選項的示例代碼,您可以配置:

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

    // Navigation 
    $.mobile.page.prototype.options.backBtnText = "Go back"; 
    $.mobile.page.prototype.options.addBackBtn  = true; 
    $.mobile.page.prototype.options.backBtnTheme = "d"; 

    // Page 
    $.mobile.page.prototype.options.headerTheme = "a"; // Page header only 
    $.mobile.page.prototype.options.contentTheme = "c"; 
    $.mobile.page.prototype.options.footerTheme = "a"; 

    // Listviews 
    $.mobile.listview.prototype.options.headerTheme = "a"; // Header for nested lists 
    $.mobile.listview.prototype.options.theme   = "c"; // List items/content 
    $.mobile.listview.prototype.options.dividerTheme = "d"; // List divider 

    $.mobile.listview.prototype.options.splitTheme = "c"; 
    $.mobile.listview.prototype.options.countTheme = "c"; 
    $.mobile.listview.prototype.options.filterTheme = "c"; 
    $.mobile.listview.prototype.options.filterPlaceholder = "Filter data..."; 
}); 

應該也可以選擇其他的喜歡:

$.mobile.dialog.prototype.options.theme 
$.mobile.selectmenu.prototype.options.menuPageTheme 
$.mobile.selectmenu.prototype.options.overlayTheme 

你也許可以在這裏找到更多的設置: http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.js