(function ($) {
/**
* 按钮控件。可以设置不同的按钮风格。
*
* @example
* var $div = $('<div>').appendTo('body');
* var button = new FR.QuickButton({
* renderEl : $div,
* text : '按钮小学生',
* decoration : 'line-through',
* handler : function() {alert('我是一个小学生！')}
* });
*
* @class FR.QuickButton
* @extends FR.Widget
*
* @cfg {JSON} options 配置属性
* @cfg {'center'/'left'/'right'} [options.alignment='center'] 文字对齐方式
* @cfg {String} options.text 按钮上的文字
* @cfg {String} [options.icon] 按钮的图标。形如: css:fr-btn-icon获取直接fr-btn-icon
* @cfg {String} [options.iconPath] 按钮的图标路径
* @cfg {Number} [options.iconWidth=24] 图标的宽度
* @cfg {Number} [options.iconHeight=16] 图标的高度
* @cfg {Number} [options.width=80] 按钮的宽度
* @cfg {Number} [options.height=28] 按钮的高度
* @cfg {'blue'/'gray'/'green'} [options.style='blue'] 按钮的样式
* @cfg {String} [options.fontfamily] 字体类型
* @cfg {String} [options.fontstyle] 字体样式
* @cfg {String} [options.fontweight] 字体粗细
* @cfg {String} [options.fontsize] 字体大小，形如 12px
* @cfg {'none'/'underline'/'overline'/'line-through'/'inherit'} [options.decoration] 文字的修饰类型
* @cfg {String} [options.color] 文字的颜色
*/
FR.QuickButton = FR.extend(FR.Widget, /**@class FR.QuickButton*/{
/**
* @private
*/
_defaultConfig: function () {
return $.extend(FR.QuickButton.superclass._defaultConfig.apply(this, arguments), {
baseCls: 'fr-core-btn',
alignment: "center",
text: null,
icon: null,
iconPath: null,
width: 80,
height: 28,
iconWidth: 24,
iconHeight : 16,
style: null //可以有gray,green和blue共3种样式
});
},
/**
* @private
*/
_init: function () {
FR.QuickButton.superclass._init.apply(this, arguments);
var opts = this.options;
var self = this;
// 默认样式为gray，如果设置了样式，检查其是否是合法样式
var defaultStyle = "gray";
$.each(["gray", "green", "blue"], function (i, item) {
if (opts.style && item == opts.style.toLowerCase()) {
defaultStyle = opts.style.toLowerCase();
}
});
var hoverCls = 'fr-core-btn-hover' + '-' + defaultStyle;
this.element.addClass("fr-core-btn-style-" + defaultStyle);
this.$inner = $("<div class='fr-core-btn-inner'></div>").appendTo(this.element);
/**
* @property {jQuery} $text 显示按钮文字的dom对象
*/
this.$text = $("<span class='fr-core-btn-text' onselectstart='return false'></span>").appendTo(this.$inner);
this._initTextFont();
this.$text.css({textAlign: opts.alignment});
if (opts.text) {
this.$text.text(opts.text);
}
opts.iconWidth = (opts.icon || opts.iconPath) ? opts.iconWidth : 0;
if (opts.iconWidth > 0) {
/**
* @property {jQuery} $icon 显示按钮图标的dom对象
*/
this.$icon = $("<span class='fr-core-btn-icon'></span>").css({
position: 'absolute',
width: opts.iconWidth,
height : opts.iconHeight,
top: 0,
left: 0}).appendTo(this.$inner);
if (opts.icon) {
if (opts.icon.indexOf("css:") != -1) {
opts.icon = opts.icon.substring(4);
}
this.$icon.addClass(opts.icon);
} else if (opts.iconPath) {
this.$icon.css({
background : "url('" + opts.iconPath + "') no-repeat center"
});
}
}
this.$text.css({left: opts.iconWidth});
this.doResize({width : opts.width, height: opts.height});
if ($.isFunction(opts.handler)) {
this.on(FR.Events.CLICK, opts.handler.createDelegate(opts.scope || this));
}
this.element.hover(function(){
$(this).addClass(hoverCls);
}, function(){
$(this).removeClass(hoverCls);
});
this.$inner.click(function(e){
self.fireEvent(FR.Events.CLICK, e);
});
},
/**
* 初始化按钮上的文字样式
* @private
*/
_initTextFont: function () {
var opts = this.options;
if (opts.color) {
this.$text.css('color', opts.color);
}
if (opts.decoration) {
this.$text.css("text-decoration", opts.decoration);
}
if (opts.fontsize) {
this.$text.css('fontSize', opts.fontsize);
}
if (opts.fontweight) {
this.$text.css('fontWeight', opts.fontweight);
}
if (opts.fontstyle) {
this.$text.css('fontStyle', opts.fontstyle);
}
if (opts.fontfamily) {
this.$text.css('fontFamily', opts.fontfamily);
}
},
setValue: function (v) {
if (!FR.isEmpty(v)) {
this.$text.text(v);
}
},
getValue: function () {
return this.$text.text();
},
setText: function (t) {
this.setValue(t);
},
getText: function () {
return this.getValue();
},
doResize: function (give) {
var opts = this.options;
if (give) {
if (give.width) {
opts.width = give.width;
}
if (give.height) {
opts.height = give.height;
}
if (give.left != null) {
opts.left = give.left;
}
if (give.top != null) {
opts.top = give.top;
}
}
if(opts.left || opts.top){
this.element.css({
position: 'absolute',
left: opts.left,
top: opts.top
});
}
if (!isNaN(opts.width)) {
var width = opts.width;
var fixWidth = 0;
if ($.support.boxModel === true) {
fixWidth = (this.element.outerWidth() - this.element.width());
}
if (!give.hasIgnoredBounds) {
width = width - fixWidth;
}
this.element.css({width: width});
this.$inner.css({width : width});
this.$text.css({width : width - opts.iconWidth});
}
if (!isNaN(opts.height)) {
var height = opts.height;
var fixHeight = 0;
if ($.support.boxModel === true) {
fixHeight = this.element.outerHeight() - this.element.height();
this.$icon && this.$icon.css({
height : opts.iconHeight,
top : (this.element.outerHeight() - this.$icon.outerHeight()) /2 -fixHeight
});
} else {
this.$icon && this.$icon.css({
height : opts.iconHeight,
top : (opts.height - opts.iconHeight) /2
})
}
if (!give.hasIgnoredBounds) {
height = height - fixHeight;
}
this.element.css({height: height});
this.$text.css('line-height', height+'px');
this.$text.css('height',height);
this.$inner.css('height',height);
this.$text.css('display','block');//Sean：莫名其妙，IE7文本模式下不加这句话有时候按钮上的字会不显示，貌似要重新刷一下css
}
}
});
$.shortcut("quickbutton", FR.QuickButton);
})(jQuery);