JqueryMobile 动态添加元素css丢失的终极解决办法
来源:互联网 发布:金缕玉衣知乎 编辑:程序博客网 时间:2024/05/01 18:48
在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");
}
}
- JqueryMobile 动态添加元素css丢失的终极解决办法
- JqueryMobile使用心得(4)动态添加元素css丢失的终极解决办法
- jquerymobile动态添加元素之后
- JqueryMobile 动态添加元素cs…
- jquerymobile动态添加元素之后样式刷新
- jquerymobile动态添加元素之后有些不能被正确渲染的解决方法:
- jqueryMobile 动态添加元素,展示刷新视图方法
- jquerymobile动态添加元素之后不能正确渲染解决方法
- jquerymobile动态添加dom
- Windows XP 丢失还原点的终极解决办法
- jQueryMobile应用中Ajax重构listview后样式丢失的解决办法
- js为元素动态添加css代码
- 动态添加js、css、meta元素
- javascript动态添加删除select中的options元素的又一解决办法
- 动态添加dom元素(innerHTML方式)时focus()在第二次时会失效的解决办法
- EasyUI中,使用jquery或者js动态添加元素,验证失效的解决办法
- css 针对ie6 hank 兼容的终极解决办法
- JqueryMobile 动态添加内容, 样式没有按照JM的样式展现问题
- LINQ基础
- 使用Intel编译器(6)SSA(2)SSA典型问题类型
- OpenCV学习笔记(四十二)——Mat数据操作之普通青年、文艺青年、暴力青年
- js各种对象详解
- ORA-12541:TNS:无监听程序
- JqueryMobile 动态添加元素css丢失的终极解决办法
- 冒泡排序法
- Couldn't perform the operation rollback: You can't perform any operations on this connection. It has
- js精髓
- Beej’s Guide Network to Programming 系列连载12
- 玩转App.Config
- 在Excel表格中合并列
- python发邮件
- Python2/3 中的异常