今天测试jQuery Mobile的主题功能时,动态改变它的theme,出现总是没有更新主题效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.0-beta.1.min.css" />
<script type="text/javascript" src="js/fastclick.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.0-beta.1.min.js"></script>
<script type="text/javascript">
$(function(){
var selTheme = $("#selTheme");
selTheme.bind("change",function(){
if(selTheme.val()!=""){
$.cookie("StrTheme",selTheme.val(),{
path:"/weixin",
expires:1
})
window.location.reload();
}
});
});
/*
该段代码放在ready里面,则只有第一次生效,因为放在ready里面就意味着要等DOM加载完成在执行,
此时页面已经加载了一种主题,再执行该段代码更换另一宗主题,但是没有刷新,所以页面在显示上就没有变化过来
*/
if($.cookie("StrTheme")){
alert($.cookie("StrTheme"));
$.mobile.page.prototype.options.headerTheme = $.cookie("StrTheme");
}
</script>
<base>
<title>jqueryMobile_3</title>
</head>
<body>
<!-- 页面一 -->
<div data-role="page" id="page1">
<div data-role="header">
<h1>雾烨</h1>
<div data-role="navbar">
<ul>
<!-- 添加样式, class="ui-btn-active" 表示该按钮是活动的 -->
<li><a href="index.html" data-iconpos="top" data-icon="search">Search</a></li>
<li><a href="index.html" data-iconpos="top" data-icon="home">Home</a></li>
<li><a href="jqueryMobile_4.html" data-iconpos="top" data-icon="info">More</a></li>
</ul>
</div>
</div>
<div data-role="content">
<select id="selTheme" data-native-menu="false">
<option value="">选择主题</option>
<option value="a">主题a</option>
<option value="b">主题b</option>
<option value="c">主题c</option>
<option value="d">主题d</option>
<option value="e">主题e</option>
</select>
</div>
<div data-role="footer">
<h2>©2015 ripin.com test</h2>
</div>
</div>
</body>
</html>
将该段代码
if($.cookie("StrTheme")){
alert($.cookie("StrTheme"));
$.mobile.page.prototype.options.headerTheme = $.cookie("StrTheme");
}
放到ready()外,问题解决,此刻才深刻理解到先加载完DOM再 执行ready中的函数的意思。这里的主题无效也是因为已经加载完dom内容,页面显示已经完成,此时主题设置了,但是没有刷新,所以页面显示上也就无效。