popup.js封装
define(['jquery', 'bootstrap'], function($){
var Popup = function(){
};
Popup.prototype = {
init: function(){
var $this = this;
return function(options){
return $this.popup.apply($this, [options]);
};
},
popup: function(options){
return (new Win()).init(options).create();
}
};
var Win = function(){
this.msg = '';
this.level = '';
this.title = '';
this.detail = '';
this.buttons = {};
};
Win.prototype = {
constructor: Win,
init: function(options){
options = $.extend({}, Win.prototype.defaults, typeof options === 'object'?options : {});
this.id = new Date().getTime();
this.level = options.level;
this.title = options.title;
this.msg = options.msg;
this.detail = options.detail;
this.buttons = options.buttons;
this.$element = null;
return this;
},
create: function(){
var $this = this;
var panel_titlehtml = this.detail === null ? ''+this.msg+''
:''+this.msg+'';
var html = ''+
''+
'' +
''+this.title+''+
''+
''+
'' +
'' +
'' +
panel_titlehtml+
''+
''+
''+
''+
this.detail +
'' +
'' +
'' +
''+
''+
'';
for(var prop in this.buttons){
var btn = this.buttons[prop];
if(typeof btn === 'object'){
html += '';
}else{
html += '';
}
}
html+=''+
'';
this.$element = $(html).appendTo('body')
.on('click', '.btn', $.proxy($this.click, $this))
.on('hidden.bs.modal', $.proxy($this.destroy, $this))
.modal({
keyboard: false,
backdrop: 'static'
});
},
destroy: function(event){
this.$element.off('click', '.btn', this.click);
this.$element.off('hidden.bs.modal', this.destroy);
$('#'+this.id).remove();
},
click: function(event){
var $btn = $(event.target);
if(!$btn.is('button')){
$btn = $btn.parents('button');
}
var label = $btn.text();
var btn = this.buttons[label];
var fn = null;
if(typeof btn === 'object'){
fn = btn.callback;
}else{
fn = btn;
}
fn.apply(this, [event]);
}
};
Win.prototype.defaults = {
msg : 'Server internal error',
level : 'danger',
title: 'Server Error',
detail: 'No detail stack trace',
buttons: {
'确定': {
primary: true,
callback: function(event){
this.$element.modal('hide');
}
}
}
};
Popup = function(){
};
Popup.prototype = {
init: function(){
var $this = this;
return function(options){
return $this.popup.apply($this, [options]);
};
},
popup: function(options){
return (new Win()).init(options).create();
}
};
var popup = null;
if(!popup){
popup = (new Popup()).init();
}
return popup;
});
【popup.js封装】可参考博客:http://blog.sina.com.cn/s/blog_66d444d10100krgp.html
推荐阅读
- 2020-04-07vue中Axios的封装和API接口的管理
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- python自定义封装带颜色的logging模块
- jQuery插件
- Realm
- 使用Promise对微信小程序wx.request请求方法进行封装
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- Objective-c
- Swift学习笔记(三)Alamofire二次封装