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