JQuery Mobile 默认数据主题答案

【问题标题】：JQuery Mobile default data-themeJQuery Mobile 默认数据主题
【发布时间】：2011-02-03 21:24:30
【问题描述】：

有人知道如何为 jquery-mobile 设置默认数据主题吗？

看起来有必要为每个组件设置数据主题。

即使您为页面数据角色设置数据主题，加载的列表和其他组件也不会尊重它。

我错过了手册的某些页面吗？

【问题讨论】：

标签： javascript mobile themes jquery-mobile

【解决方案1】：

就像 Joel 所说，您必须覆盖默认值。目前看来没有别的办法了。

以 Joel 的示例代码为例：

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

自定义您的 custom-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

【讨论】：

嘿，有没有办法在嵌套的列表视图标题中添加自定义按钮，就像上面提到的后退按钮...？？？
@umair.ali 据我所知，没有“内置”方式。 - 您可以通过脚本扩展 html 结构并触发 jQuery Mobile 为您创建相应的标记。 - 也许最好在 stackoverflow 上创建自己的问题。如果您正在寻找一般的导航元素，请查看 JQM 的新功能，例如面板 -- view.jquerymobile.com/1.3.1/dist/demos/examples/panels/…

【解决方案2】：

对于嵌套列表视图，要控制标题主题，您需要覆盖将嵌套标题主题设置为蓝色的默认选项。

为此，您只需在 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>

所以在“custom-scripting.js”中加入以下内容...

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

其中“a”是您要应用于嵌套标题的主题..

或者您可以在 jquery 移动源中覆盖它，搜索“headerTheme”它将在第 5020 行附近

【讨论】：

【解决方案3】：

主题 a,b,c,d 和 e 都在 css 文件中，如果您想要自定义主题可以使用 f-z，复制 a 并将其更改为您的主题字母。将 data-theme="z" 添加到您的元素中

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

【讨论】：

【解决方案4】：

据我所知，您必须为页面 div 设置一个主题，并且它将在内部继承。

【讨论】：

naugtur，我试过了，但在某些情况下，比如嵌套列表，主题配置不受尊重。
试试 JQM alpha3 - 今天发布了
我有同样的问题，我的可折叠元素都有带有数据主题“d”的关闭/打开图标，而不是我为页面定义的 c...
在父 div 上设置 data-theme="b" 为我改变了大多数孩子。有些东西虽然不喜欢我的标题。