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

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

有問題歡迎討論!