Browse Source

开关控件

es6
windy 7 years ago
parent
commit
312d67efad
  1. 3
      demo/js/widget/basewidget/demo.items.js
  2. 15
      dist/base.css
  3. 15
      dist/bundle.css
  4. 51
      dist/bundle.js
  5. 51
      dist/case.js
  6. 3
      dist/demo.js
  7. 15
      dist/fineui.css
  8. 51
      dist/fineui.js
  9. 52
      src/case/button/switch.js
  10. 15
      src/css/base/single/button/switch.css
  11. 12
      src/less/base/single/button/switch.less

3
demo/js/widget/basewidget/demo.items.js

@ -27,6 +27,9 @@ Demo.Items = BI.inherit(BI.Widget, {
}, { }, {
type: "bi.multi_select_item", type: "bi.multi_select_item",
text: "复选项" text: "复选项"
}, {
type: "bi.switch",
selected: true
}], }],
hgap: 300 hgap: 300
}; };

15
dist/base.css vendored

@ -1120,6 +1120,21 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
.bi-single-select-icon-text-item.active .b-font:before { .bi-single-select-icon-text-item.active .b-font:before {
color: #3685f2; color: #3685f2;
} }
.bi-switch {
-webkit-border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
border-radius: 40px 40px 40px 40px;
background-color: #d4dadd;
}
.bi-switch:active,
.bi-switch.active {
background-color: #3f8ce8;
}
.bi-switch .circle-button {
-webkit-border-radius: 9px 9px 9px 9px;
-moz-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
}
.bi-code-editor .param { .bi-code-editor .param {
color: #ffffff; color: #ffffff;
padding: 0 5px; padding: 0 5px;

15
dist/bundle.css vendored

@ -3167,6 +3167,21 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
.bi-single-select-icon-text-item.active .b-font:before { .bi-single-select-icon-text-item.active .b-font:before {
color: #3685f2; color: #3685f2;
} }
.bi-switch {
-webkit-border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
border-radius: 40px 40px 40px 40px;
background-color: #d4dadd;
}
.bi-switch:active,
.bi-switch.active {
background-color: #3f8ce8;
}
.bi-switch .circle-button {
-webkit-border-radius: 9px 9px 9px 9px;
-moz-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
}
.bi-code-editor .param { .bi-code-editor .param {
color: #ffffff; color: #ffffff;
padding: 0 5px; padding: 0 5px;

51
dist/bundle.js vendored

@ -63547,6 +63547,57 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
}); });
BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/** BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/**
* Created by Windy on 2018/2/1.
*/
/**
* guy
* 复选框item
* @type {*|void|Object}
*/
BI.Switch = BI.inherit(BI.BasicButton, {
props: {
extraCls: "bi-switch",
height: 22,
width: 44,
logic: {
dynamic: false
}
},
render: function () {
var self = this;
return {
type: "bi.absolute",
ref: function () {
self.layout = this;
},
items: [{
el: {
type: "bi.text_button",
cls: "circle-button bi-card"
},
width: 18,
height: 18,
top: 2,
left: this.options.selected ? 24 : 2
}]
}
},
setSelected: function (v) {
BI.Switch.superclass.setSelected.apply(this, arguments);
this.layout.attr("items")[0].left = v ? 24 : 2;
this.layout.resize();
},
doClick: function () {
BI.Switch.superclass.doClick.apply(this, arguments);
this.fireEvent(BI.Switch.EVENT_CHANGE);
}
});
BI.Switch.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.switch", BI.Switch);/**
* guy * guy
* 复选框item * 复选框item
* @type {*|void|Object} * @type {*|void|Object}

51
dist/case.js vendored

@ -978,6 +978,57 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
}); });
BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/** BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/**
* Created by Windy on 2018/2/1.
*/
/**
* guy
* 复选框item
* @type {*|void|Object}
*/
BI.Switch = BI.inherit(BI.BasicButton, {
props: {
extraCls: "bi-switch",
height: 22,
width: 44,
logic: {
dynamic: false
}
},
render: function () {
var self = this;
return {
type: "bi.absolute",
ref: function () {
self.layout = this;
},
items: [{
el: {
type: "bi.text_button",
cls: "circle-button bi-card"
},
width: 18,
height: 18,
top: 2,
left: this.options.selected ? 24 : 2
}]
}
},
setSelected: function (v) {
BI.Switch.superclass.setSelected.apply(this, arguments);
this.layout.attr("items")[0].left = v ? 24 : 2;
this.layout.resize();
},
doClick: function () {
BI.Switch.superclass.doClick.apply(this, arguments);
this.fireEvent(BI.Switch.EVENT_CHANGE);
}
});
BI.Switch.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.switch", BI.Switch);/**
* guy * guy
* 复选框item * 复选框item
* @type {*|void|Object} * @type {*|void|Object}

3
dist/demo.js vendored

@ -11594,6 +11594,9 @@ Demo.Items = BI.inherit(BI.Widget, {
}, { }, {
type: "bi.multi_select_item", type: "bi.multi_select_item",
text: "复选项" text: "复选项"
}, {
type: "bi.switch",
selected: true
}], }],
hgap: 300 hgap: 300
}; };

15
dist/fineui.css vendored

@ -3167,6 +3167,21 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
.bi-single-select-icon-text-item.active .b-font:before { .bi-single-select-icon-text-item.active .b-font:before {
color: #3685f2; color: #3685f2;
} }
.bi-switch {
-webkit-border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
border-radius: 40px 40px 40px 40px;
background-color: #d4dadd;
}
.bi-switch:active,
.bi-switch.active {
background-color: #3f8ce8;
}
.bi-switch .circle-button {
-webkit-border-radius: 9px 9px 9px 9px;
-moz-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
}
.bi-code-editor .param { .bi-code-editor .param {
color: #ffffff; color: #ffffff;
padding: 0 5px; padding: 0 5px;

51
dist/fineui.js vendored

@ -65311,6 +65311,57 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
}); });
BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/** BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/**
* Created by Windy on 2018/2/1.
*/
/**
* guy
* 复选框item
* @type {*|void|Object}
*/
BI.Switch = BI.inherit(BI.BasicButton, {
props: {
extraCls: "bi-switch",
height: 22,
width: 44,
logic: {
dynamic: false
}
},
render: function () {
var self = this;
return {
type: "bi.absolute",
ref: function () {
self.layout = this;
},
items: [{
el: {
type: "bi.text_button",
cls: "circle-button bi-card"
},
width: 18,
height: 18,
top: 2,
left: this.options.selected ? 24 : 2
}]
}
},
setSelected: function (v) {
BI.Switch.superclass.setSelected.apply(this, arguments);
this.layout.attr("items")[0].left = v ? 24 : 2;
this.layout.resize();
},
doClick: function () {
BI.Switch.superclass.doClick.apply(this, arguments);
this.fireEvent(BI.Switch.EVENT_CHANGE);
}
});
BI.Switch.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.switch", BI.Switch);/**
* guy * guy
* 复选框item * 复选框item
* @type {*|void|Object} * @type {*|void|Object}

52
src/case/button/switch.js

@ -0,0 +1,52 @@
/**
* Created by Windy on 2018/2/1.
*/
/**
* guy
* 复选框item
* @type {*|void|Object}
*/
BI.Switch = BI.inherit(BI.BasicButton, {
props: {
extraCls: "bi-switch",
height: 22,
width: 44,
logic: {
dynamic: false
}
},
render: function () {
var self = this;
return {
type: "bi.absolute",
ref: function () {
self.layout = this;
},
items: [{
el: {
type: "bi.text_button",
cls: "circle-button bi-card"
},
width: 18,
height: 18,
top: 2,
left: this.options.selected ? 24 : 2
}]
}
},
setSelected: function (v) {
BI.Switch.superclass.setSelected.apply(this, arguments);
this.layout.attr("items")[0].left = v ? 24 : 2;
this.layout.resize();
},
doClick: function () {
BI.Switch.superclass.doClick.apply(this, arguments);
this.fireEvent(BI.Switch.EVENT_CHANGE);
}
});
BI.Switch.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.switch", BI.Switch);

15
src/css/base/single/button/switch.css

@ -0,0 +1,15 @@
.bi-switch {
-webkit-border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
border-radius: 40px 40px 40px 40px;
background-color: #d4dadd;
}
.bi-switch:active,
.bi-switch.active {
background-color: #3f8ce8;
}
.bi-switch .circle-button {
-webkit-border-radius: 9px 9px 9px 9px;
-moz-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
}

12
src/less/base/single/button/switch.less

@ -0,0 +1,12 @@
@import "../../../index";
.bi-switch{
.border-radius(40px 40px 40px 40px);
background-color: @background-color-dark;
&:active, &.active {
background-color: @color-bi-background-highlight;
}
& .circle-button{
.border-radius(9px 9px 9px 9px);
}
}
Loading…
Cancel
Save