Jquery Mobile使用心得是本文要介紹的內(nèi)容，主要是來了解Jquery Mobile使用指南的一個(gè)指引，具體內(nèi)容來看本文詳解。在Jquery Mobile的使用過程中，動(dòng)態(tài)添加元素后css丟失。因?yàn)轫撁鏄?biāo)簽首先經(jīng)過jquery mobile-10a2minjs的處理，添加了許多標(biāo)簽，然后再用css布局，并且給出了一種解決方法：動(dòng)態(tài)加載jquery mobile-10a2minjs。

但是經(jīng)過測(cè)試，上面這種方法并不好。首先異步加載造成用戶可以看到?jīng)]有加載JS的頁面，并且JS加載過一次后，如果再要?jiǎng)討B(tài)添加新元素的話，就意味著多次加載JS文件，顯示問題先不說，這效率也堪憂。

因此必須提出新方法。

新方法有兩個(gè)，調(diào)用JS的順序與普通方式相同，都別動(dòng)態(tài)添加JS。

一是將按照jquery mobile-10a2minjs處理過后的樣式，來動(dòng)態(tài)添加元素。jquery mobile-10a2minjs處理過后的樣式可以通過chrome瀏覽器的審查元素功能看到。這個(gè)辦法的缺點(diǎn)很明顯：添加了很多奇怪的標(biāo)簽。

例如：

一般情形下動(dòng)態(tài)添加元素：

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/operatefilehtml' >操作</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/operatefilehtml' > 
操作</a></li>";

按照jquery mobile-10a2minjs處理過后的樣式，來動(dòng)態(tài)添加元素：

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/operatefilehtml' 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/operatefilehtml' 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>";  
}  
} 

瞧這多了多少代碼?。〔贿^這也是JQuery Mobile UI前端實(shí)際最終處理的代碼量。

方法二：refresh

其實(shí)JQuery Mobile 中早就封裝了refresh方法。你只需要對(duì)新添加的元素節(jié)點(diǎn)refresh一下就可以了。

例如: $("#節(jié)點(diǎn)名")listview("refresh");

還是剛才那個(gè)函數(shù)，采用普通的動(dòng)態(tài)添加元素方法，最后加個(gè)refresh就搞定了。

function ShowMyListOK(){//處理根目錄文件列表函數(shù)  
if( $glb_result == ""){  
alert("返回為空！請(qǐng)重新登錄！");  
}else{  
//alert("成功： "+$glb_result);  
$("#wlist")empty();  
var $obj = jQueryparseJSON($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/operatefilehtml' >操作</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/operatefilehtml' >操作</a></li>";  
}  
$("#wlist")append(onelist);  
}  
});  
$("#wlist")listview("refresh");  
}  
} 

這個(gè)方法很好，但是為什么沒有早點(diǎn)發(fā)現(xiàn)呢？因?yàn)?strong>jquery mobile-10a2js的源碼確實(shí)很不好讀。本人JS水平有限，看到里面內(nèi)容后，以為調(diào)用里面方法必須創(chuàng)建對(duì)象，誤解了JQuery的原意。試了半天才搞出來，必須發(fā)帖紀(jì)錄一下這個(gè)小成功。

小結(jié)：詳解關(guān)于JQuery Mobile使用心得的內(nèi)容介紹完了，希望通過本文的學(xué)習(xí)能對(duì)你有所幫助！