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;}
現在就能實現如下的效果了:
有問題歡迎討論!
相關文章
- jQueryMobile快速入門jQuery
- UE 不修改原始碼實現遮罩控制元件 (Mask Widget)原始碼遮罩控制元件
- 《jQueryMobile入門經典》——2.4 總結jQuery
- 《jQueryMobile入門經典》——2.5 問與答jQuery
- 隱藏JqueryMobile中的Header與FooterjQueryHeader
- qt 設計介面中 scrollarea等子控制元件內部widget佈局方法QT控制元件
- Widget
- jQueryMobile 轉場閃屏之終極解決jQuery
- App WidgetAPP
- vue * !!vue-style-loader!css-loader?VueCSS
- Loader學習,簡析babel-loaderBabel
- Loader 知識梳理(3) 自定義Loader
- SQL LOADERSQL
- Presto改造REST
- spritecow改造
- 【Flutter 1-16】Flutter手把手教程UI佈局和Widget——容器控制元件ContainerFlutterUI控制元件AI
- Widget 基礎
- Flutter Widget and BaldFlutter
- Flutter Widget大全Flutter
- iOS之widgetiOS
- [譯] Java Service Loader 對比 Spring Factories LoaderJavaSpring
- Webpack Loader原始碼導讀之css-loaderWeb原始碼CSS
- Webpack Loader原始碼導讀之less-loaderWeb原始碼
- Webpack Loader原始碼導讀之babel-loaderWeb原始碼Babel
- 《jQueryMobile入門經典》——第2章 使用HTML、CSS和JavaScriptjQueryHTMLCSSJavaScript
- 使用jQueryMobile與HTML5開發WebApp推薦文章jQueryHTMLWebAPP
- Flex Viewer 開發教程(5)Widget與Widget互動FlexView
- webpack系列-loaderWeb
- Loader類理解
- webpack-loaderWeb
- 窺探css-loader與style-loader的作用CSS
- Widget、RenderObject 與 ElementObject
- 15、Flutter Widget - webview;FlutterWebView
- 16、Flutter Widget - PageView;FlutterView
- 2、Flutter Widget - Positioned;Flutter
- 3、Flutter Widget - ImageFilter;FlutterFilter
- 4、Flutter Widget - Transform;FlutterORM
- 5、Flutter Widget - AbsorbPointer;FlutterORB