这个问题在之前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 += "οnclick=\"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 += "οnclick=\"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'>" +




if($obj[i].wtype == "dir"){//文件夹
onelist += "οnclick=\"GetShowMyList(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a>" +











}else{//非文件夹直接下载
onelist += "οnclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a>" +











}
}

 

瞧这多了多少代码啊!不过这也是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 != ""){

if($obj[i].wtype == "dir"){//文件夹
onelist += "οnclick=\"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 += "οnclick=\"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的原意。试了半天才搞出来,必须发帖纪录一下这个小成功。

(尝试我动态添加了radio元素后无法渲染效果,


加载代码为$("#list").append(list).find("li:last");用了 $.mobile.initializePage(),$('#page').trigger('create'),还有$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");均不成功)