Jquery mobile動態修改header後無法渲染樣式的問題解決
阿新 • • 發佈：2019-01-25
最近剛開始看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新手帖
$("#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的樣式了。