jquery-mobile - 如何更改 ui-popup 主题中的数据角色 "content"？

Question

我尝试自定义 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-area 的内部 html。我在其中找到了这个:

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

为什么主题在这里重置为“c”？我需要更改其他内容吗？

感谢您的帮助!

---

EDIT 1 for Orma:我也更改了以下主题。我将它们放入一个名为 jquery.mobile.theme.js 的文件中，该文件在 jquery.js 之后但在 jquery.mobile.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.mobile.theme.js的内容:(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"; 


});

Answer 1

我从来没有像这样修改过主题 :-)

你为什么不直接编写你的 jobstaff-de 主题(我假设你有)并在你的 JQM 页面上手动设置它:

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

在 JQM 1.4 中，这个单一的主题声明应该足以将主题继承到页面上的所有小部件，而无需再次指定它 - 因此无需覆盖任何默认值恕我直言。