Skip to content

Commit

Permalink
Dialog render
Browse files Browse the repository at this point in the history
  • Loading branch information
@rickyleung
rickyleung committed Oct 30, 2015
1 parent 24f51b5 commit 1ef8ab4
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 80 deletions.
152 changes: 84 additions & 68 deletions dist/jquery.bizui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2886,16 +2886,23 @@ define('ui/Select',['require','dep/jquery.selectBox'],function(require) {
* @ignore
*/
define('ui/Dialog',['require'],function(require) {
var defaultClass = 'biz-dialog',
currentIndex = 1000;
/**
* Dialog constructor
*
* <iframe width="100%" height="350" src="//jsfiddle.net/bizdevfe/j5agtk3u/embedded/result,js,html/" frameborder="0"></iframe>
* @constructor
* @param {HTMLElement|jQuery} dialog 目标元素
* @param {Object} [options] 参数
* @param {Number} [options.width] 宽度
* @param {Number} [options.height] 高度
* @param {Number|String} [options.width] 宽度
* @param {Number|String} [options.height] 高度
* @param {Array} [options.buttons] 按钮组 {text: '', click: function(event){}, theme: ''}
* @param {Boolean} [options.destroyOnClose] 关闭时是否销毁
* @param {String} [options.skin] 自定义样式
* @param {String} [options.title] 弹窗标题
* @param {Number} [options.zIndex] 弹窗显示登记
*
*/
function Dialog(dialog, options) {
if (dialog instanceof jQuery) {
Expand All @@ -2906,10 +2913,6 @@ define('ui/Dialog',['require'],function(require) {
}
}

if (!isDialog(dialog)) {
return;
}

/**
* @property {HTMLElement} main `dialog`元素
*/
Expand All @@ -2922,95 +2925,118 @@ define('ui/Dialog',['require'],function(require) {

var defaultOption = {
width: 480,
height: 240,
buttons: []
buttons: [],
destroyOnClose: false,
skin: '',
title: ''
};
this.options = $.extend(defaultOption, options || {});
this.init(this.options);
}

var defaultClass = 'biz-dialog';

Dialog.prototype = {
/**
* 初始化
* @param {Object} [options] 参数
* @protected
*/
init: function(options) {
var title = this.$main.attr('title'),
var title = options.title || this.$main.attr('title'),
content = this.$main.html(),
self = this;
this.orginContent = content;

this.$main.hide()
.addClass(defaultClass)
.removeAttr('title')
this.$container = $('<div style="display:none;"></div>');
this.$container.addClass(defaultClass + ' ' + options.skin)
.html([
'<h1 class="biz-dialog-title">',
'<span>', title, '</span>',
'<span class="biz-dialog-close"></span></h1>',
'<div class="biz-dialog-content">', content, '</div>',
'<div class="biz-dialog-content"></div>',
'<div class="biz-dialog-bottom"></div>'
].join(''))
.css({
width: options.width,
height: options.height,
marginLeft: -Math.floor(options.width / 2),
marginTop: -Math.floor(options.height / 2)
marginLeft: -Math.floor(parseInt(options.width, 10) / 2),
})
.after('<div class="biz-mask" style="display:none"></div>')
.on('click', '.biz-dialog-close', function() {
self.close();
});
this.$container.find('.biz-dialog-content').append(this.$main);

var bottom = this.$container.find('.biz-dialog-bottom');
if (options.buttons.length) {
$.each(options.buttons, function(index, button) {
$('<button>' + button.text + '</button>')
.bizButton({
theme: button.theme
})
.click(function(e) {
button.click.call(self, e);
})
.appendTo(bottom);
});
} else {
bottom.remove();
}

this.$main.find('.biz-dialog-content').css({
height: options.height - 150
});

var bottom = this.$main.find('.biz-dialog-bottom');
$.each(options.buttons, function(index, button) {
$('<button>' + button.text + '</button>')
.bizButton({
theme: button.theme
})
.click(function(e) {
button.click.call(self, e);
})
.appendTo(bottom);
});
//把dialog加入到body中，并且设置top和left
//加入mask
this.$container.appendTo('body')
.after($('<div class="biz-mask" style="display:none;"></div>').show());
if (options.height) {
this.$container.css({
height: options.height,
marginTop: -Math.floor(Math.min(parseInt(options.height, 10), $(window).height()) / 2)
});
} else {
this.$container.css({
marginTop: -Math.floor(Math.min(parseInt(this.$container.height(), 10), $(window).height()) / 2)
});
}
},

/**
* 打开
*/
open: function() {
this.$main.next().show();
this.$main.fadeIn();
var index = this.options.zIndex || currentIndex++;
this.$container.next().css({
zIndex: index - 1
}).show();
this.$main.show();
this.$container.css({
zIndex: index
}).fadeIn();
},

/**
* 关闭
*/
close: function() {
this.$main.hide();
this.$main.next().fadeOut();
var rs = true;
if (this.options.beforeClose && typeof(this.options.beforeClose) == 'function') {
rs = this.options.beforeClose();
if (rs === false) { // cancel close dialog
return;
}
}
this.$container.hide();
this.$container.next().fadeOut();
if (typeof this.options.zIndex == 'undefined') {
currentIndex--;
}
if (this.options.destroyOnClose) {
this.destroy();
}
},

/**
* 销毁
*/
destroy: function() {
this.$main.removeClass(defaultClass)
.attr('title', this.$main.find('.biz-dialog-title').text())
.removeAttr('style')
.hide()
.off('click');
this.$main.find('.biz-dialog-bottom button').bizButton('destroy');
this.$main.html(this.orginContent)
.next()
.remove();
this.orginContent = null;
this.$container.find('.biz-dialog-bottom button').bizButton('destroy');
this.$container.next().remove();
this.$main.remove();
this.$container.remove();
}
};

Expand All @@ -3023,20 +3049,18 @@ define('ui/Dialog',['require'],function(require) {
* @static
*/
Dialog.alert = function(options) {
var alert = $('<div style="display:none" class="biz-alert" title="' + options.title + '">' + options.content + '</div>');
var alert = $('<div style="display:none;height:50px;" class="biz-alert" title="' + options.title + '">' + options.content + '</div>');
alert.appendTo('body').bizDialog({
width: 360,
height: 200,
destroyOnClose: true,
buttons: [{
text: options.ok,
click: function() {
alert.bizDialog('destroy').remove();
alert.bizDialog('close');
}
}]
}).next().css({
zIndex: 1002
});
alert.find('.biz-dialog-close').remove();
alert.bizDialog('open');
};

Expand All @@ -3051,38 +3075,30 @@ define('ui/Dialog',['require'],function(require) {
* @static
*/
Dialog.confirm = function(options) {
var confirm = $('<div style="display:none" class="biz-confirm" title="' + options.title + '">' + options.content + '</div>');
var confirm = $('<div style="display:none;height:50px;" class="biz-confirm" title="' + options.title + '">' + options.content + '</div>');
confirm.appendTo('body').bizDialog({
width: 360,
height: 200,
destroyOnClose: true,
buttons: [{
text: options.ok,
click: function() {
confirm.bizDialog('destroy').remove();
confirm.bizDialog('close');
if (options.onOK) {
options.onOK();
}
}
}, {
text: options.cancel,
click: function() {
confirm.bizDialog('destroy').remove();
confirm.bizDialog('close');
},
theme: 'dark'
}]
}).next().css({
zIndex: 1002
});
confirm.find('.biz-dialog-close').remove();
confirm.bizDialog('open');
};

function isDialog(elem) {
return elem.nodeType === 1 &&
elem.tagName.toLowerCase() === 'div' &&
elem.hasAttribute('title');
}

var dataKey = 'bizDialog';

$.extend($.fn, {
Expand Down Expand Up @@ -3116,7 +3132,7 @@ define('ui/Dialog',['require'],function(require) {
break;
default:
this.each(function() {
if (!$(this).data(dataKey) && isDialog(this)) {
if (!$(this).data(dataKey)) {
$(this).data(dataKey, new Dialog(this, method));
}
});
Expand Down
2 changes: 1 addition & 1 deletion dist/jquery.bizui.min.js
View file

Large diffs are not rendered by default.

22 changes: 11 additions & 11 deletions src/ui/Dialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ define(function(require) {
* @param {String} [options.skin] 自定义样式
* @param {String} [options.title] 弹窗标题
* @param {Number} [options.zIndex] 弹窗显示登记
*
*
*/
function Dialog(dialog, options) {
if (dialog instanceof jQuery) {
Expand Down Expand Up @@ -79,7 +79,7 @@ define(function(require) {
this.$container.find('.biz-dialog-content').append(this.$main);

var bottom = this.$container.find('.biz-dialog-bottom');
if(options.buttons.length){
if (options.buttons.length) {
$.each(options.buttons, function(index, button) {
$('<button>' + button.text + '</button>')
.bizButton({
Expand All @@ -98,15 +98,15 @@ define(function(require) {
//加入mask
this.$container.appendTo('body')
.after($('<div class="biz-mask" style="display:none;"></div>').show());
if(options.height){
if (options.height) {
this.$container.css({
height: options.height,
marginTop: -Math.floor(Math.min(parseInt(options.height, 10), $(window).height()) / 2)
})
});
} else {
this.$container.css({
marginTop: -Math.floor(Math.min(parseInt(this.$container.height(), 10), $(window).height()) / 2)
})
marginTop: -Math.floor(Math.min(parseInt(this.$container.height(), 10), $(window).height()) / 2)
});
}
},

Expand All @@ -129,18 +129,18 @@ define(function(require) {
*/
close: function() {
var rs = true;
if(this.options.beforeClose && typeof(this.options.beforeClose) == 'function'){
if (this.options.beforeClose && typeof(this.options.beforeClose) == 'function') {
rs = this.options.beforeClose();
if(rs === false){ // cancel close dialog
if (rs === false) { // cancel close dialog
return;
}
}
this.$container.hide();
this.$container.next().fadeOut();
if(typeof this.options.zIndex == 'undefined'){
if (typeof this.options.zIndex == 'undefined') {
currentIndex--;
}
if(this.options.destroyOnClose){
if (this.options.destroyOnClose) {
this.destroy();
}
},
Expand Down Expand Up @@ -259,4 +259,4 @@ define(function(require) {
});

return Dialog;
});
});

0 comments on commit 1ef8ab4

Please sign in to comment.