Jquery mobile动态修改header后无法渲染样式的有关问题解决

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("&lt;h1&gt;"+t+"&lt;/h1&gt;");$("#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的样式了。

Jquery mobile动态修改header后无法渲

热点推荐