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”？我需要更改其他内容吗？

谢谢你的帮助！！

Orma 的编辑 1：我也更改了以下主题。我已将它们放入名为 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"; 


});
4

1 回答 1

1

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

你为什么不写你的jobstaff-de主题（我假设你有）并在你的 JQM 页面上手动设置它：

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

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

于 2013-09-03T11:17:02.150 回答