forked from fanruan/fineui
Browse Source
* commit 'f28ff15ca4ed2d5f1a005c2b07b3193d82a0f53b': DEC-6649 refactor: checkbox, radio, halfbutton的非图片实现es6
windy
6 years ago
31 changed files with 1911 additions and 281 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,65 @@
|
||||
/** |
||||
* guy |
||||
* @extends BI.Single |
||||
* @type {*|void|Object} |
||||
*/ |
||||
BI.Checkbox = BI.inherit(BI.BasicButton, { |
||||
_defaultConfig: function () { |
||||
var conf = BI.Checkbox.superclass._defaultConfig.apply(this, arguments); |
||||
return BI.extend(conf, { |
||||
baseCls: (conf.baseCls || "") + " bi-checkbox", |
||||
selected: false, |
||||
handler: BI.emptyFn, |
||||
width: 16, |
||||
height: 16, |
||||
iconWidth: 14, |
||||
iconHeight: 14 |
||||
}); |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.Checkbox.superclass._init.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
BI.createWidget({ |
||||
type: "bi.center_adapt", |
||||
element: this.element, |
||||
items: [{ |
||||
type: "bi.default", |
||||
ref: function (_ref) { |
||||
self.checkbox = _ref; |
||||
}, |
||||
cls: "checkbox-context bi-border", |
||||
width: o.iconWidth, |
||||
height: o.iconHeight |
||||
}] |
||||
}); |
||||
}, |
||||
|
||||
_setEnable: function (enable) { |
||||
BI.Checkbox.superclass._setEnable.apply(this, arguments); |
||||
if (enable === true) { |
||||
this.checkbox.element.removeClass("base-disabled disabled"); |
||||
} else { |
||||
this.checkbox.element.addClass("base-disabled disabled"); |
||||
} |
||||
}, |
||||
|
||||
doClick: function () { |
||||
BI.Checkbox.superclass.doClick.apply(this, arguments); |
||||
if(this.isValid()) { |
||||
this.fireEvent(BI.Checkbox.EVENT_CHANGE); |
||||
} |
||||
}, |
||||
|
||||
setSelected: function (b) { |
||||
BI.Checkbox.superclass.setSelected.apply(this, arguments); |
||||
if (b) { |
||||
this.checkbox.element.removeClass("bi-border").addClass("bi-high-light-background bi-high-light-border"); |
||||
} else { |
||||
this.checkbox.element.removeClass("bi-high-light-background bi-high-light-border").addClass("bi-border"); |
||||
} |
||||
} |
||||
}); |
||||
BI.Checkbox.EVENT_CHANGE = "Checkbox.EVENT_CHANGE"; |
||||
|
||||
BI.shortcut("bi.checkbox", BI.Checkbox); |
||||
@ -0,0 +1,65 @@
|
||||
/** |
||||
* guy |
||||
* @extends BI.Single |
||||
* @type {*|void|Object} |
||||
*/ |
||||
BI.Radio = BI.inherit(BI.BasicButton, { |
||||
_defaultConfig: function () { |
||||
var conf = BI.Radio.superclass._defaultConfig.apply(this, arguments); |
||||
return BI.extend(conf, { |
||||
baseCls: (conf.baseCls || "") + " bi-radio", |
||||
selected: false, |
||||
handler: BI.emptyFn, |
||||
width: 16, |
||||
height: 16, |
||||
iconWidth: 14, |
||||
iconHeight: 14 |
||||
}); |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.Radio.superclass._init.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
BI.createWidget({ |
||||
type: "bi.center_adapt", |
||||
element: this.element, |
||||
items: [{ |
||||
type: "bi.layout", |
||||
cls: "radio-content bi-border", |
||||
ref: function (_ref) { |
||||
self.radio = _ref; |
||||
}, |
||||
width: o.iconWidth, |
||||
height: o.iconHeight |
||||
}] |
||||
}); |
||||
}, |
||||
|
||||
_setEnable: function (enable) { |
||||
BI.Radio.superclass._setEnable.apply(this, arguments); |
||||
if (enable === true) { |
||||
this.radio.element.removeClass("base-disabled disabled"); |
||||
} else { |
||||
this.radio.element.addClass("base-disabled disabled"); |
||||
} |
||||
}, |
||||
|
||||
doClick: function () { |
||||
BI.Radio.superclass.doClick.apply(this, arguments); |
||||
if(this.isValid()) { |
||||
this.fireEvent(BI.Radio.EVENT_CHANGE); |
||||
} |
||||
}, |
||||
|
||||
setSelected: function (b) { |
||||
BI.Radio.superclass.setSelected.apply(this, arguments); |
||||
if (b) { |
||||
this.radio.element.removeClass("bi-border").addClass("bi-high-light-background bi-high-light-border"); |
||||
} else { |
||||
this.radio.element.removeClass("bi-high-light-background bi-high-light-border").addClass("bi-border"); |
||||
} |
||||
} |
||||
}); |
||||
BI.Radio.EVENT_CHANGE = "Radio.EVENT_CHANGE"; |
||||
|
||||
BI.shortcut("bi.radio", BI.Radio); |
||||
@ -0,0 +1,40 @@
|
||||
/** |
||||
* guy |
||||
* @extends BI.Single |
||||
* @type {*|void|Object} |
||||
*/ |
||||
BI.HalfButton = BI.inherit(BI.BasicButton, { |
||||
_defaultConfig: function () { |
||||
var conf = BI.HalfIconButton.superclass._defaultConfig.apply(this, arguments); |
||||
return BI.extend(conf, { |
||||
extraCls: "bi-half-button bi-border bi-high-light-border", |
||||
height: 14, |
||||
width: 14, |
||||
selected: false |
||||
}); |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.HalfButton.superclass._init.apply(this, arguments); |
||||
BI.createWidget({ |
||||
type: "bi.center_adapt", |
||||
element: this.element, |
||||
items: [{ |
||||
type: "bi.layout", |
||||
cls: "bi-high-light-background", |
||||
width: 8, |
||||
height: 8 |
||||
}] |
||||
}); |
||||
}, |
||||
|
||||
doClick: function () { |
||||
BI.HalfButton.superclass.doClick.apply(this, arguments); |
||||
if(this.isValid()) { |
||||
this.fireEvent(BI.HalfButton.EVENT_CHANGE); |
||||
} |
||||
} |
||||
}); |
||||
BI.HalfButton.EVENT_CHANGE = "HalfIconButton.EVENT_CHANGE"; |
||||
|
||||
BI.shortcut("bi.half_button", BI.HalfButton); |
||||
@ -0,0 +1,30 @@
|
||||
.bi-checkbox .checkbox-context { |
||||
-webkit-border-radius: 2px; |
||||
-moz-border-radius: 2px; |
||||
border-radius: 2px; |
||||
} |
||||
.bi-checkbox .checkbox-context:after { |
||||
position: absolute; |
||||
display: table; |
||||
top: 50%; |
||||
left: 22%; |
||||
border: 2px solid transparent; |
||||
border-top: 0; |
||||
border-left: 0; |
||||
width: 4px; |
||||
height: 8px; |
||||
-webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%); |
||||
-moz-transform: rotate(45deg) scale(1) translate(-50%, -50%); |
||||
-o-transform: rotate(45deg) scale(1) translate(-50%, -50%); |
||||
-ms-transform: rotate(45deg) scale(1) translate(-50%, -50%); |
||||
transform: rotate(45deg) scale(1) translate(-50%, -50%); |
||||
content: ''; |
||||
} |
||||
.bi-checkbox.active .checkbox-context:after, |
||||
.bi-checkbox:active .checkbox-context:after { |
||||
border-color: #ffffff; |
||||
opacity: 1; |
||||
} |
||||
.bi-checkbox.disabled .checkbox-context:after { |
||||
opacity: 0; |
||||
} |
||||
@ -0,0 +1,30 @@
|
||||
.bi-radio .radio-content { |
||||
-webkit-border-radius: 8px; |
||||
-moz-border-radius: 8px; |
||||
border-radius: 8px; |
||||
} |
||||
.bi-radio .radio-content:after { |
||||
content: ""; |
||||
} |
||||
.bi-radio:active .radio-content:after, |
||||
.bi-radio.active .radio-content:after { |
||||
width: 6px; |
||||
height: 6px; |
||||
display: table; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
-webkit-border-radius: 3px; |
||||
-moz-border-radius: 3px; |
||||
border-radius: 3px; |
||||
background-color: #ffffff; |
||||
-webkit-transform: translate(-50%, -50%); |
||||
-moz-transform: translate(-50%, -50%); |
||||
-o-transform: translate(-50%, -50%); |
||||
-ms-transform: translate(-50%, -50%); |
||||
transform: translate(-50%, -50%); |
||||
} |
||||
.bi-radio.disabled:active .radio-content:after, |
||||
.bi-radio.disabled.active .radio-content:after { |
||||
background-color: transparent; |
||||
} |
||||
@ -0,0 +1,5 @@
|
||||
@import "../../../index"; |
||||
|
||||
.bi-half-button { |
||||
.border-radius(2px); |
||||
} |
||||
@ -0,0 +1,31 @@
|
||||
@import "../../../index"; |
||||
|
||||
.bi-checkbox { |
||||
& .checkbox-context { |
||||
.border-radius(2px); |
||||
&:after { |
||||
position: absolute; |
||||
display: table; |
||||
top: 50%; |
||||
left: 22%; |
||||
border: 2px solid transparent; |
||||
border-top: 0; |
||||
border-left: 0; |
||||
width: 4px; |
||||
height: 8px; |
||||
.transform(rotate(45deg) scale(1) translate(-50%, -50%)); |
||||
content: ''; |
||||
} |
||||
} |
||||
&.active, &:active { |
||||
& .checkbox-context:after { |
||||
border-color: @color-bi-border-default; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
&.disabled { |
||||
& .checkbox-context:after { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,30 @@
|
||||
@import "../../../index"; |
||||
|
||||
.bi-radio { |
||||
& .radio-content { |
||||
.border-radius(8px); |
||||
&:after { |
||||
content: ""; |
||||
} |
||||
} |
||||
&:active, &.active { |
||||
& .radio-content:after { |
||||
width: 6px; |
||||
height: 6px; |
||||
display: table; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
.border-radius(3px); |
||||
background-color: @color-bi-background-default; |
||||
.transform(translate(-50%, -50%)); |
||||
} |
||||
} |
||||
&.disabled { |
||||
&:active, &.active { |
||||
& .radio-content:after { |
||||
background-color: transparent; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue