当前位置：文江博客话题详情

JQuery Mobile 默认数据主题

发布于 2024-10-15 16:31:27 字数 148 浏览 4 评论 0原文

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

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

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

我是否遗漏了手册的某些页面？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝色星空 2024-10-22 16:31:27

就像乔尔所说，你必须覆盖默认值。目前看来也没有其他办法了。

以 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.0 b2.js

Like Joel said, you have to overwrite the default values. At the moment it seems like there is no other way.

Take Joel's sample code:

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

Customize your custom-scripting.js

This is a sample code with a few more options you can configure:

$(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...";
});

There should be also other options like:

$.mobile.dialog.prototype.options.theme
$.mobile.selectmenu.prototype.options.menuPageTheme
$.mobile.selectmenu.prototype.options.overlayTheme

You might be able to find more settings here:
http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.js

回复收藏 0 原文

野侃 2024-10-22 16:31:27

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

为此，您只需在 jquery 加载和 jquery.mobile.js 加载之间添加以下内容即可。

例子：

因为mobileinit事件执行后立即触发，
您需要在加载 jQuery Mobile 之前绑定事件处理程序。
因此，我们建议在下面链接到您的 JavaScript 文件
订单：
;
<脚本 src="custom-scripting.js">
<脚本 src="jquery-mobile.js">

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

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

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

或者您可以在jquery移动源中覆盖它，搜索“headerTheme “ 将会在第 5020 行左右

For nested list views, to control the header theme you need to override the default option that is setting the nested header theme to blue.

To do this you simply add the following in between jquery loading and jquery.mobile.js loading.

example:

Because the mobileinit event is triggered immediately upon execution,
you'll need to bind your event handler before jQuery Mobile is loaded.
Thus, we recommend linking to your JavaScript files in the following
order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

So in "custom-scripting.js" put the following...

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

Where "a" is the theme you want to be applied to nested headers..

Or you can just override it in the jquery mobile source, search for "headerTheme" it will be around line 5020

回复收藏 0 原文

倾｀听者〃 2024-10-22 16:31:27

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

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

Themes a,b,c,d and e are all in the css file, if you want a custom theme you can use f-z, copy a and change it to your theme letter. add the data-theme="z" to your element

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

回复收藏 0 原文

漆黑的白昼 2024-10-22 16:31:27

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

回复收藏 0 原文

~没有更多了~

关于作者

往事风中埋

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

JQuery Mobile 默认数据主题

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

JQuery Mobile 默认数据主题

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。