从一个位置更改多个jQuery移动“数据主题”属性

Question

I am using jquery mobile to develop my mobile website. 我正在使用jquery mobile开发我的移动网站。 I have to set the "data-theme" property from many places to incorporate a particular theme. 我必须在许多地方设置“数据主题”属性以包含特定主题。 Is there a place where I can change it once (like in a javascript function or something) but it would result in all my elements getting the theme? 是否有一个地方可以更改一次（例如在javascript函数中或类似的地方），但是它会导致我所有的元素都变成主题？ I have tried putting it into the style sheet but it doesnt work. 我尝试将其放入样式表中，但无法正常工作。

My htmlCode: 我的htmlCode：

<!DOCTYPE html> 
<html>

<head>
    <script src="jquery.mobile-1.0/demos/jquery.js" type="text/javascript"></script>
    <script src="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.js"  type="text/javascript"></script>
    <script src="CodeGeneral.js" type="text/javascript"></script>

    <link rel="stylesheet" href="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.css">
    <link rel="stylesheet" href="StyleMaincss.css">

    <title>Home</title>
</head>

<body onload="GenerateData();" data-role = "page" >
    <div data-role="header" class="HeaderBar">
    <img src="Logos v2/Header.png" alt="" class="HeaderImage">
    </div> 

    //Content on page

    <div data-role="footer" class="NavBar" data-position="fixed">       
    <div data-role="navbar">
           //Navigation button creation
        </div>
    </div>
</body>

My javascript: 我的JavaScript：

$(document).delegate("[data-role='page']", 'pagebeforecreate', 
    function () {
         $(this).attr('data-theme', 'a')
    }
 ); 

function GenerateData() {
    //Things carried out during loading
}

Answer 1

This is from the jQuery Mobile Docs: 这是来自jQuery Mobile Docs：

The data-theme attribute can be applied to the header and footer containers to apply any of the lettered theme color swatches. 可以将data-theme属性应用于页眉和页脚容器，以应用任何带字母的主题色样。 While the data-theme attribute could be added to the content container, we recommend adding it instead to div or container that has been assigned the data-role="page" attribute to ensure that the background color is applied to the full page. 尽管可以将data-theme属性添加到内容容器中，但建议将其添加到已分配了data-role =“ page”属性的div或容器中，以确保将背景色应用于整页。 When this is done, all widgets on the page will also inherit the theme specified in the page container. 完成此操作后，页面上的所有小部件也将继承页面容器中指定的主题。 However, headers and footers will default to theme "a". 但是，页眉和页脚将默认为主题“ a”。 If you want to have a page with, for example, only theme "b" for all its elements, including its header and footer, you will need to specify data-theme="b" to the page div as well as the header and footer divs. 例如，如果要创建一个页面，其所有元素（包括其页眉和页脚）仅包含主题“ b”，则需要为页面div以及页眉和页眉指定data-theme =“ b”。页脚divs。

Source: http://jquerymobile.com/demos/1.0/docs/pages/pages-themes.html 资料来源： http : //jquerymobile.com/demos/1.0/docs/pages/pages-themes.html

So basically if you add data-theme="a" to the data-role="page" tags then everything should inherit the a theme. 因此，基本上，如果将data-theme="a"到data-role="page"标签，则所有内容都应继承a主题。 You can test that by messing with the "theme swatch change" links at the top of the link above. 您可以通过弄乱上面链接顶部的“主题色板更改”链接来进行测试。

UPDATE 更新

To programmatically change the theme of a page add this code to your site: 要以编程方式更改页面主题，请将以下代码添加到您的网站：

$(document).delegate('[data-role="page"]', 'pagecreate', function (e) {
    $(this).removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e').addClass('ui-body-a').attr('data-theme', 'a');
});

But this creates overhead for the user's browser while rendering the website so I suggest altering the hard-coded data-theme attributes on the data-role="page" tags. 但这会在渲染网站时给用户的浏览器带来开销，因此我建议更改data-role="page"标签上的硬编码data-theme属性。

UPDATE 更新

You can also do this inside the mobileinit event handler by changing the page prototype : 您也可以通过更改page prototype在mobileinit事件处理程序内执行此操作：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind('mobileinit', function () {
    $.mobile.page.prototype.options.theme  = "a";
});
</script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

This will make any page without a set data-theme attribute default to the a theme. 这将使任何页面没有一组data-theme属性默认为a主题。

Here is a demo: http://jsfiddle.net/tEbD5/3/ 这是一个演示： http : //jsfiddle.net/tEbD5/3/

从一个位置更改多个jQuery移动“数据主题”属性

问题描述

1 个解决方案

解决方案1
6 已采纳 2011-12-12 18:06:06

从一个位置更改多个jQuery移动“数据主题”属性

问题描述

1 个解决方案

解决方案1 6 已采纳 2011-12-12 18:06:06

解决方案1
6 已采纳 2011-12-12 18:06:06