JQeryMobile的UI界面,其标签首先经过jquery.mobile-1.0a2.min.js的处理(你可以用chrome的审查元素功能,看到事实上显示的页面中已经由JS添加许多新标签和class,而不仅仅是原来你写的那点标签),然后再进行css布局。因此,当你的页面与后台异步传输获得数据的时候,返回的内容通过append插入页面后,往往没有相应的CSS效果。这个时候我们就需要动态加载jquery.mobile-1.0a2.min.js,即在异步传输获得数据后,再读处理页面的jquery.mobile-1.0a2.min.js。
具体如下:
function LoadJs(file){ //动态调用JS文件函数
var head = $('head').remove('#loadScript');
$("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type:'text/javascript',id:'load'}).appendTo(head);
}
function getData(type, url, argname1, arg1, argname2, arg2, nextfunction){
//采用XMLHttpRequest方法向服务器提供参数,获得数据
//参数定义:类型,调用的后台页面,参数1的名称,参数1的值,参数2的名称,参数2的值,返回结果后执行的下一个函数名
var $xmlhttp, $result;
$xmlhttp = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest) {
try{
$xmlhttp = new XMLHttpRequest();
} catch(e) {
$xmlhttp = false;
}
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
try {
$xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
$xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
$xmlhttp = false;
}
}
}
$xmlhttp.open(type, url, true); //异步调用
$xmlhttp.setRequestHeader(argname1, arg1);//将参数定义在header里
$xmlhttp.setRequestHeader(argname2, arg2);
$xmlhttp.onreadystatechange = function()
{
if ( $xmlhttp.readyState == 4 && $xmlhttp.status == 200 ){
$result = $xmlhttp.responseText; //得到返回信息
$glb_result = $result;
eval(nextfunction);//执行下一个函数
}else{
//result = xmlhttp.status;
}
}
$xmlhttp.send('USERNAME=user1&PASSWORD=123456');//异步发送,这里send的内容无意义
}
function GetShowMyList()//获取根目录文件列表函数
{
var authcode = GetRequest();
$glb_authcode = authcode; //保存为全局变量
var $url = 'http://222.31.76.184/rest.php?case=showMyList';
getData("get", $url, "AUTHCODE", authcode, "", "", "ShowMyListOK()");
}
function ShowMyListOK(){//处理根目录文件列表函数
if( $glb_result == ""){
alert("密码或用户名有错!");
}else{
//alert("成功: "+$glb_result);
var $obj = jQuery.parseJSON($glb_result);
$.each( $obj, function(i, n){
if( $obj[i].wname != ""){
var onelist = "<li><img src='stylesheets/images/file_icon/" + SwitchIcon($obj[i].wext) + "' class='ui-li-icon'/><a href='#' onclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + $obj[i].wsize + "B</span><a href='dialog/operatefile.html' >操作</a></li>";
$("#wlist").append(onelist);
}
});
LoadJs("js/jquery.mobile-1.0a2.min.js");//处理成功后再调用jquery.mobile的JS函数对页面内容进行处理
}
}
http://hi.baidu.com/%CE%F7%B1%B1%C5%DD%C3%E6%CD%F5/blog/item/ca3f507810d8d6ff2e73b3cd.html
分享到:
相关推荐
jquery仿WebQQ菜单ui界面
jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库
该资源包含了一个简单的实用jquery实现的异步传输数据到服务器的demo,简单易懂。可以参考博客http://blog.csdn.net/mockingbirds/article/details/46671509
jQuery手机端响应式聊天窗口界面代码,jQuery手机端响应式聊天窗口界面代码
jQuery组态图库ui界面代码
jQuery的UI界面例子,还不错,共享下
jquery日期表UI界面设计
jquery-ui-1.8.23.custom.zip,jquery可视频界面UI库
jquery仿WebQQ菜单ui界面.zip
Jquery Ui 后台模板设计,后台操作性东西
jquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-ui
jQuery组态图库ui界面代码是一款可以自由编辑设计的组态图,最左边是工具箱,可以拖动里面的工具放置中间画布上,点击预览可以显示当前的设计效果,最右边的属性是对组件的编辑,选中某个组件可进行编辑。
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
使用jquery异步请求方式发送数据,几种方式
jquery异步加载页面,适合用于选项卡页面。
Myeclipse编写的JQuery实现无刷新异步上传下载文件,关于如何部署项目到tomcat服务器请自己查找资料。
最新官方jQuery UI插件 主流特效Demo,绝不含糊。 好东西不需要过多的言辞修饰,下了就知道! 所有效果说明: 基本的鼠标互动: 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种...
jqueryui界面框架_sitemesh布局框架
html后台管理界面模板 一个基于JQuery的后台管理UI界面,技术栈Html、Css、JavaScript、JQuery
有“浏览”模式和“测试”模式。 浏览模式下面,可以通过上一题、下一题按钮查看题目(含题干、答案选项、参考答案、答案解析、章节),也可以 输入题号,按回车直接跳转到该题号。...测试模式下不抽题、不限时