diff --git a/src/js/messager.js b/src/js/messager.js index 0db99147ca41947aff32965016eb44b7f2cae226..965b31fb9051958658ed0a7711eff72b5991f8e1 100644 --- a/src/js/messager.js +++ b/src/js/messager.js @@ -6,11 +6,11 @@ * ======================================================================== */ -(function($, window) { +(function($, window, undefined) { 'use strict'; var id = 0; - var template = '
'; + var template = ' '; var defaultOptions = { type: 'default', placement: 'top', @@ -19,6 +19,10 @@ // clear: false, icon: null, close: true, + // actions: [{icon, name, action, title}], + // contentClass: null, + // cssClass: null, + // onAction: function, fade: true, scale: true }; @@ -31,16 +35,63 @@ that.message = (options.icon ? ' ' : '') + message; that.$ = $(template.format(options)).toggleClass('fade', options.fade).toggleClass('scale', options.scale).attr('id', 'messager-' + that.id); - if(!options.close) { - that.$.find('.close').remove(); - } else { - that.$.on('click', '.close', function() { - that.hide(); + + if(options.cssClass) that.$.addClass(options.cssClass); + + var hasCloseAction = false; + var $actions = that.$.find('.messager-actions'); + var appendAction = function(action) { + var $btn = $(''); + if(action.name === 'close') $btn.addClass('close'); + if(action.html !== undefined) { + $btn.html(action.html); + } + if(action.icon !== undefined) { + $btn.append(''); + } + if(action.text !== undefined) { + $btn.append('' + action.text + ''); + } + if(action.tooltip !== undefined) { + $btn.attr('title', action.tooltip).tooltip(); + } + $btn.data('action', action); + $actions.append($btn); + }; + if(options.actions) { + $.each(options.actions, function(idx, action) { + if(action.name === undefined) action.name = idx; + if(action.name == 'close') hasCloseAction = true; + appendAction(action); }); } + if(!hasCloseAction && options.close) { + appendAction({name: 'close', html: '×'}); + } - that.$.find('.messager-content').html(that.message); + that.$.on('click', '.action', function(e) { + var action = $(this).data('action'), result; + if(options.onAction) { + result = options.onAction.call(this, action.name, action, that); + if(result === false) return; + } + if($.isFunction(action.action)) { + result = action.action.call(this, that); + if(result === false) return; + } + that.hide(); + e.stopPropagation(); + }); + + that.$.on('click', function(e) { + if(options.onAction) { + result = options.onAction.call(this, 'content', null, that); + if(result === true) that.hide(); + } + }); + var $content = that.$.find('.messager-content').html(that.message); + if(options.contentClass) $content.addClass(options.cssClass); that.$.data('zui.messager', that); }; @@ -70,11 +121,11 @@ that.$.appendTo(options.parent).show(); if(options.placement === 'top' || options.placement === 'bottom' || options.placement === 'center') { - that.$.css('left', ($(window).width() - that.$.width() - 50) / 2); + that.$.css('left', ($(window).width() - that.$.width()) / 2); } if(options.placement === 'left' || options.placement === 'right' || options.placement === 'center') { - that.$.css('top', ($(window).height() - that.$.height() - 50) / 2); + that.$.css('top', ($(window).height() - that.$.height()) / 2); } that.$.addClass('in'); @@ -172,5 +223,5 @@ } } }); -}(jQuery, window)); +}(jQuery, window, undefined)); diff --git a/src/less/modules/messager.less b/src/less/modules/messager.less index 67c9f3ab1d697a6fc3acbb967719182a07983fb4..b89edf13d4a508822e21f1480ead79a35febc2b4 100644 --- a/src/less/modules/messager.less +++ b/src/less/modules/messager.less @@ -14,9 +14,9 @@ background-color: @color-dark; background-color: rgba(0, 0, 0, 0.8); border-radius: @messager-radius; - padding-right: 50px; max-width: 80%; z-index: 99999; + &:extend(.clearfix all); &.top { top: 20px; @@ -49,6 +49,7 @@ .messager-content { padding: 10px 20px; + float: left; > [class^='icon-'] { display: inline-block; @@ -57,18 +58,21 @@ } .messager-actions { - position: absolute; - right: 15px; - top: 8px; + float: right; > .action { color: #fafafa; - color: rgba(255, 255, 255, 0.6); + color: rgba(255,255,255,.6); background: none; border: none; text-shadow: none; + min-width: 40px; + padding: 0 12px; + height: 40px; + text-align: center; &.close { + padding-bottom: 5px; opacity: 1; font-size: 20px; font-weight: normal; @@ -76,8 +80,11 @@ &:hover { color: #fff; + background: rgba(0,0,0,.1); } } + + .action-icon + .action-text {margin-left: 8px;} } .messager-primary {