(function ($) {
/**
* 按钮控件
*
* @example
* var btn = new FR.Button({
* renderEl : $('body'),
* text : "Button",
* hotKeys : "enter",
* iconCls : "custom-btn-blue",
* iconAlign : "right",
* scale : "medium",
* handler : function(){alert("click me")}
* });
* @class FR.Button
* @extends FR.Widget
*
* @cfg {JSON} options 属性配置
* @cfg {String} options.text 按钮上的文字
* @cfg {String} [options.hotKeys] 触发按钮的快捷键
* @cfg {String} [options.iconCls] 按钮的css样式表类
* @cfg {"right"|"left"|"top"|"bottom"} [options.iconAlign="right"] 按钮图标的对齐方式
* @cfg {"small"|"medium"|"large"} [options.scale="medium"] 按钮的尺寸
* @cfg {Function} options.handler 点击按钮时触发的事件
*/
FR.Button = FR.extend(FR.Widget, /**@class FR.Button*/{
/**
* 初始的配置属性
* @returns {*}
* @private
*/
_defaultConfig: function () {
return $.extend(FR.Button.superclass._defaultConfig.apply(), {
baseCls: "fr-btn",
hotkeys: "",
icon: "",
// 按钮根据文字图标的变化自动变化
autoSize: false,
scale: "small",
iconAlign: "left",
text: "",
width: "auto",
height: "auto",
borderWidth: 6
});
},
/**
* 初始化按钮
* @private
*/
_init: function () {
FR.Button.superclass._init.apply(this, arguments);
var o = this.options;
this.initTable(o);
this.addEvents(o);
var self = this;
if (o.hotkeys) {
FR.Keys.reg(function (e) {
if (($(document).codeToString(e) == o.hotkeys) && self.isEnabled()) {
var bht = FR.CookieInfor.getCookieByName("buttonHotKeyTimer");
var nt = (new Date()).getTime();
if (FR.isEmpty(bht) || (nt - bht > 1000)) {
if (self.isEnabled()) {
self.fireEvent(FR.Events.CLICK, e);
document.cookie = "buttonHotKeyTimer=" + nt;
e.preventDefault();
e.stopPropagation();
}
}
}
});
}
// alex:用添加事件的机制来实现handler的添加
if ($.isFunction(o.handler)) {
this.on(FR.Events.CLICK, o.handler.createDelegate(o.scope || this));
}
},
initTable:function(o){
if (!o.text && o.value) {
o.text = o.value;
}
var id = o.baseCls + "-" + o.widgetName;
var cls = (o.icon)
? (o.text ? ' fr-btn-text-icon' : ' fr-btn-icon')
: ' fr-btn-noicon';
var scaleCls = 'fr-btn-' + o.scale + ' fr-btn-icon-' + o.scale + '-'
+ o.iconAlign;
this.$btn= $('<button/>')
.attr('unselectable','none')
.attr('type','button')
.attr('data-role','none')
.addClass('fr-btn-text')
.append(o.text);
this.$em= $('<em/>').attr('unselectable','on').append(this.$btn)
this.$btnWrap=$('<div/>').addClass(scaleCls).append(this.$em);
FR.Button.setIcon(this.$btn ,o.icon);
this.$btndiv = $('<div/>')
.attr('id',id)
.addClass('fr-btn-up')
.addClass(cls)
.append(this.$btnWrap).appendTo(this.element);
var btnTextHeight= o.scale=='small'? 14 : o.scale=='middle'? 24 : 32;
if(FR.Browser.isIE8Before()){
this.$btn.css('margin-top',(o.height - btnTextHeight)/2);
}else{
this.$btndiv.css('display' , 'table-cell');
}
this.$btndiv.height(Number(o.height) + 1);//改成新样式会出现间隙
this.$btndiv.width(o.width);
},
addEvents: function (o) {
if (!this.$btndiv) {
return;
}
var self = this;
var M = {
onMouseOver: function () {
if (self.isEnabled()) {
self.$btndiv.addClass(o.baseCls + "-over");
}
},
onMouseOut: function () {
if (self.isEnabled()) {
self.$btndiv.removeClass(o.baseCls + "-over");
}
},
onMouseDown: function () {
if (self.isEnabled()) {
self.$btndiv.removeClass(o.baseCls + "-over");
$(document).bind("mouseup", M.onMouseUp);
}
},
onMouseUp: function () {
if (self.isEnabled()) {
self.$btndiv.removeClass(o.baseCls + "-over");
$(document).unbind("mouseup", M.onMouseUp);
}
}
}
this.$btndiv.mouseover(M.onMouseOver.createInterceptor(this.isEnabled(), this))
.mouseout(M.onMouseOut)
.mousedown(M.onMouseDown.createInterceptor(this.isEnabled(), this))
.mouseup(M.onMouseUp);
this.$btndiv.keydown(function (e) {
if (e.keyCode === 13) {
e.stopPropagation();
}
});
this.$btndiv.click(function (e) {
if (self.isEnabled()) {
self.fireEvent(FR.Events.CLICK, e);
}
});
},
setEnable: function (enabled) {
FR.Button.superclass.setEnable.apply(this, arguments);
var clz = this.options.baseCls;
if (this.$btndiv && enabled === false) {
this.$btndiv.removeClass(clz + "-over");
}
},
getText: function () {
return this.$btn.text();
},
setText: function (text) {
if (FR.isEmpty(text)) {
return;
}
this.$btn.text(text);
},
getValue: function () {
return this.$btn.text();
},
setValue: function (text) {
if (FR.isEmpty(text)) {
return;
}
this.$btn.text(text);
},
/**
* 设置按钮的图标
* @param {String} icon 图标，可以是一个url，也可以是形如"css:fr-custom-button-icon"这样的css样式表类
*/
setIcon: function (icon) {
if (FR.isEmpty(icon)) {
return;
}
// 移除所有的class
this.$btn.removeClass();
this.$btn.addClass("fr-btn-text");
var iconButton = this.$btn;
// b:ie6 filter image 会导致宽度定死
if (FR.Browser.isIE6()) {
$('<span>' + this.$btn.text() + '</span>').appendTo(this.$btn.parent());
}
// alex:如果是以css:打头,表示里面保存的是一个cls
if (icon.substring(0, 4) == "css:") {
iconButton.addClass(icon.substring(4));
// carl:使用css图片截取，服务器直接生成css语句，当为style：开头时，保存的为css属性
} else if (icon.substring(0, 6) == "style:") {
iconButton.css({
background: icon.substring(6)
});
// 否则保存的就是一个url路径
} else {
iconButton.css({
"background-image": "url(" + icon + ")"
});
}
},
/**
* 设置按钮的最大宽度
* @param {Number} width 按钮的最大宽度
*/
setMaxWidth: function (width) {
if (!isNaN(width)) {
var o = this.options;
if (FR.Browser.isIE()) {
if (FR.fixBoxModelWidth(this.$btn) + this.$btn.width() > (width - o.borderWidth)) {
this.$btn.width(width - o.borderWidth);
}
} else {
this.$btn.css("max-width", (width - o.borderWidth) + "px");
}
}
},
doResize: function (give) {
FR.Button.superclass.doResize.call(this, give);
var width = give ? give.width : this.options.width;
var height = give ? give.height : this.options.height;
this.$btndiv.css({
width: width,
height: height
});
this.setMaxWidth(width);
}
})
$.shortcut("button", FR.Button);
FR.Button.setIcon = function ($btn, icon) {
if (FR.isEmpty(icon)) {
return;
}
// 移除所有的class
$btn.removeClass();
$btn.addClass("fr-btn-text");
var iconButton = $btn;
// b:ie6 filter image 会导致宽度定死
if (FR.Browser.isIE6()) {
// 上面这个不加flow填报页面就显示不出图片 加了flow就解决不了超过btn宽度会换行的问题...
$('<span>' + $btn.text() + '</span>').appendTo($btn.parent());
}
// alex:如果是以css:打头,表示里面保存的是一个cls
if (icon.substring(0, 4) == "css:") {
iconButton.addClass(icon.substring(4));
// carl:使用css图片截取，服务器直接生成css语句，当为style：开头时，保存的为css属性
} else if (icon.substring(0, 6) == "style:") {
iconButton.css({
background: icon.substring(6)
});
// 否则保存的就是一个url路径
} else {
iconButton.css({
"background-image": "url(" + icon + ")"
});
}
};
FR.Button.setMaxWidth = function ($btn, config) {
if ($btn.isSetWidth) {
return;
}
if (!isNaN(config.width)) {
if (FR.Browser.isIE()) {
var btnWidth = FR.fixBoxModelWidth($btn) + $btn.width();
if (btnWidth > (config.width - config.borderWidth)) {
$btn.width(config.width - config.borderWidth);
FR.Button.setPrototypeBtnWidth(config, config.width - config.borderWidth);
}
} else {
$btn.css("max-width", (config.width - config.borderWidth) + "px");
FR.Button.setPrototypeBtnMaxWidth(config, config.width - config.borderWidth);
}
}
};
FR.Button.setPrototypeBtnWidth = function (config, width) {
var $table = FR.Button.CacheTable._getPrototypeTable(config);
if($table){
var $btn = $table.$btn;
$btn.width(width);
$btn.isSetWidth = true;
}
};
FR.Button.setPrototypeBtnMaxWidth = function (config, width) {
var $table = FR.Button.CacheTable._getPrototypeTable(config);
if($table){
var $btn = $table.$btn;
$btn.css("max-width", (config.width - config.borderWidth) + "px");
$btn.isSetWidth = true;
}
};
/**
* 图标按钮
*
* @example
* var btn = new FR.IconButton({
* renderEl : 'body',
* imgsrc : "http://www.baidu.com/img/bdlogo.gif"
* });
* @class FR.IconButton
* @extends FR.Widget
* @cfg {String} imgSrc 用于生成按钮的图片的地址
*/
FR.IconButton = FR.extend(FR.Widget, /**@class FR.IconButton*/{
_defaultConfig: function () {
return $.extend(FR.IconButton.superclass._defaultConfig.apply(), {
tablable: true,
render: false,
width: 18,
height: 18,
baseClass: "fr-icon-btn"
});
},
_init: function () {
FR.IconButton.superclass._init.apply(this, arguments);
var o = this.options;
// 当render为false时,其本身就是一个控件,不需要加进去
if (o.render === true) {
this.$btn = $("<div/>").appendTo(this.element);
} else {
this.$btn = this.element;
}
this.$btn.addClass(o.baseClass);
if (o.title) {
this.$btn.attr("title", o.title);
}
if(o.text){
this.$btn.html(o.text);
}
var baseClsForMouse = o.baseClass;
if (o.imgsrc) {
baseClsForMouse = o.imgsrc;
this.$btn.addClass(o.imgsrc);
}
// mouse event
var self = this;
var M = {
onMouseOver: function (e) {
if (self.isEnabled()) {
self.$btn.addClass(baseClsForMouse + "-hover");
}
},
onMouseDown: function (e) {
if (self.isEnabled()) {
self.$btn.removeClass(baseClsForMouse + "-hover");
self.$btn.addClass(baseClsForMouse + "-click");
$(document).bind("mouseup", M.onMouseUp);
}
},
onMouseOut: function (e) {
self.$btn.removeClass(baseClsForMouse + "-hover");
self.$btn.removeClass(baseClsForMouse + "-click");
},
onMouseUp: function (e) {
self.$btn.removeClass(baseClsForMouse + "-click");
$(document).unbind("mouseup", M.onMouseUp);
}
}
this.$btn.mouseover(M.onMouseOver).mouseout(M.onMouseOut)
.mousedown(M.onMouseDown).mouseup(M.onMouseUp);
this.$btn.click(function (e) {
if (self.isEnabled()) {
self.fireEvent(FR.Events.CLICK, e);
}
});
// alex:用添加事件的机制来实现handler的添加
if ($.isFunction(o.handler)) {
this.on(FR.Events.CLICK, o.handler.createDelegate(o.scope || this));
}
},
destroy: function () {
this.element.empty();
},
doResize: function (give) {
FR.Button.superclass.doResize.call(this, give);
this.$btn.css({
width: give.width,
height: give.height
});
}
});
$.shortcut("iconbutton", FR.IconButton);
/**
* 自定义按钮，分别使用不同的图片表示按钮的各种状态
*
* @example
* var btn = new FR.FreeButton({
* renderEl : 'body',
* width : 200,
* height : 100,
* icon : {
* background : ""
* }
* });
*
* @class FR.FreeButton
* @extends FR.BaseEditor
* @cfg {Number} fontsize 字体大小
* @cfg {String} fontfamily 字体类型
* @cfg {Number} fontweight 字体的粗细
* @cfg {String} fontstyle 字体的样式
* @cfg {String} color 文字颜色
* @cfg {String} decoration 文字的修饰
* @cfg {String} hotkeys 快捷键
*/
FR.FreeButton = FR.extend(FR.BaseEditor, /**@class FR.FreeButton*/{
_defaultConfig: function () {
return $.extend(FR.FreeButton.superclass._defaultConfig.apply(), {
width: 200,
height: 100,
initial: {
background: ''
}
});
},
_init: function () {
FR.FreeButton.superclass._init.apply(this, arguments);
this.switchOn = false;
var o = this.options;
if (o.render === true) {
/**
* @property {jQuery} $img 用于显示按钮图标的dom元素
*/
this.$img = $("<div style='text-align: center;'/>")
.appendTo(this.element);
} else {
this.$img = this.element.css('text-align', 'center');
}
this.element.addClass('fr-form-imgboard');
if (o.icon) {
var icon = $("<img style='vertical-align: middle;margin-right: 3px;'/>");
if (o.icon.background) {
var array = o.icon.background.split('(');
var src = array[1];
array = src.split(')');
src = array[0];
icon.attr('src', src).appendTo(this.$img);
}
}
/**
* @property {jQuery} text 用于显示按钮文字的dom元素
*/
this.text = $("<span style='text-align: center;'>"
+ ((o.text != null && !FR.isEmpty($.trim(o.text))) ? o.text : " ")
+ "</span>").appendTo(this.$img)
if (o.fontsize) {
this.text.css('font-size', o.fontsize);
}
if (o.color) {
this.text.css('color', o.color);
}
if (o.decoration) {
this.text.css('text-decoration', o.decoration);
}
if (o.fontfamily) {
this.text.css('font-family', o.fontfamily);
}
if (o.fontweight) {
this.text.css('font-weight', o.fontweight);
}
if (o.fontstyle) {
this.text.css('font-style', o.fontstyle);
}
if (o.text && !FR.isEmpty($.trim(o.text))) {
this.setValue(o.text);
}
if (o.width && o.height) {
this.doResize(o);
}
if (o.hotkeys) {
FR.Keys.reg(function (e) {
if (($(document).codeToString(e) == o.hotkeys)
&& self.isEnabled()) {
// shoc:阻止添加删除行按钮这种一次触发很多行的
var bht = FR.CookieInfor.getCookieByName("buttonHotKeyTimer");
var nt = (new Date()).getTime();
if (FR.isEmpty(bht) || (nt - bht > 1000)) {
if (self.isEnabled()) {
self.fireEvent(FR.Events.CLICK, e);
document.cookie = "buttonHotKeyTimer=" + nt;
e.preventDefault();
e.stopPropagation();
}
}
}
});
}
// wikky:暂时先这样处理
// 低版本IE的background使用url的方式，现有逻辑下，如果不勾选“点击查询前不显示报表内容”，会触发保存附件的attachmentMap的清空操作，使得hover和click获取不到图片
// 现有逻辑有个问题,当触发parameterCommit时，会清空attachmentMap，而loadContentPane时只会重新put页面的image，而不会处理参数界面的image；
// 这个逻辑改起来比较麻烦，暂时用这种方式处理。
if (FR.Browser.isIE8Before()) {
if (o.click && o.click.background) {
this.setBackground(o.click.background);
}
if (o.over && o.over.background) {
this.setBackground(o.over.background);
}
}
this.setBackground(o.initial.background);
// mouse event
var self = this;
// 不可用事件中就不做处理
var M = {
onMouseOver: function (e) {
if (!self.options.disabled) {
self.fireOver();
}
},
onMouseOut: function (e) {
if (!self.options.disabled) {
self.fireOut();
}
},
onMouseDown: function (e) {
if (!self.options.disabled) {
self.fireDown();
}
$(document).bind("mouseup", M.onMouseUp);
},
onMouseUp: function (e) {
if (!self.options.disabled) {
self.fireUp();
}
$(document).unbind("mouseup", M.onMouseUp);
}
}
this.$img.mouseover(M.onMouseOver.createInterceptor(this.isEnabled(),
this)).mouseout(M.onMouseOut).mousedown(M.onMouseDown
.createInterceptor(this.isEnabled(), this))
.mouseup(M.onMouseUp);
if (this._getEvents().click) {
this.$img.addClass("fr-widget-click");
} else {
this.$img.css('cursor', 'default');
}
this.$img.click(function (e) {
if (self.isEnabled()) {
self.fireEvent(FR.Events.CLICK, e);
}
});
if ($.isFunction(o.handler)) {
this.on(FR.Events.CLICK, o.handler.createDelegate(o.scope || this));
}
},
setValue: function (value) {
this.text.text(value);
},
getValue: function () {
return this.text.text();
},
setEnable: function (arg) {
if (arg === true) {
this.options.disabled = false;
if (this.options.isToggle && this.switchOn) {
if (this.options.click) {
this.element.css('background',
this.options.click.background);
}
} else {
this.element.css('background', this.options.initial.background);
}
this.element.addClass('ui-state-enabled');
this.element.removeClass('ui-state-disabled');
} else if (arg === false) {
this.options.disabled = true;
this.element.css('background', 'none');
this.element.addClass('ui-state-disabled');
this.element.removeClass('ui-state-enabled');
}
},
/**
* 鼠标悬浮事件
*/
fireOver: function () {
if (this.options.over) {
this.setBackground(this.options.over.background);
}
},
/**
* 鼠标离开事件
*/
fireOut: function () {
if (this.options.isToggle && this.switchOn) {
if (this.options.click) {
this.setBackground(this.options.click.background);
}
} else {
this.setBackground(this.options.initial.background);
}
},
/**
* 鼠标按下事件
*/
fireDown: function () {
if (this.options.isToggle && !this.switchOn) {
var widgetList = this.getWidgetsInSameGroup();
if (widgetList) {
for (var i = 0; i < widgetList.length; i++) {
var widget = widgetList[i];
if (widget != this) {
widget.switchDown();
}
}
}
this.switchOn = true;
}
if (this.options.click) {
this.setBackground(this.options.click.background);
}
},
/**
* 鼠标松开事件
*/
fireUp : function() {
if (this.options.over && this.switchOn) {
this.setBackground(this.options.over.background);
} else {
this.setBackground(this.options.initial.background);
}
},
/**
* 开关事件
*/
switchDown: function () {
if (this.options.isToggle) {
this.setBackground(this.options.initial.background);
this.switchOn = false;
}
},
getWidgetsInSameGroup: function () {
if (this.options.group) {
return this.options.form.getWidgetsByGroup(this.options.group);
}
},
/**
* 设置按钮的背景图片
* @param {String} img 背景图地址和位置属性
*/
setBackground: function (img) {
this.$img.css('background', img);
},
doResize: function (give) {
this.$img.css({
width: give.width,
height: give.height
});
this.text.css('line-height', give.height + 'px');
}
});
$.shortcut('freebutton', FR.FreeButton);
/**
* 具有两个选中状态的按钮，这是一个抽象类，使用的时候需要用其具体的子类
* @class FR.ToggleButton
* @extends FR.BaseEditor
* @abstract
* @cfg {Boolean} selected 初始是否处于选中状态
* @cfg {Function} handler 控件点击时触发的事件
* @cfg {Number} fontSize 控件上显示的文字字体大小
*/
FR.ToggleButton = FR.extend(FR.BaseEditor, /**@class FR.ToggleButton*/{
/**
* @property {String} selected_class 表示该按钮处于选中状态
*/
selected_class: 'fr-checkbox-checkon' ,
/**
* @property {String} unselected_class 表示该按钮处于另一种选中状态
*/
unselected_class: 'fr-checkbox-checkoff',
_defaultConfig: function () {
return $.extend(FR.ToggleButton.superclass._defaultConfig.apply(), {
selected: false,
scope: this,
render: true,
only_be_selected: false
});
},
_init: function () {
FR.ToggleButton.superclass._init.apply(this, arguments);
var o = this.options;
if (o.render === true) {
/*
* alex:原来这里是$("<div>"),发现在ie中图标处点下去却没有触发click事件,改成span就可以了 另外$("<span>").text(o.text)在ie中是不能生成span的
*/
// b:只有背景时ie中忽略图片高度
this.element.css('height','auto').css('width','auto');
this.$btn = $("<span>"
+ ((o.text != null && !FR.isEmpty($.trim(o.text))) ? o.text : " ")
+ "</span>").appendTo(this.element).addClass('x-text')
.addClass("fr-widget-click").click(function (e) {
this.onNodeClick();
}.createDelegate(this));
} else {
this.$btn = this.element;
if (o.text != null) {
$("<span>" + o.text + "</span>").insertAfter(this.$btn);
}
}
// b:chrome位置不够显示pic
if (FR.Browser.r.chrome) {
this.$btn.css('padding-top', 1);
}
if (this.options.fontSize) {
//IE10下11还是会有部分遮挡
var minSize = 12;
if (this.options.fontSize < minSize) {
this.options.fontSize = minSize;
}
this.$btn.css('font-size', this.options.fontSize);
}
this.$btn.css("display", "inline-block");
if ($.isFunction(o.handler)) {
this.$btn.click(o.handler.createDelegate(o.scope || this)
.createInterceptor(this.isEnabled, this));
}
this.changeBoxState(o.selected);
// b:先重构，具体干嘛的不清楚，感觉么必要，以后再看
this.$formbtn = this.initFormBtn();
if (o.value) {
if (!this.isValidate(o.value)) {
FR.Msg.toast(this.errorMsg);
return;
}
if (typeof o.value == 'boolean') {
this.setSelectedWithoutEvent(o.value);
} else if (o.value == 'true') {
this.setSelectedWithoutEvent(true);
} else if (o.value == 'false') {
this.setSelectedWithoutEvent(false);
}
}
},
onNodeClick: function () {
var o = this.options;
if (this.isEnabled()) {
if (o.only_be_selected && this.selected()) {
return false;
} else if (!this.selected(!this.selected())) {
return false;
}
// marro： 联动
this.fireEvent(FR.Events.AFTEREDIT);
this.fireEvent(FR.Events.CLICK);
}
},
changeBoxState: function (selected) {
selected = typeof selected == 'boolean'
? selected
: (selected != 'false');
this.$btn[selected ? 'addClass' : 'removeClass'](this.selected_class);
this.$btn[selected ? 'removeClass' : 'addClass'](this.unselected_class);
},
initFormBtn: function () {
return null;
},
getValue: function () {
return this.selected();
},
_dealValueWithEvents: function (state) {
if (typeof state == 'boolean') {
this.selected(state, "noFireEvent");
} else if (state == 'true') {
this.selected(true, "noFireEvent");
} else if (state == 'false') {
this.selected(false, "noFireEvent");
}
if (arguments[1] === true) {
this.fireEvent(FR.Events.AFTEREDIT); // fire value
}
},
getText: function () {
return this.options.text;
},
reset: function () {
this.selected(false);
},
/**
* 是否被选中 如果没有参数,则是get操作;如果有参数,则是set操作
* @return {Boolean} 如果控件处于被选中状态，返回true，否则返回false
*/
selected: function () {
if (arguments.length === 0) {
// james:现在应该是两种状态下都返回True啦
return this.isSelected();
} else {
if (arguments[1] == "noFireEvent") {
return this.setSelectedWithoutEvent(arguments[0]);
} else {
return this.setSelected(arguments[0]);
}
}
},
/**
* 控件是否处于选中状态
* @returns {Boolean} 选中状态返回true，未选中状态返回false
*/
isSelected: function () {
return this.$btn.is('.' + this.selected_class);
},
/**
* 设置控件的选中状态
* @param selected 是否选中，选中为true，不选中为false
* @returns {Boolean} 如果成功改变了状态则返回true，否则返回false
*/
setSelected: function (selected) {
if (!this.setSelectedWithoutEvent(selected)) {
return false;
}
this.fireEvent(FR.Events.STATECHANGE, this.selected());
return true;
},
/**
* 设置控件的选中状态但是不触发控件的“状态改变”事件
* @param selected 是否选中
* @returns {Boolean} 总是返回true
*/
setSelectedWithoutEvent: function (selected) {
if (this.$formbtn) {
this.$formbtn.attr("checked", selected !== false);
}
this.changeBoxState(selected);
return true;
},
destroy: function () {
FR.ToggleButton.superclass.destroy.apply(this);
},
doResize: function (give) {
FR.ToggleButton.superclass.doResize.call(this, give);
}
});
/**
* 复选框
*
* @example
* var editor = new FR.CheckBox({
* renderEl : 'body',
* text : "是否显示实际值",
* selected : true, //是否被选中
* disabled : false //状态是否可变
* });
*
* @class FR.CheckBox
* @extends FR.ToggleButton
*/
FR.CheckBox = FR.extend(FR.ToggleButton, /**@class FR.CheckBox*/{
/**
* @property {String} selected_class 复选框处于选中状态时的样式表类
*/
selected_class: 'fr-checkbox-checkon' ,
/**
* @property {String} unselected_class 复选框处于未选中状态时的样式表类
*/
unselected_class: 'fr-checkbox-checkoff' ,
/**
* 复选按钮图标的高度，
*/
checkIconHeight: 17,
_defaultConfig: function () {
return $.extend(FR.CheckBox.superclass._defaultConfig.apply(), {
marginleft: 5
});
},
_init: function () {
FR.CheckBox.superclass._init.apply(this, arguments);
var o = this.options;
var lineHeight;
if(this.element && FR.Browser.isIE){
//52212 ie下控件高度不对
this.element.css({
"width": o.width,
"height": this.checkIconHeight
});
lineHeight = this.checkIconHeight;
}
//lineheight控制垂直居中bug65664
if (lineHeight) {
this.$btn.css({
'margin-left': o.marginleft,
'height': 'inherit',
'line-height': lineHeight + 'px'
});
} else {
this.$btn.css('margin-left', o.marginleft);
}
},
initFormBtn: function () {
if (this.options.sessionID
&& _g(this.options.sessionID).rtype == 'form') {
var $par = $(this.$btn.parent());
$par.css("background-color", "white");
this.$box = $("<input type='checkbox'/>").css("display",
"none").attr("name", this.options.widgetName)
.appendTo($par);
this.$box.attr("value", this.options.fieldValue
|| this.options.value || '');
}
return this.$box;
},
doResize: function (give) {
FR.CheckBox.superclass.doResize.call(this, give);
if (this.element) {
this.$btn.css('line-height', this.element.height() + 'px');
}
}
});
$.shortcut("checkbox", FR.CheckBox)
/**
* 单选按钮
*
* @example
* var editor = new FR.RadioButton({
* renderEl : 'body',
* text : "默认选中",
* selected : true,
* disabled : false
* });
*
* @class FR.RadioButton
* @extends FR.ToggleButton
*/
FR.RadioButton = FR.extend(FR.ToggleButton, /**@class FR.RadioButton*/{
/**
* @property {String} selected_class 单选按钮处于选中状态时的样式表类
*/
selected_class: 'fr-radio-radioon' ,
/**
* @property {String} unselected_class 单选按钮处于未选中状态时的样式表类
*/
unselected_class: 'fr-radio-radiooff',
_init: function () {
FR.RadioButton.superclass._init.apply(this, arguments);
},
initFormBtn: function () {
if (this.options.sessionID
&& _g(this.options.sessionID).rtype == 'form') {
var $par = $(this.$btn.parent());
$par.css("background-color", "white");
this.$radio = $("<input type='radio'/>").css("display",
"none").attr("name",
this.options.name || this.options.widgetName)
.appendTo($par);
this.$radio.attr("value", this.options.fieldValue
|| this.options.value || '');
}
return this.$radio;
}
});
$.extend(FR.RadioButton, {
RadioButtonGroup: {}
});
$.shortcut("radio", FR.RadioButton)
/**
* 参数查询控件
* @class FR.FormSubmitButton
*/
FR.FormSubmitButton = FR.extend(FR.Button, {
_init: function () {
FR.FormSubmitButton.superclass._init.apply(this, arguments);
}
});
$.shortcut('formsubmit', FR.FormSubmitButton);
/**
* tab布局 切换tab控件
* @class FR.FormSubmitButton
*/
FR.CardSwitchButton = FR.extend(FR.FreeButton, {
_init: function () {
FR.CardSwitchButton.superclass._init.apply(this, arguments);
this.$img.css('border-radius', '5px 5px 0 0');
this.element.css('border-radius', '5px 5px 0 0');
this.element.css('opacity', this.options.opacity);
var self = this;
var M = {
cur_style : 0,
onMouseOver: function (e) {
var opacity = self.element.css('opacity');
cur_style = opacity;
if(opacity === "1"){
return;
}
self.element.css('opacity', 1);
},
onMouseOut: function (e) {
//本身被选中的话, mouseout不需要改变透明度
if(cur_style === "1"){
return;
}
self.element.css('opacity', 0.6);
},
onMouseDown: function (e) {
var opacity = self.element.css('opacity');
cur_style = opacity;
}
}
this.$img.mouseover(M.onMouseOver)
.mouseout(M.onMouseOut)
.mousedown(M.onMouseDown);
}
});
$.shortcut('cardswitch', FR.CardSwitchButton);
})(jQuery);