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

Question

我正在使用jquery mobile开发我的移动网站。 我必须在许多地方设置“数据主题”属性以包含特定主题。 是否有一个地方可以更改一次（例如在javascript函数中或类似的地方），但是它会导致我所有的元素都变成主题？ 我尝试将其放入样式表中，但无法正常工作。

我的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>

我的JavaScript：

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

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

Answer 1

这是来自jQuery Mobile Docs：

可以将data-theme属性应用于页眉和页脚容器，以应用任何带字母的主题色样。 尽管可以将data-theme属性添加到内容容器中，但建议将其添加到已分配了data-role =“ page”属性的div或容器中，以确保将背景色应用于整页。 完成此操作后，页面上的所有小部件也将继承页面容器中指定的主题。 但是，页眉和页脚将默认为主题“ a”。 例如，如果要创建一个页面，其所有元素（包括其页眉和页脚）仅包含主题“ b”，则需要为页面div以及页眉和页眉指定data-theme =“ b”。页脚divs。

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

因此，基本上，如果将data-theme="a"到data-role="page"标签，则所有内容都应继承a主题。 您可以通过弄乱上面链接顶部的“主题色板更改”链接来进行测试。

更新

要以编程方式更改页面主题，请将以下代码添加到您的网站：

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

但这会在渲染网站时给用户的浏览器带来开销，因此我建议更改data-role="page"标签上的硬编码data-theme属性。

更新

您也可以通过更改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>

这将使任何页面没有一组data-theme属性默认为a主题。

这是一个演示： 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