jqueryMobile Loader widget 控件改造

最近在用jqmobile 做一個混合APP項目時候用到 jqmobile1.4.3提供的Loader Widget控件,但是這個控件本身是一個loading彈出層,這個彈出層彈出之後,使用者還是可以去點選按鈕,重複發送請求,為了防止重複送出,我想了兩種辦法,

1,在loading彈出層彈出之後,讓按鈕不可用.但是form表單裡面的input還是可以點.

2,在loading這一層和body層之間再加上一層,把整個body遮起來,這個放在手機上一點按鈕感覺要閃一下.

現在我的解決方法就這兩種,如果有更好的方法可以M我.

下面我說說第二種怎麼實作的,上圖上代碼.

如上圖,這個登入的按鈕要加 Loader Widget的一些屬性:

<button id="login" type="button" class="ui-btn ui-corner-all" οnclick="result(id)" data-transition="flip" data-rel="dialog"

data-theme="a" data-textonly="false" data-textvisible="true" data-msgtext="Loading..." data-inline="false">

登入

</button>

這些屬性,http://demos.jquerymobile.com/1.4.3/loader/,這個講的很清楚,不明白的可以去看看.

<script type="text/javascript">

function result(id){

console.log($("#date").val());

//因為要用jq #選擇器,拼一個#号作為參數傳過去

var b="#"+id;

addloader(b);

var loginFormData=$('#loginForm').serializeJSON();

$.post("http://192.168.15.211:8080/test/login",loginFormData,function(data){

console.log(data);

var jsonData=eval("("+data+")");

console.log(jsonData.msg);

if(jsonData.flag==0){

//交易成功彈出層消失 按鈕可用

removeLoader();

window.location.href="#pageTwo" target="_blank" rel="external nofollow" ;

}else{

//出現異常彈出層消失 按鈕可用

removeLoader();

$("p strong").html(jsonData.msg);

$("#right").click();

}

});

}

//添加loading彈出層和遮罩層的方法

function addloader(id){

$( document ).on( "click", id, function() {

   var $this = $( this ),

       theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,

       msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,

       textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,

       textonly = !!$this.jqmData( "textonly" );

       html = $this.jqmData( "html" ) || "";

   $.mobile.loading( "show", {

           text: msgText,

           textVisible: textVisible,

           theme: theme,

           disabled:true,

           textonly: textonly,

           html: html

   });

   $("body").append('<div class="overlay"></div>');

});

};

//删除loading和遮罩層的方法

function removeLoader(){

//隐藏彈出層

$.mobile.loading( "hide" );

//删除遮罩層

$("div.overlay").remove();

}

</script>

遮罩層樣式:

//這一句追加在了load控件原有的樣式表最後,表明層級關系

.ui-loader-verbose{z-index:1000;}

.overlay{width:100%;height:100%;position:absolute;background:#000;opacity:0.3;-webkit-opacity:0.3;z-index:999;}

現在就能實作如下的效果了:

有問題歡迎讨論!