最近在用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>

這些屬性,Loader - jQuery Mobile Demos,這個講的很清楚,不明白的可以去看看.

<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";
}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>

遮罩層樣式: