Jquery mobile动态修改header后无法渲染样式的问题解决
最近刚开始看JQuery Mobile， 发现界面确实做得很好，国外开源的东西做得都这么好看。。哎。。。想到我们公司的产品界面。。俗话说 货比货得扔。
先介绍一下Jquery mobile，如果要直接看标题问题的话请直接跳到下面红色Title部分。
jqm(jquery mobile的缩写)的处理方式实际上是在已有的dom基础上，在页面加载完成后，进行渲染。 而渲染时最重要的就是识别dom上的data-role这个jqm自定义的attribute。
例子如下：
<html lang="en">
<head>
<meta charset="utf-8">
<title>buttonMarkup demo</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
});
</script>
</head>
<body>
<div id='page' data-role='page'>
<div id='header' data-role='header'>
<h1>This is the Header.</h1>
</div>
<div id="container" data-role='content'>
<h1>This is the Body.</h1>
[url=#]Anchor Button[/url]
</div>
<div id='footer' data-role='footer'>
<h1>This is the Footer.</h1>
</div>
</div>
</body>
</html>
可以在tomcat中搞个这个文件，然后分别在电脑、平板和手机上试一下。至少我是感觉挺好的。
JQM的渲染方式和Jquery-UI还是有一定区别。不过两种UI都提供了独立渲染控件的方法。
比如
$('.selector').button()
$( ".selector" ).dialog()
具体JQM的API可以查看 http://api.jquerymobile.com/category/widgets/
当然了，深度的研究还没开始，据说JQM对JQ AJAX有进一步的封装，比如在JQM的按钮上可以直接把href的那个页面以dialog的形式展现。 这个有待学习。
再说到动态修改Head的问题
相信大家都能搜到 动态修改ListView或者动态增加按钮之后如何渲染的中文帖子，基本上就是调用控件的渲染方法重新渲染(推荐个JQM新手帖 http://www.wglong.com/main/artical!details?id=4)，如
$("#contentList").append(content).listview('refresh');
$("#id").html(buttonDiv).trigger('create');
但是如果涉及Header组件的话，调用
$( ".selector" ).fixedtoolbar()
方法 依旧没办法动态的渲染head。
只好寻求谷歌帮助，最后找到了
https://github.com/jquery/jquery-mobile/issues/2703
和
https://github.com/jquery/jquery-mobile/issues/2215
发现这实际上是JQM还没有实现的一个功能，预计在1.4发布新的ToolBar功能(当前版本是1.3.2)
解决方法有以下两种：[/b]
[b]1.Page重建：
$('#header').html("<h1>"+t+"</h1>");
$("#page").trigger("pagecreate");
但是看上面的帖子有人不推荐这种方式，理由是JQM自带的后退按钮(等于是做了个网页上的后退功能)会无效，另外可能会造成事件的二次绑定或者内存泄露(待考究)？
实际上我还是用了这种方式。。。因为比较简单。 并且就像回帖一样：
引用
it seems to have no side effect... yet
2.自己修改样式。
这个感觉就比较高端洋气上档次了，应该要对jqm的默认样式比较熟悉才行，其实贴完简介里面的代码，在网页打开之后，大家肯定会审查一下元素。会发现JQM会自动加入class到本来无任何class的dom上，挨个看看，在自己替换的时候加上去就行了。
另：
自适应网页设计（Responsive Web Design）推荐一个帖子
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
JQM的自适应特性主要体现在以下三点：
1.CSS media queries
2.A fluid grid
3.Flexible images and media
好处就是我们生成的dom基本不需要考虑布局，并且JQM提供了自定义的主题，这样如果没有特殊需求，我们也不需要考虑DOM的样式了。