jquery-mobile之loading加载自定义

用jquery-mobile的时候,我们发现文档中loading是直接通过标签属性进行渲染,封装的函数必须通过点击按钮才能执行。而实际运用中,我们的加载开始和结束可能不需要点击,而是通过某个函数调用直接执行。为了达到这种效果,我写了2个函数,只要执行这两个函数即可达到loadingstart和loadingstop的效果,并且进行了优化,实现开始loading的时候,页面任何地方都不可点击,直至loadingstop,函数用法如下:

 //打开loading组件
//text(string): 加载提示文字
//str(string): load的背景颜色样式(取值:a,b,c,d)
//flag(boolean): 背景是否透明(取值:true透明,false不透明)
function loadStart(text,str,flag){
if(!text){
text = "加载中...";
}
$(".ui-loader h1").html(text);
var _width = window.innerWidth;
var _height = window.innerHeight;
var htmlstr = '<div style="width:'+_width+'px;height:'+_height+'px;position:fixed;top:0px;left:0px;opacity:0.1;z-index:99999" class="loader-bg"></div>';
$("body").append(htmlstr);
if(flag){
$(".ui-loader").removeClass("ui-loader-verbose").addClass("ui-loader-default");
}
else{
$(".ui-loader").removeClass("ui-loader-default").addClass("ui-loader-verbose");
}
var cla = "ui-body-"+str;
$("html").addClass("ui-loading");
var arr = $(".ui-loader").attr("class").split(" ");
var reg = /ui-body-[a-f]/;
for(var i in arr){
if(reg.test(arr[i])){
$(".ui-loader").removeClass(arr[i]);
}
}
$(".ui-loader").addClass(cla);
}
//结束loading组件
function loadStop(){
$("html").removeClass("ui-loading");
$(".loader-bg").remove();
}

提醒:由于本函数基于jquery和jquery-mobile,使用函数前请先加载jquery和jquery-mobile(js、css、image)。

转载请注明:http://www.tea119.com

上一篇:C/S与B/S的区别


下一篇:使用Connetion的属性RetainSameConnection