详解关于JQuery Mobile使用心得

Jquery Mobile使用心得是本文要介绍的内容，主要是来了解Jquery Mobile使用指南的一个指引，具体内容来看本文详解。在Jquery Mobile的使用过程中，动态添加元素后css丢失。因为页面标签首先经过jquery mobile-10a2minjs的处理，添加了许多标签，然后再用css布局，并且给出了一种解决方法：动态加载jquery mobile-10a2minjs。

但是经过测试，上面这种方法并不好。首先异步加载造成用户可以看到没有加载JS的页面，并且JS加载过一次后，如果再要动态添加新元素的话，就意味着多次加载JS文件，显示问题先不说，这效率也堪忧。

因此必须提出新方法。

新方法有两个，调用JS的顺序与普通方式相同，都别动态添加JS。

一是将按照jquery mobile-10a2minjs处理过后的样式，来动态添加元素。jquery mobile-10a2minjs处理过后的样式可以通过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/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处理过后的样式，来动态添加元素：

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前端实际最终处理的代码量。

方法二：refresh

其实JQuery Mobile 中早就封装了refresh方法。你只需要对新添加的元素节点refresh一下就可以了。

例如: $("#节点名")listview("refresh");

还是刚才那个函数，采用普通的动态添加元素方法，最后加个refresh就搞定了。

function ShowMyListOK(){//处理根目录文件列表函数  
if( $glb_result == ""){  
alert("返回为空！请重新登录！");  
}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");  
}  
} 

这个方法很好，但是为什么没有早点发现呢？因为jquery mobile-10a2js的源码确实很不好读。本人JS水平有限，看到里面内容后，以为调用里面方法必须创建对象，误解了JQuery的原意。试了半天才搞出来，必须发帖纪录一下这个小成功。

小结：详解关于JQuery Mobile使用心得的内容介绍完了，希望通过本文的学习能对你有所帮助！