jquery-mobile之loading加载自定义

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

 1 //打开loading组件

 2 //text(string): 加载提示文字

 3 //str(string): load的背景颜色样式(取值:a,b,c,d)

 4 //flag(boolean): 背景是否透明(取值:true透明,false不透明)

 5 function loadStart(text,str,flag){

 6     if(!text){

 7         text = "加载中...";

 8     }

 9     $(".ui-loader h1").html(text);

10     var _width = window.innerWidth;

11     var _height = window.innerHeight;

12     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>';

13     $("body").append(htmlstr);

14     if(flag){

15         $(".ui-loader").removeClass("ui-loader-verbose").addClass("ui-loader-default");

16     }

17     else{

18         $(".ui-loader").removeClass("ui-loader-default").addClass("ui-loader-verbose");

19     }

20     var cla = "ui-body-"+str;

21     $("html").addClass("ui-loading");

22     var arr = $(".ui-loader").attr("class").split(" ");

23     var reg = /ui-body-[a-f]/;

24     for(var i in arr){

25         if(reg.test(arr[i])){

26             $(".ui-loader").removeClass(arr[i]);

27         }

28     }

29     $(".ui-loader").addClass(cla);

30 }

31 //结束loading组件

32 function loadStop(){

33     $("html").removeClass("ui-loading");

34     $(".loader-bg").remove();

35 }

 

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

 

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