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

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的样式了。

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

相关推荐