动态添加元素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><imgsrc='stylesheets/images/file_icon/"+SwitchIcon($obj[i].wext)+"'class='ui-li-icon'/><ahref='#'";
if($obj[i].wtype=="dir"){//文件夹
onelist+="onclick=\"GetShowMyList(\'"+$obj[i].wid+"\')\">"+$obj[i].wname+"</a><spanclass='ui-li-count'>"+CountSize($obj[i].wsize)+"</span><ahref='dialog/operatefile.html'>操作</a></li>";
}else{//非文件夹直接下载
onelist+="onclick=\"download(\'"+$obj[i].wid+"\')\">"+$obj[i].wname+"</a><spanclass='ui-li-count'>"+CountSize($obj[i].wsize)+"</span><ahref='dialog/operatefile.html'>操作</a></li>";
按照jquery.mobile-1.0a2.min.js处理过后的样式,来动态添加元素:
onelist="<liclass='ui-li-has-iconui-btnui-btn-icon-rightui-liui-li-has-altui-btn-up-c'role='option'tabindex='0'data-theme='c'>"+
"<divclass='ui-btn-inner'>"+
"<divclass='ui-btn-text'>"+
"<imgclass='ui-li-iconui-li-thumb'src='stylesheets/images/file_icon/"+SwitchIcon($obj[i].wext)+"'/>"+
"<aclass='ui-link-inherit'href='#'";
if($obj[i].wtype=="dir"){//文件夹
onelist+="onclick=\"GetShowMyList(\'"+$obj[i].wid+"\')\">"+$obj[i].wname+"</a>"+
"<spanclass='ui-li-countui-btn-up-cui-btn-corner-all'>"+CountSize($obj[i].wsize)+"</span>"+
"<aclass='ui-li-link-altui-btnui-btn-up-c'href='dialog/operatefile.html'title='操作'data-theme='c'>"+
"<spanclass='ui-btn-inner'>"+
"<spanclass='ui-btn-text'></span>"+
"<spanclass='ui-btnui-btn-up-dui-btn-icon-notextui-btn-corner-allui-shadow'data-theme='d'>"+
"<spanclass='ui-btn-innerui-btn-corner-all'>"+
"<spanclass='ui-iconui-icon-gearui-icon-shadow'></span>"+
"</span>"+
"</span>"+
"</span>"+
"</a></div></div></li>";
}else{//非文件夹直接下载
onelist+="onclick=\"download(\'"+$obj[i].wid+"\')\">"+$obj[i].wname+"</a>"+
"<spanclass='ui-li-countui-btn-up-cui-btn-corner-all'>"+CountSize($obj[i].wsize)+"</span>"+
"<aclass='ui-li-link-altui-btnui-btn-up-c'href='dialog/operatefile.html'title='操作'data-theme='c'>"+
"<spanclass='ui-btn-inner'>"+
"<spanclass='ui-btn-text'></span>"+
"<spanclass='ui-btnui-btn-up-dui-btn-icon-notextui-btn-corner-allui-shadow'data-theme='d'>"+
"<spanclass='ui-btn-innerui-btn-corner-all'>"+
"<spanclass='ui-iconui-icon-gearui-icon-shadow'></span>"+
"</span>"+
"</span>"+
"</span>"+
"</a></div></div></li>";
}
}
瞧这多了多少代码啊!不过这也是JueryMobileUI前端实际最终处理的代码量。
方法二:refresh
其实JueryMobile中早就封装了refresh方法。你只需要对新添加的元素节点refresh一下就可以了。
例如:$("#节点名").listview("refresh");
还是刚才那个函数,采用普通的动态添加元素方法,最后加个refresh就搞定了。
functionShowMyListOK(){//处理根目录文件列表函数
if($glb_result==""){
alert("返回为空!请重新登录!");
}else{
//alert("成功:"+$glb_result);
$("#wlist").empty();
var$obj=jQuery.parseJSON($glb_result);
varonelist="";
$.each($obj,function(i,n){
if($obj[i].wname!=""){
onelist="<li><imgsrc='stylesheets/images/file_icon/"+SwitchIcon($obj[i].wext)+"'class='ui-li-icon'/><ahref='#'";
if($obj[i].wtype=="dir"){//文件夹
onelist+="onclick=\"GetShowMyList(\'"+$obj[i].wid+"\')\">"+$obj[i].wname+"</a><spanclass='ui-li-count'>"+CountSize($obj[i].wsize)+"</span><ahref='dialog/operatefile.html'>操作</a></li>";
}else{//非文件夹直接下载
onelist+="onclick=\"download(\'"+$obj[i].wid+"\')\">"+$obj[i].wname+"</a><spanclass='ui-li-count'>"+CountSize($obj[i].wsize)+"</span><ahref='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
相关推荐
<sentence id="1" emotion_tag="N">三八节下午路过中牟县~见到很多美女~手执鲜花[鲜花]~一打听~这里不仅美女如云~而且是千古笫一帅哥潘安的故里。。。&