diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e34af10d05f7515bd413e8fdc05b256e167bead..ebd67d6e56082ee389ee42a7e4c56ec3e2a5bb5d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,14 @@ # Amaze UI Change Log --- +### 2014.12 W3 + +**JS:** + +- `NEW` #283 添加表单验证插件; +- `IMPROVED` Popover 增加大小、颜色样式; + + ### 2014.12 W2 **CSS:** diff --git a/js/ui.popover.js b/js/ui.popover.js index 6d6790ebb49d557234eff71dda58f048860f1d97..bb8a5f4f844cea463aeed308ce4a9896001d4248 100755 --- a/js/ui.popover.js +++ b/js/ui.popover.js @@ -19,6 +19,7 @@ var Popover = function(element, options) { }; Popover.DEFAULTS = { + theme: undefined, trigger: 'click', content: '', open: false, @@ -182,12 +183,20 @@ Popover.prototype.close = function() { Popover.prototype.getPopover = function() { var uid = UI.utils.generateGUID('am-popover'); - return $(this.options.tpl).attr('id', uid); + var theme = []; + + if (this.options.theme) { + $.each(this.options.theme.split(','), function(i, item) { + theme.push('am-popover-' + $.trim(item)); + }); + } + return $(this.options.tpl).attr('id', uid).addClass(theme.join(' ')); }; -Popover.prototype.setContent = function() { +Popover.prototype.setContent = function(content) { + content = content || this.options.content; this.$popover && this.$popover.find('.am-popover-inner').empty(). - html(this.options.content); + html(content); }; Popover.prototype.events = function() { @@ -222,7 +231,7 @@ function Plugin(option) { } if (typeof option == 'string') { - data[option](); + data[option] && data[option](); } }); } diff --git a/less/ui.popover.less b/less/ui.popover.less index 7185c8530220c852e6eff476dc0f6c80d6291961..5c0e6b2f9def65d87bd18ec11032edd1f4d034e5 100644 --- a/less/ui.popover.less +++ b/less/ui.popover.less @@ -25,6 +25,9 @@ @popover-color: @white; @popover-border-radius: @global-radius; @popover-duration: 300ms; +@popover-font-size: @global-font-size; +@popover-sm-font-size: @font-size-sm; +@popover-lg-font-size: @font-size-lg; /* ========================================================================== @@ -42,9 +45,9 @@ color: @popover-color; border: 1px solid @popover-border; display: none; + font-size: @popover-font-size; z-index: @z-index-popover; opacity: 0; - transform: none; transition: opacity @popover-duration; .hook-popover; @@ -57,7 +60,7 @@ .@{ns}popover-inner { position: relative; background: @popover-bg; - padding: 10px; + padding: 8px; z-index: 110; .scrollable(); .hook-popover-inner; @@ -70,7 +73,6 @@ z-index: 100; .caret-up(8px, @popover-bg); overflow: hidden; - .hook-popover-caret; .@{ns}popover-top & { @@ -98,6 +100,53 @@ } +// Modifiers +// ============================================================================= + +.@{ns}popover-sm { + font-size: @popover-sm-font-size; + + .@{ns}popover-inner { + padding: 5px; + } +} + +.@{ns}popover-lg { + font-size: @popover-lg-font-size; +} + +.popover-color-variant(@bg-color: @global-primary) { + border-color: @bg-color; + .@{ns}popover-inner { + background: @bg-color; + } + + .@{ns}popover-caret { + border-bottom-color: @bg-color; + } +}; + +.@{ns}popover-secondary { + .popover-color-variant(@global-primary); +} + +.@{ns}popover-secondary { + .popover-color-variant(@global-secondary); +} + +.@{ns}popover-success { + .popover-color-variant(@global-success); +} + +.@{ns}popover-warning { + .popover-color-variant(@global-warning); +} + +.@{ns}popover-danger { + .popover-color-variant(@global-danger); +} + + // Hooks // =============================================================================