/** * 弹框公共组件 * @author: xuqi<qi.xu@yoho.cn> * @date: 2016/2/24 */ var $ = require('yoho-jquery'), Handlebars = require('yoho-handlebars'); var defaultOptions = { mask: true, closeIcon: true, refreshOnClose: false }; var tpl = '<div class="yoho-dialog {{className}} hide">' + '{{#if closeIcon}}' + '<span class="close">' + '<i class="iconfont"></i>' + '</span>' + '{{/if}}' + '<div class="content">' + '{{{content}}}' + '</div>' + '<div class="btns">' + '{{# btns}}' + '<span {{#if id}}id="dialog-{{id}}"{{/if}} class="btn{{#each btnClass}} {{.}}{{/each}}">' + '{{name}}' + '</span>' + '{{/ btns}}' + '</div>' + '</div>'; var tplFn = Handlebars.compile(tpl); // 背景蒙版 function createMask() { if ($('.body-mask').length === 0) { $('body').append('<div class="body-mask hide"></div>'); } return $('.body-mask').css({ height: $(document).height(), width: $(document).width() }); } function createDialog(data) { var $d = $(tplFn(data)); $('body').append($d); return $d; } function cerateSubContent(text) { var $yohoDialog = $('.yoho-dialog'), subContent = '<p class="sub-content">' + text + '</p>'; if ($yohoDialog && $yohoDialog.length > 0) { $yohoDialog.find('.content').after(subContent); } } function Dialog(options) { var opt = $.extend({}, defaultOptions, options); var that = this, i; // 实现继承时,只返回实例,不生成html if (opt.inherit) { return this; } if (opt.mask) { that.$mask = createMask(); } that.$el = createDialog(opt); if (opt.subContent) { cerateSubContent(opt.subContent); } if (opt.subContents) { for (i = opt.subContents.length - 1; i >= 0; i--) { cerateSubContent(opt.subContents[i]); } } // 绑定x关闭事件 that.$el.find('.close').click(function() { that.close(); if (options.refreshOnClose) { window.location.reload(); } }); // 绑定btn关闭事件 that.$el.find('.btn-close').click(function() { that.close(); }); function bindBtnEvt(index) { that.$el.find('#dialog-' + opt.btns[index].id).on('click', function() { opt.btns[index].cb && opt.btns[index].cb(); }); } // 绑定按钮事件 if (opt.btns) { for (i = 0; i < opt.btns.length; i++) { bindBtnEvt(i); } } } Dialog.prototype.close = function() { this.$mask && this.$mask.addClass('hide'); this.$el && this.$el.remove(); }; Dialog.prototype.show = function() { this.$mask && this.$mask.removeClass('hide'); this.$el && this.$el.removeClass('hide').css({ 'margin-top': -this.$el.outerHeight() / 2, 'margin-left': -this.$el.outerWidth() / 2 }); return this; }; exports.Dialog = Dialog; // Alert function Alert(content) { var that = this; var option = { content: content, className: 'alert-dialog', btns: [ { id: 'alert-sure', btnClass: ['alert-sure'], name: '确定', cb: function() { that.close(); } } ] }; Dialog.call(this, option); } Alert.prototype = new Dialog({ inherit: true }); Alert.prototype.constructor = Alert; exports.Alert = Alert; // Confirm function Confirm(opt) { var that = this; var option = { content: opt.content, className: 'confirm-dialog', btns: [ { id: 'confirm-sure', btnClass: ['confirm-sure'], name: '确定', cb: opt.cb }, { id: 'confirm-cancel', btnClass: ['confirm-cancel'], name: '取消', cb: function() { that.close(); } } ] }; Dialog.call(this, option); } Confirm.prototype = new Dialog({ inherit: true }); Confirm.prototype.constructor = Confirm; exports.Confirm = Confirm;