WEUI应用，用JS封装常用信息提示的弹层—Toast
***WEUI应用，用JS封装常用信息提示的弹层—Toast 这样可以方便调用，而且文字可以自定义；*
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<link rel="stylesheet" href="style/weui.min.css"/>
<link rel="stylesheet" href="example/example.css"/>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).on("click","#showToast",function(){
//toast();
toast("我的自定义");
});
$(document).on("click","#showLoadingToast",function(){
//loadingToast();
loadingToast(自定义文字);
setTimeout(function(){
$(#loadingToast).fadeOut(fast);
},1800);
});
function toast(){
var msg;
arguments[0] ? msg = arguments[0] : msg = 已完成;
var toast;
toast =
<div id="toast" style="display:none;">
<div class="weui_mask_transparent"></div>
<div class="weui_toast">
<i class="weui_icon_toast"></i>
<p class="weui_toast_content"> + msg + </p>
</div>
</div>
;
if(!$(#toast).length){
$(body).append(toast);
}else{
$(#toast.weui_toast_content).html(msg);
}
$(#toast).fadeIn(fast,function(){
setTimeout(function(){
$(#toast).fadeOut(fast);
},800);
});
}
function loadingToast(){
var msg;
arguments[0] ? msg = arguments[0] : msg = 数据加载中 ;
var loadingToast;
loadingToast =
<div id="loadingToast" class="weui_loading_toast" style="display:none;">
<div class="weui_mask_transparent"></div>
<div class="weui_toast">
<div class="weui_loading">
<div class="weui_loading_leaf weui_loading_leaf_0"></div>
<div class="weui_loading_leaf weui_loading_leaf_1"></div>
<div class="weui_loading_leaf weui_loading_leaf_2"></div>
<div class="weui_loading_leaf weui_loading_leaf_3"></div>
<div class="weui_loading_leaf weui_loading_leaf_4"></div>
<div class="weui_loading_leaf weui_loading_leaf_5"></div>
<div class="weui_loading_leaf weui_loading_leaf_6"></div>
<div class="weui_loading_leaf weui_loading_leaf_7"></div>
<div class="weui_loading_leaf weui_loading_leaf_8"></div>
<div class="weui_loading_leaf weui_loading_leaf_9"></div>
<div class="weui_loading_leaf weui_loading_leaf_10"></div>
<div class="weui_loading_leaf weui_loading_leaf_11"></div>
</div>
<p class="weui_toast_content"> + msg + </p>
</div>
</div>
;
if(!$(#loadingToast).length){
$(body).append(loadingToast);
}else{
$(#loadingToast.weui_toast_content).html(msg);
}
$(#loadingToast).fadeIn(fast);
}
</script>
</head>
<body ontouchstart>
<div class="bd">
<p class="page_title">Toast</p>
</div>
<div class="bd spacing">
<div class="weui_cells">
<div class="weui_cell">
<button href="javascript:;" class="weui_btn weui_btn_primary" id="showToast">点击弹出Toast</button>
</div>
<div class="weui_cell">
<a href="javascript:;" class="weui_btn weui_btn_primary" id="showLoadingToast">点击弹出Loading Toast</a>
</div>
</div>
</div>
</body>
</html>
下一篇：
用Python在二维平面拟合圆