1. 程式人生 > >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的樣式了。