开关控件

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

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

dist/base.css

@@ -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;

dist/bundle.css

@@ -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;

dist/bundle.js

@@ -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}

dist/case.js

@@ -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}

dist/demo.js

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

dist/fineui.css

@@ -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;

dist/fineui.js

@@ -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}

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);

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;
+}

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);
+  }
+}