動態添加元素css丟失的終極解決辦法
在Jquerymoblie的使用過程中,動態添加元素後css丟失。
這個問題在之前JqueryMobile使用心得(3)中我已經說明了其原因(因爲頁面標籤首先經過jquery.mobile-1.0a2.min.js的處理,添加了許多標籤,然後再用css佈局),並且給出了一種解決方法:動態加載jquery.mobile-1.0a2.min.js。
但是經過測試,上面這種方法並不好。首先異步加載造成用戶可以看到沒有加載JS的頁面,並且JS加載過一次後,如果再要動態添加新元素的話,就意味着多次加載JS文件,顯示問題先不說,這效率也堪憂。
因此必須提出新方法。
新方法有兩個,調用JS的順序與普通方式相同,都別動態添加JS。
一是將按照jquery.mobile-1.0a2.min.js處理過後的樣式,來動態添加元素。jquery.mobile-1.0a2.min.js處理過後的樣式可以通過chrome瀏覽器的審查元素功能看到。這個辦法的缺點很明顯:添加了很多奇怪的標籤。
例如:
一般情形下動態添加元素:
onelist = "<li><img src='stylesheets/images/file_icon/" + SwitchIcon($obj[i].wext) + "' class='ui-li-icon'/><a href='#' ";
if($obj[i].wtype == "dir"){//文件夾
onelist += "onclick=\"GetShowMyList(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + CountSize($obj[i].wsize) + "</span><a href='dialog/operatefile.html' >操作</a></li>";
}else{//非文件夾直接下載
onelist += "onclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + CountSize($obj[i].wsize) + "</span><a href='dialog/operatefile.html' >操作</a></li>";
按照jquery.mobile-1.0a2.min.js處理過後的樣式,來動態添加元素:
onelist = "<li class='ui-li-has-icon ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-btn-up-c' role='option' tabindex='0' data-theme='c'>" +
"<div class='ui-btn-inner'>" +
"<div class='ui-btn-text'>" +
"<img class='ui-li-icon ui-li-thumb' src='stylesheets/images/file_icon/" + SwitchIcon($obj[i].wext) + "' />" +
"<a class='ui-link-inherit' href='#' ";
if($obj[i].wtype == "dir"){//文件夾
onelist += "onclick=\"GetShowMyList(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a>" +
"<span class='ui-li-count ui-btn-up-c ui-btn-corner-all'>" + CountSize($obj[i].wsize) + "</span>" +
"<a class='ui-li-link-alt ui-btn ui-btn-up-c' href='dialog/operatefile.html' title='操作' data-theme='c'>" +
"<span class='ui-btn-inner'>" +
"<span class='ui-btn-text'></span>" +
"<span class='ui-btn ui-btn-up-d ui-btn-icon-notext ui-btn-corner-all ui-shadow' data-theme='d'>" +
"<span class='ui-btn-inner ui-btn-corner-all'>" +
"<span class='ui-icon ui-icon-gear ui-icon-shadow'></span>" +
"</span>" +
"</span>" +
"</span>" +
"</a></div></div></li>";
}else{//非文件夾直接下載
onelist += "onclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a>" +
"<span class='ui-li-count ui-btn-up-c ui-btn-corner-all'>" + CountSize($obj[i].wsize) + "</span>" +
"<a class='ui-li-link-alt ui-btn ui-btn-up-c' href='dialog/operatefile.html' title='操作' data-theme='c'>" +
"<span class='ui-btn-inner'>" +
"<span class='ui-btn-text'></span>" +
"<span class='ui-btn ui-btn-up-d ui-btn-icon-notext ui-btn-corner-all ui-shadow' data-theme='d'>" +
"<span class='ui-btn-inner ui-btn-corner-all'>" +
"<span class='ui-icon ui-icon-gear ui-icon-shadow'></span>" +
"</span>" +
"</span>" +
"</span>" +
"</a></div></div></li>";
}
}
瞧這多了多少代碼啊!不過這也是JueryMobile UI前端實際最終處理的代碼量。
方法二:refresh
其實JueryMobile 中早就封裝了refresh方法。你只需要對新添加的元素節點refresh一下就可以了。
例如: $("#節點名").listview("refresh");
還是剛纔那個函數,採用普通的動態添加元素方法,最後加個refresh就搞定了。
function ShowMyListOK(){//處理根目錄文件列表函數
if( $glb_result == ""){
alert("返回爲空!請重新登錄!");
}else{
//alert("成功: "+$glb_result);
$("#wlist").empty();
var $obj = jQuery.parseJSON($glb_result);
var onelist = "";
$.each( $obj, function(i, n){
if( $obj[i].wname != ""){
onelist = "<li><img src='stylesheets/images/file_icon/" + SwitchIcon($obj[i].wext) + "' class='ui-li-icon'/><a href='#' ";
if($obj[i].wtype == "dir"){//文件夾
onelist += "onclick=\"GetShowMyList(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + CountSize($obj[i].wsize) + "</span><a href='dialog/operatefile.html' >操作</a></li>";
}else{//非文件夾直接下載
onelist += "onclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + CountSize($obj[i].wsize) + "</span><a href='dialog/operatefile.html' >操作</a></li>";
}
$("#wlist").append(onelist);
}
});
$("#wlist").listview("refresh");
}
}
這個方法很好,但是爲什麼沒有早點發現呢?因爲jquery.mobile-1.0a2.js的源碼確實很不好讀。本人JS水平有限,看到裏面內容後,以爲調用裏面方法必須創建對象,誤解了JQuery的原意。試了半天才搞出來,必須發帖紀錄一下這個小成功。
http://hi.baidu.com/%CE%F7%B1%B1%C5%DD%C3%E6%CD%F5/blog/item/e743654de9424a24afc3ab8b.html
這個問題在之前JqueryMobile使用心得(3)中我已經說明了其原因(因爲頁面標籤首先經過jquery.mobile-1.0a2.min.js的處理,添加了許多標籤,然後再用css佈局),並且給出了一種解決方法:動態加載jquery.mobile-1.0a2.min.js。
但是經過測試,上面這種方法並不好。首先異步加載造成用戶可以看到沒有加載JS的頁面,並且JS加載過一次後,如果再要動態添加新元素的話,就意味着多次加載JS文件,顯示問題先不說,這效率也堪憂。
因此必須提出新方法。
新方法有兩個,調用JS的順序與普通方式相同,都別動態添加JS。
一是將按照jquery.mobile-1.0a2.min.js處理過後的樣式,來動態添加元素。jquery.mobile-1.0a2.min.js處理過後的樣式可以通過chrome瀏覽器的審查元素功能看到。這個辦法的缺點很明顯:添加了很多奇怪的標籤。
例如:
一般情形下動態添加元素:
onelist = "<li><img src='stylesheets/images/file_icon/" + SwitchIcon($obj[i].wext) + "' class='ui-li-icon'/><a href='#' ";
if($obj[i].wtype == "dir"){//文件夾
onelist += "onclick=\"GetShowMyList(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + CountSize($obj[i].wsize) + "</span><a href='dialog/operatefile.html' >操作</a></li>";
}else{//非文件夾直接下載
onelist += "onclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + CountSize($obj[i].wsize) + "</span><a href='dialog/operatefile.html' >操作</a></li>";
按照jquery.mobile-1.0a2.min.js處理過後的樣式,來動態添加元素:
onelist = "<li class='ui-li-has-icon ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-btn-up-c' role='option' tabindex='0' data-theme='c'>" +
"<div class='ui-btn-inner'>" +
"<div class='ui-btn-text'>" +
"<img class='ui-li-icon ui-li-thumb' src='stylesheets/images/file_icon/" + SwitchIcon($obj[i].wext) + "' />" +
"<a class='ui-link-inherit' href='#' ";
if($obj[i].wtype == "dir"){//文件夾
onelist += "onclick=\"GetShowMyList(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a>" +
"<span class='ui-li-count ui-btn-up-c ui-btn-corner-all'>" + CountSize($obj[i].wsize) + "</span>" +
"<a class='ui-li-link-alt ui-btn ui-btn-up-c' href='dialog/operatefile.html' title='操作' data-theme='c'>" +
"<span class='ui-btn-inner'>" +
"<span class='ui-btn-text'></span>" +
"<span class='ui-btn ui-btn-up-d ui-btn-icon-notext ui-btn-corner-all ui-shadow' data-theme='d'>" +
"<span class='ui-btn-inner ui-btn-corner-all'>" +
"<span class='ui-icon ui-icon-gear ui-icon-shadow'></span>" +
"</span>" +
"</span>" +
"</span>" +
"</a></div></div></li>";
}else{//非文件夾直接下載
onelist += "onclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a>" +
"<span class='ui-li-count ui-btn-up-c ui-btn-corner-all'>" + CountSize($obj[i].wsize) + "</span>" +
"<a class='ui-li-link-alt ui-btn ui-btn-up-c' href='dialog/operatefile.html' title='操作' data-theme='c'>" +
"<span class='ui-btn-inner'>" +
"<span class='ui-btn-text'></span>" +
"<span class='ui-btn ui-btn-up-d ui-btn-icon-notext ui-btn-corner-all ui-shadow' data-theme='d'>" +
"<span class='ui-btn-inner ui-btn-corner-all'>" +
"<span class='ui-icon ui-icon-gear ui-icon-shadow'></span>" +
"</span>" +
"</span>" +
"</span>" +
"</a></div></div></li>";
}
}
瞧這多了多少代碼啊!不過這也是JueryMobile UI前端實際最終處理的代碼量。
方法二:refresh
其實JueryMobile 中早就封裝了refresh方法。你只需要對新添加的元素節點refresh一下就可以了。
例如: $("#節點名").listview("refresh");
還是剛纔那個函數,採用普通的動態添加元素方法,最後加個refresh就搞定了。
function ShowMyListOK(){//處理根目錄文件列表函數
if( $glb_result == ""){
alert("返回爲空!請重新登錄!");
}else{
//alert("成功: "+$glb_result);
$("#wlist").empty();
var $obj = jQuery.parseJSON($glb_result);
var onelist = "";
$.each( $obj, function(i, n){
if( $obj[i].wname != ""){
onelist = "<li><img src='stylesheets/images/file_icon/" + SwitchIcon($obj[i].wext) + "' class='ui-li-icon'/><a href='#' ";
if($obj[i].wtype == "dir"){//文件夾
onelist += "onclick=\"GetShowMyList(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + CountSize($obj[i].wsize) + "</span><a href='dialog/operatefile.html' >操作</a></li>";
}else{//非文件夾直接下載
onelist += "onclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + CountSize($obj[i].wsize) + "</span><a href='dialog/operatefile.html' >操作</a></li>";
}
$("#wlist").append(onelist);
}
});
$("#wlist").listview("refresh");
}
}
這個方法很好,但是爲什麼沒有早點發現呢?因爲jquery.mobile-1.0a2.js的源碼確實很不好讀。本人JS水平有限,看到裏面內容後,以爲調用裏面方法必須創建對象,誤解了JQuery的原意。試了半天才搞出來,必須發帖紀錄一下這個小成功。
http://hi.baidu.com/%CE%F7%B1%B1%C5%DD%C3%E6%CD%F5/blog/item/e743654de9424a24afc3ab8b.html
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.