js中ready()中函数和外面的区别
今天测试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内容,页面显示已经完成,此时主题设置了,但是没有刷新,所以页面显示上也就无效。
相关推荐
88274956 2020-11-03
Zhongmeishijue 2020-09-10
runner 2020-09-01
梦的天空 2020-08-25
IdeaElements 2020-08-19
luvhl 2020-08-17
移动开发与培训 2020-08-16
ReunionIsland 2020-08-16
lyqdanang 2020-08-16
NARUTOLUOLUO 2020-08-03
MyNameIsXiaoLai 2020-07-08
星辰的笔记 2020-07-04
csstpeixun 2020-06-28
letheashura 2020-06-26
liaoxuewu 2020-06-26
OldBowl 2020-06-26
北京老苏 2020-06-25
Luffyying 2020-06-25