基于YUI3的Dialog
先看Demo
主要用到了类的继承，YUI3的overlay、plugin组件
/**
* A YUI Dialog widget
* @class Dialog
* @namespace Y.Dialog
* @author kongyan@taobao.com
*/
YUI.add(’dialog’, function(Y){
//默认配置
var defaultConfig = {
anim: false,
width: ‘320px’,
height: ‘160px’,
duration: 0.5,
yesText: ‘确定’,
noText: ‘关闭’,
opacity: 0.5,
zIndex: 1000,
draggable: true,
modal: true
},
HEAD_STR = ‘<div class=”dialog-hd”><h3>{title}</h3><a class=”close” href=”#close”>关闭</a></div>’,
BODY_STR = ‘<div class=”dialog-bd”>{body}</div>’,
FOOTER_STR_ALERT = ‘<div class=”dialog-ft”><input class=”dialog-ok” type=”button” value=”{yesText}” /></div>’,
FOOTER_STR_CONFIRM = ‘<div class=”dialog-ft”><input class=”dialog-ok” type=”button” value=”{yesText}” /> <input class=”dialog-no” type=”button” value=”{noText}” /></div>’,
FOOTER_STR_BOX = ”;
//弹层基类
function overlayBase(title, body, cfg){
this.overlay = new Y.Overlay({
width: cfg.width,
height: cfg.height,
headerContent: Y.substitute(HEAD_STR, {title: title}),
bodyContent: Y.substitute(BODY_STR, {body: body}),
footerContent: cfg.foot,
centered: true,
shim: cfg.shim,
zIndex: cfg.zIndex
});
this.cfg = cfg;
this.render();
}
Y.mix(overlayBase.prototype, {
close: function(){
this.overlay.hide();
this.getNode(’box’).remove();
this.removeMask();
},
getNode: function(nodestr){
switch(nodestr){
case ‘box’:
return this.overlay.get(’boundingBox’);
break;
case ‘header’:
return this.overlay.getStdModNode(Y.WidgetStdMod.HEADER);
break;
case ‘body’:
return this.overlay.getStdModNode(Y.WidgetStdMod.BODY);
break;
case ‘footer’:
return this.overlay.getStdModNode(Y.WidgetStdMod.FOOTER);
break;
}
},
addMask: function(){
if(Y.one(’#dialog-mask’))return;
Y.one(’body’).append(’<div id=”dialog-mask” style=”position:absolute;top:0;left:0; background: #666; z-index: 100; width:’+Y.one(’document’).get(’docWidth’)+’px; height:’+Y.one(’document’).get(’docHeight’)+’px; opacity:’+this.cfg.opacity+’; filter:alpha(opacity=’+Math.floor(this.cfg.opacity*100)+’)”></div>’);
},
removeMask: function(){
if(Y.one(’#dialog-mask’)){
Y.one(’#dialog-mask’).remove();
}
},
render: function(){
var _s = this;
if(this.cfg.modal){
this.addMask();
}
this.overlay.render();
if(this.cfg.anim){
this.overlay.plug(AnimPlugin, {duration: this.cfg.duration});
}
if(this.cfg.draggable){
this.getNode(’header’).setStyle(’cursor’, ‘move’);
this.getNode(’box’).plug(Y.Plugin.Drag);
this.getNode(’box’).dd.addHandle(’.yui-widget-hd’);
}
this.getNode(’header’).query(’.close’).on(’click’, function(e){
e.halt();
_s.close();
});
this.addListener();
},
addListener: function(){
}
});
//alertDialog-派生自overlayBase
function alertDialog(title, body, cfg){
var cfg = Y.merge(defaultConfig, cfg||{});
cfg.foot = Y.substitute(FOOTER_STR_ALERT, {yesText: cfg.yesText});
alertDialog.superclass.constructor.apply(this, [title, body, cfg]);
}
Y.extend(alertDialog, overlayBase, {
addListener: function(){
var _s = this;
this.getNode(’footer’).query(’.dialog-ok’).on(’click’, function(e){
_s.close();
if(_s.cfg.yescallback){
_s.cfg.yescallback();
}
});
}
});
//confirmDialog-派生自overlayBase
function confirmDialog(title, body, cfg){
var cfg = Y.merge(defaultConfig, cfg||{});
cfg.foot = Y.substitute(FOOTER_STR_CONFIRM, {yesText: cfg.yesText, noText: cfg.noText});
confirmDialog.superclass.constructor.apply(this, [title, body, cfg]);
}
Y.extend(confirmDialog, overlayBase, {
addListener: function(){
var _s = this;
this.getNode(’footer’).query(’.dialog-ok’).on(’click’, function(e){
_s.close();
if(_s.cfg.yescallback){
_s.cfg.yescallback();
}
});
this.getNode(’footer’).query(’.dialog-no’).on(’click’, function(e){
_s.close();
if(_s.cfg.nocallback){
_s.cfg.nocallback();
}
});
}
});
//boxDialog-派生自overlayBase
function boxDialog(title, body, cfg){
var cfg = Y.merge(defaultConfig, cfg||{});
cfg.foot = Y.substitute(FOOTER_STR_BOX, {});
boxDialog.superclass.constructor.apply(this, [title, body, cfg]);
}
Y.extend(boxDialog, overlayBase, {
addListener: function(){
}
});
var Dialog = {
alert: alertDialog,
confirm: confirmDialog,
box: boxDialog
};
Y.Dialog = Dialog;
}, ‘3.0.0′, {requires: ['overlay', 'dd-plugin', 'plugin', 'substitute']});
