用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