Jquery mobile动态修改header后无法渲染样式的问题解决
最近刚开始看JQuery Mobile， 发现界面确实做得很好，国外开源的东西做得都这么好看。。哎。。。想到我们公司的产品界面。。俗话说 货比货得扔。
先介绍一下Jquery mobile，如果要直接看标题问题的话请直接跳到下面红色Title部分。
jqm(jquery mobile的缩写)的处理方式实际上是在已有的dom基础上，在页面加载完成后，进行渲染。 而渲染时最重要的就是识别dom上的data-role这个jqm自定义的attribute。
例子如下：
可以在tomcat中搞个这个文件，然后分别在电脑、平板和手机上试一下。至少我是感觉挺好的。
JQM的渲染方式和Jquery-UI还是有一定区别。不过两种UI都提供了独立渲染控件的方法。
比如
具体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)，如
方法 依旧没办法动态的渲染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的样式了。
