日期:2014-05-17  浏览次数:20711 次

动态添加元素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>" +