Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

开关控件

es6
windy 7 years ago
parent
a8e25b990b
commit
312d67efad
11 changed files with 283 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

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

15
dist/base.css vendored
Unescape View File

@ -1120,6 +1120,21 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
.bi-single-select-icon-text-item.active .b-font:before {
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 {
color: #ffffff;
padding: 0 5px;

15
dist/bundle.css vendored
Unescape View File

@ -3167,6 +3167,21 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
.bi-single-select-icon-text-item.active .b-font:before {
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 {
color: #ffffff;
padding: 0 5px;

51
dist/bundle.js vendored
Unescape View File

@ -63547,6 +63547,57 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
});
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
* 复选框item
* @type {*|void|Object}

51
dist/case.js vendored
Unescape View File

@ -978,6 +978,57 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
});
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
* 复选框item
* @type {*|void|Object}

3
dist/demo.js vendored
Unescape View File

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

15
dist/fineui.css vendored
Unescape View File

@ -3167,6 +3167,21 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
.bi-single-select-icon-text-item.active .b-font:before {
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 {
color: #ffffff;
padding: 0 5px;

51
dist/fineui.js vendored
Unescape View File

@ -65311,6 +65311,57 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
});
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
* 复选框item
* @type {*|void|Object}

52
src/case/button/switch.js
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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);
}
}
Write Preview
Loading…
Cancel
Save