Web笔记-layerui的基本使用及JavaScript回调函数的写法
程序员文章站
2023-12-27 08:53:34
...
程序运行截图如下：
第一个按钮按下后：
第二个按钮按下后：
然后回调一个函数，这个函数调用系统自带的alert。
使用layerui的目的是为了统一弹窗的风格，因为不同浏览器alert的位置大小，风格不一样。
程序结构如下：
相关源码如下：
index.html
<html>
<head>
<title>layer</title>
<script src="jquery.min.js"></script>
<script src="./layer/layer.js"></script>
<script src="common.js"></script>
</head>
<body>
<button class="do-test">测试</button>
<button class="do-test2">测试</button>
<script src="test.js"></script>
</body>
</html>common.js
;
var common_ops = {
alert:function( msg ,cb){
layer.alert( msg,{
yes:function( index ){
if( typeof cb == "function" ){
cb();
}
layer.close( index );
}
} );
}
};test.js
;
var member = {
init:function(){
this.eventBind();
},
eventBind:function(){
$(".do-test").click(function(){
common_ops.alert("第一个 common_ops.alert");
//这是一个callback
var callback = function(){
alert("alert弹窗")
}
//第二个
//common_ops.alert("第二个 common_ops.alert", callback);
})
}
};
var member2 = {
init:function(){
this.eventBind();
},
eventBind:function(){
$(".do-test2").click(function(){
//这是一个callback
var callback = function(){
alert("alert弹窗")
}
//第二个
common_ops.alert("第二个 common_ops.alert", callback);
})
}
};
$(document).ready( function(){
member.init();
member2.init();
});