fire 的 handlers[i](data);
======================== win.js ==========================================
define(['jquery','jqueryUI'], function($,$UI) {
function win() {
this.cfg = {
width: 500,
height: 300,
title: '系统消息',
content: '',
hasClose: false, //X关闭
hasMask:true, //遮罩层
isDraggable:true, //拖动弹框
dragHandler:null, //拖动
skinClassName:null, //alert皮肤
alertOK:'确定',
handlerOK: null, //OK函数
handlerClose: null, //关闭函数
};
this.handlers={} //自定义事件
}
win.prototype = {
alert: function(cfg) {
var CFG = $.extend(this.cfg, cfg);
var alertBox = $('<div class="alert-box">'+
'<div class="alert-header">'+CFG.title+'</div>'+
'<div class="alert-content">'+CFG.content+'</div>'+
'<input type="button" value="'+CFG.alertOK+'" class="alert-OK"/>'+
'</div>');
alertBox.appendTo('body');
var mask=null,
that=this;
if(CFG.hasMask){
mask=$('<div class="window-mask"></div>');
mask.appendTo('body');
}
$('.alert-OK').click(function() {
alertBox.remove();
mask && mask.remove();
that.fire('alert');
});
if(CFG.handlerOK){
this.on('alert',CFG.handlerOK())
}
alertBox.css({
width: this.cfg.width + 'px',
height: this.cfg.height + 'px',
left: (this.cfg.x || (window.innerWidth - this.cfg.width) / 2) + 'px',
top: (this.cfg.y || (window.innerHeight - this.cfg.height) / 2) + 'px'
});
if(CFG.hasClose){
var close=$('<div class="alert-close">X</div>');
close.appendTo(alertBox);
close.click(function() {
alertBox.remove();
mask && mask.remove();
that.fire('close');
});
}
if(CFG.handlerClose){
this.on('close',CFG.handlerClose())
}
if(CFG.skinClassName){
alertBox.addClass(CFG.skinClassName)
}
if(CFG.isDraggable){
if(CFG.dragHandler){
alertBox.draggable({handle:CFG.dragHandler});
}else{
alertBox.draggable(); // draggable:jquery-ui.js
}
}
},
confirm: function() {
},
prompt: function() {
},
on: function(type, handler) {
if (typeof this.handlers[type] == "undefined") {
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
fire: function(type, data) {
if (this.handlers[type] instanceof Array) {
var handlers = this.handlers[type];
for (var i = 0; i < handlers.length; i++) {
handlers[i](data);
}
}
}
};
return {
win: win
}
})
============================ main.js =================================
require.config({
paths: {
jquery: 'jquery-2.1.0',
// jqueryUI:'jquery-ui',
jqueryUI:'http://code.jquery.com/ui/1.10.4/jquery-ui'
}
});
require(['jquery', 'win'], function($, w) {
$('#alertShow').click(function() {
var win=new w.win();
win.alert({
title:'提示',
content: 'hello',
width: 300,
height: 150,
hasClose:true,//X关闭(是否显示)
alertOK:'OK',
dragHandler:'.alert-header', //拖动
handlerOK:function() {//OK
alert('hello word');
},
handlerClose:function(){//关闭
alert('close');
},
skinClassName:'alert-box2', //皮肤
hasMask:true, //遮罩层
});
win.on('alert',function(){
alert('the second alert handler');
});
win.on('alert',function(){
alert('the third alert handler');
});
win.on('close',function(){
alert('the second alert handler');
});
});
});
======================= html ==========================
<input type="button" value="alert弹框" id="alertShow" />
<script type="text/javascript" data-main="js/main" src="js/require.js"></script>
<style>
body,html{margin: 0;padding:0;}
.window-mask{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 99;
}
.alert-box{
box-shadow: 0 0 20px rgba(0,0,0,0.5);
position: fixed;
border-radius: 10px;
z-index: 100;
background-color: #fff;
}
.alert-OK{
width:50%;
height: 36px;
line-height: 36px;
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
}
.alert-header{
background-color: #e8e8e8;
height: 40px;
line-height: 40px;
text-align: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.alert-content{padding:0 10px;}
.alert-close{
position: absolute;
right: 10px;
top: 6px;
font-size: 20px;
color: #f00;
cursor: pointer;
}
.alert-box2{border:1px solid #44b549;}
.alert-box2 .alert-close{color: #44b549}
</style>
