JQuery Mobile 默认数据主题
Posted
技术标签:
【中文标题】JQuery Mobile 默认数据主题【英文标题】：JQuery Mobile default data-theme 【发布时间】：2011-02-03 21:24:30 【问题描述】：有人知道如何为 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 为您创建相应的标记。 - 也许最好在 *** 上创建自己的问题。如果您正在寻找一般的导航元素，请查看 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" 为我改变了大多数孩子。有些东西虽然不喜欢我的标题。以上是关于JQuery Mobile 默认数据主题的主要内容，如果未能解决你的问题，请参考以下文章