the*_*mer 10 javascript html5 css3 jquery-mobile
我正在使用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
}
这是来自jQuery Mobile Docs:
data-theme属性可以应用于页眉和页脚容器,以应用任何字母主题颜色样本.虽然数据主题属性可以被添加到内容容器,我们建议将其添加而不是股利或已分配的数据角色容器="页面"属性,以确保背景颜色应用于整个页面.完成此操作后,页面上的所有小部件也将继承页面容器中指定的主题.但是,页眉和页脚将默认为主题"a".如果你想要一个页面,例如,只有主题"b"的所有元素,包括它的页眉和页脚,你需要指定data-theme ="b"到页面div以及标题和页脚div.
资料来源:http://jquerymobile.com/demos/1.0/docs/pages/pages-themes.html
所以基本上,如果你添加data-theme="a"的data-role="page"标签,然后一切都应该继承的a主题.你可以通过搞乱上面链接顶部的"主题样本更改"链接来测试它.
UPDATE
要以编程方式更改页面主题,请将此代码添加到您的站点:
$(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-theme上的硬编码属性data-role="page".
UPDATE
您也可以mobileinit通过更改以下内容在事件处理程序中执行此操作page prototype:
<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>
这将使任何没有set data-theme属性的页面默认为a主题.
这是一个演示:http://jsfiddle.net/tEbD5/3/