在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
分享到:
相关推荐
动态添加css或js链接
css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪...
前端体验设计——HTML5+CSS3终极修炼
CSS3实现的3D元素周期表.效果还算比较绚丽的吧
满了关于HTML 和CSS 方面的书籍,甚至也许已经买过我之前出版的《超越CSS——Web 设计艺术精髓》。那么,为什么你还需要这本书? 这是一本面向那些富有创造力、渴望理解WHEN(何时)、HOW(如何)和WHY(为什么), ...
css 未知高度元素绝对居中终极完美解决方案
CSS设置元素width=100%失效的一种解决方式(该元素的父元素为body)
这是自己毕业从事WEB开发一年以来,自己在工作中遇到的CSS兼容问题及解决办法
一本非常详尽的css参考手册,主要介绍了css的作用、一般语法和术语、@规则、选择符、层叠与特性以及继承、css布局和格式化、各种css属性、html和xhtml之间的差异,以及规避方法、过滤器和各种技巧,适合各级网页设计...
本人从事页面制作总结出来的一些问题的处理办法,包括浏览器兼容问题及解决办法,和一些js小插件
borderGradientcss-borderGradientcss-borderGradientcss-borderGradientcss-borderGradientcss 元素的渐变色练习css 元素的渐变色练习css 元素的渐变色练习css 元素的渐变色练习css 元素的渐变色练习css 元素的渐变...
在css3中,我们使用animation与keyframes结合,可以给元素添加各种各样的动画效果。这篇文章主要介绍了css3实现多个元素依次显示效果,需要的朋友可以参考下
CSS控制按钮显示、动态添加删除行。。。。
[CSS终极参考手册].(美)奥尔森.(美)布赖恩.扫描版
AnimateTransition是一款允许在多个元素之间制作CSS3过渡效果的js插件。该过渡效果插件可以在不同的场合中使用,可以用于制作页面过渡效果,也可以用于制作各种模态窗口。
样式可以是字符串,也可以是通过AJAX获取的字符串。 里面有调用例子。 可以动态的向网页中添加样式。无需通过文件调用
形考任务五 使用 <div> 元素以及CSS样式表对下面的内容进行的布局设计。
TailwindCSS插件,添加伪元素的变体( ::before , ::after , ::first-letter等)。 用法 安装 NPM npm install tailwindcss-pseudo-elements --save-dev 纱 yarn add tailwindcss-pseudo-elements -D 配置 const...
CSS&javascript动态网页设计与制作CSS&javascript动态网页设计与制作CSS&javascript动态网页设计与制作CSS&javascript动态网页设计与制作CSS&javascript动态网页设计与制作CSS&javascript动态网页设计与制作CSS&...
CSS文档流与块级元素,css...........