2013-08-21 71 views
3

我嘗試自定義jquery mobile的主題。在「用戶界面,彈出」的文檔,我發現了兩個選項,我可以改變有關的主題化:如何更改ui-popup主題中的數據角色「內容」?

$.mobile.popup.prototype.options.overlayTheme = "jobstaff-de"; 
$.mobile.popup.prototype.options.theme = "jobstaff-de"; 

這將導致如下:

<div data-role="popup" id="loginDialog" class="ui-body-jobstaff-de" data-theme="jobstaff-de" data-overlay-theme="jobstaff-de">...</div> 

到目前爲止好。我的問題是指這個div區的內部html。我發現它在這裏:

<div data-role="content" class="ui-body-c" data-theme="c" role="main">...</div> 

爲什麼主題重置爲「c」在這裏?我需要改變其他東西嗎?

感謝您的任何幫助!


EDIT 1爲ORMA:下面的主題,我改變了。我已經把它們納入其中的jquery.js後加載的文件名爲jquery.mobile.theme.js但jquery.mobile.js前:jquery.mobile.theme.js的

<script type='text/javascript' src='js/jquery.js'></script> 
<script type='text/javascript' src='js/jquery.mobile.theme.js'></script> 
<script type='text/javascript' src='js/jquery.mobile.js'></script> 

內容:(jQuery的.js文件和jquery.mobile.js不變)

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

    $.mobile.page.prototype.options.theme    = "jobstaff-de"; 
    $.mobile.page.prototype.options.headerTheme   = "jobstaff-de"; 
    $.mobile.page.prototype.options.contentTheme  = "jobstaff-de"; 
    $.mobile.page.prototype.options.footerTheme   = "jobstaff-de"; 
    $.mobile.page.prototype.options.backBtnTheme  = "jobstaff-de"; 

    // Popups 
    $.mobile.popup.prototype.options.overlayTheme  = "jobstaff-de"; 
    $.mobile.popup.prototype.options.theme    = "jobstaff-de"; 

    // listviews 
    $.mobile.listview.prototype.options.headerTheme  = "jobstaff-de"; // Header for nested lists 
    $.mobile.listview.prototype.options.theme   = "jobstaff-de"; // List items/content 
    $.mobile.listview.prototype.options.dividerTheme = "jobstaff-de"; // List divider 
    $.mobile.listview.prototype.options.splitTheme  = "jobstaff-de"; 
    $.mobile.listview.prototype.options.countTheme  = "jobstaff-de"; 
    $.mobile.listview.prototype.options.filterTheme  = "jobstaff-de"; 

    // selectmenu 
    $.mobile.selectmenu.prototype.options.menuPageTheme = "jobstaff-de"; 
    $.mobile.selectmenu.prototype.options.overlayTheme = "jobstaff-de"; 
    $.mobile.selectmenu.prototype.options.theme   = "jobstaff-de"; 

    // dialog 
    $.mobile.dialog.prototype.options.theme    = "jobstaff-de"; 

    // panel 
    $.mobile.panel.prototype.options.theme    = "jobstaff-de"; 

    //input 
    $.mobile.textinput.prototype.options.theme   = "jobstaff-de"; 

    // buttons 
    $.mobile.button.prototype.options.theme    = "jobstaff-de"; 


}); 
+0

你是否也在改變_page_的默認主題?你是否在jquery和jquery mobile之前加載了上面的代碼? – Omar

+0

請向我們展示您的代碼Tobias –

+0

我編輯了我的問題:-) –

回答

1

我從來沒有修改的主題,這樣的:-)

你爲什麼不只是寫您的jobstaff-de主題(我假設你有)和手動將其設置在您的JQM頁面上:

<div data-role="page" data-theme="jobstaff-de"> 
    // all widgets will inherit jobstaff-de 
</div> 

在JQM 1.4中,這個單一的主題聲明應該足以將頁面的主題繼承到頁面上的所有小部件,而無需再次指定它 - 因此無需覆蓋任何默認值恕我直言。

+0

版本1.4目前處於alpha狀態,但我認爲這是最有幫助的答案在未來對於有同樣問題的人來說。所以我必須等到1.4發佈;)感謝您的建議! –

相關問題