1.6.0

bizdevfe · Jul 18, 2017 · 3361cc3 · 3361cc3
1 parent e6c4ee7
commit 3361cc3
Show file tree

Hide file tree

Showing 20 changed files with 369 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 1.6.0 (July 18, 2017)
+* New component: `Switch`.
+
 ## 1.5.0 (April 25, 2017)
 * New component: `Transfer`.
 

diff --git a/dist/jquery.bizui.css b/dist/jquery.bizui.css
@@ -3456,6 +3456,145 @@
 .biz-select-yellow .selectric-items li:hover {
   color: #d0910b;
 }
+/*
+* switch
+*/
+.biz-switch-container {
+  cursor: pointer;
+  display: inline-block;
+  margin-right: 10px;
+}
+.biz-switch-container.biz-switch-container-disable {
+  cursor: not-allowed;
+}
+.biz-switch-container span {
+  vertical-align: middle;
+}
+.biz-switch {
+  margin-right: 5px;
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  height: 22px;
+  min-width: 44px;
+  line-height: 20px;
+  vertical-align: middle;
+  border-radius: 20px;
+  border: 1px solid #ccc;
+  background-color: rgba(0, 0, 0, 0.25);
+  -webkit-transition: all .3s;
+  transition: all .3s;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.biz-switch-inner {
+  color: #fff;
+  font-size: 12px;
+  margin-left: 24px;
+  margin-right: 6px;
+  display: block;
+}
+.biz-switch-checked .biz-switch-inner {
+  margin-left: 6px;
+  margin-right: 24px;
+}
+.biz-switch:after {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  left: 1px;
+  top: 1px;
+  border-radius: 18px;
+  background-color: #fff;
+  content: " ";
+  -webkit-transition: all .3s, width .3s;
+  transition: all .3s, width .3s;
+}
+.biz-switch-checked:after {
+  left: 100%;
+  margin-left: -19px;
+}
+/**
+ * switch themes
+ */
+.biz-switch-container-indigo .biz-switch-checked {
+  background-color: #3f51b5;
+  border-color: #3f51b5;
+}
+.biz-switch-container-deep-purple .biz-switch-checked {
+  background-color: #673ab7;
+  border-color: #673ab7;
+}
+.biz-switch-container-purple .biz-switch-checked {
+  background-color: #9c27b0;
+  border-color: #9c27b0;
+}
+.biz-switch-container-pink .biz-switch-checked {
+  background-color: #e91e63;
+  border-color: #e91e63;
+}
+.biz-switch-container-red .biz-switch-checked {
+  background-color: #f44336;
+  border-color: #f44336;
+}
+.biz-switch-container-deep-orange .biz-switch-checked {
+  background-color: #ff5722;
+  border-color: #ff5722;
+}
+.biz-switch-container-gray .biz-switch-checked {
+  background-color: #9e9e9e;
+  border-color: #9e9e9e;
+}
+.biz-switch-container-blue-gray .biz-switch-checked {
+  background-color: #607d8b;
+  border-color: #607d8b;
+}
+.biz-switch-container-brown .biz-switch-checked {
+  background-color: #795548;
+  border-color: #795548;
+}
+.biz-switch-container-orange .biz-switch-checked {
+  background-color: #ff9800;
+  border-color: #ff9800;
+}
+.biz-switch-container-amber .biz-switch-checked {
+  background-color: #ffc107;
+  border-color: #ffc107;
+}
+.biz-switch-container-yellow .biz-switch-checked {
+  background-color: #ffe38e;
+  border-color: #ffe38e;
+}
+.biz-switch-container-lime .biz-switch-checked {
+  background-color: #cddc39;
+  border-color: #cddc39;
+}
+.biz-switch-container-light-green .biz-switch-checked {
+  background-color: #8bc34a;
+  border-color: #8bc34a;
+}
+.biz-switch-container-green .biz-switch-checked {
+  background-color: #4caf50;
+  border-color: #4caf50;
+}
+.biz-switch-container-teal .biz-switch-checked {
+  background-color: #009688;
+  border-color: #009688;
+}
+.biz-switch-container-cyan .biz-switch-checked {
+  background-color: #00bcd4;
+  border-color: #00bcd4;
+}
+.biz-switch-container-light-blue .biz-switch-checked {
+  background-color: #03a9f4;
+  border-color: #03a9f4;
+}
+.biz-switch-container-blue .biz-switch-checked {
+  background-color: #2196f3;
+  border-color: #2196f3;
+}
 /**
  * tab
  */

diff --git a/dist/jquery.bizui.js b/dist/jquery.bizui.js
@@ -7348,15 +7348,16 @@
             _require(24);
             _require(25);
             _require(26);
-            _require(28);
+            _require(27);
             _require(29);
             _require(30);
+            _require(31);
             var bizui = {
                     theme: 'blue',
                     codepoints: _require(7),
                     alert: dialog.alert,
                     confirm: dialog.confirm,
-                    Tooltip: _require(27)
+                    Tooltip: _require(28)
                 };
             window.bizui = bizui;
             module.exports = bizui;
@@ -12552,6 +12553,107 @@
             $.extend($.fn, { bizSelect: $.fn.selectric });
             module.exports = Select;
         },
+        function (module, exports) {
+            function Switch(switchDom, options) {
+                this.main = switchDom;
+                this.$main = $(this.main);
+                var defaultOption = { theme: window.bizui.theme };
+                this.options = $.extend(defaultOption, options || {});
+                this.init(this.options);
+            }
+            var defaultClass = 'biz-switch', defaultContainerClass = 'biz-switch-container', defaultContainerDisableClass = 'biz-switch-container-disable', checkedClass = 'biz-switch-checked', dataKey = 'bizSwitch';
+            Switch.prototype = {
+                init: function (options) {
+                    var title = this.$main.attr('title'), id = this.$main.attr('id') || '', theme = options.theme;
+                    var switchContainer = '<label class="' + defaultContainerClass + ' biz-switch-container-' + theme + '" for="' + id + '"><span class="biz-switch" id=""><span class="biz-switch-inner"></span></span><span>' + title + '</span></label>';
+                    this.$main.after(switchContainer).hide();
+                    this.$switchContainer = this.$main.next();
+                    this.$switchDom = this.$switchContainer.find('.biz-switch');
+                    if (this.$main.attr('checked')) {
+                        this.$switchDom.addClass(checkedClass);
+                    } else {
+                        this.$switchDom.addClass(defaultClass);
+                    }
+                    var self = this;
+                    this.$switchContainer.on('click.bizSwitch', function () {
+                        if (!self.main.disabled) {
+                            if (self.main.checked) {
+                                self.$switchDom.attr('class', [defaultClass].join(' '));
+                            } else {
+                                self.$switchDom.attr('class', [
+                                    defaultClass,
+                                    checkedClass
+                                ].join(' '));
+                            }
+                            if (id === '') {
+                                self.main.checked = !self.main.checked;
+                            }
+                        }
+                    });
+                },
+                off: function () {
+                    this.main.checked = false;
+                    this.$switchDom.attr('class', defaultClass);
+                },
+                on: function () {
+                    this.main.checked = true;
+                    this.$switchDom.attr('class', [
+                        defaultClass,
+                        checkedClass
+                    ].join(' '));
+                },
+                disable: function () {
+                    this.main.disabled = true;
+                    this.$switchDom.attr('class', defaultClass);
+                    this.$switchContainer.addClass(defaultContainerDisableClass);
+                },
+                enable: function () {
+                    this.main.disabled = false;
+                    this.$switchDom.attr('class', defaultClass + ' ' + (this.main.checked ? checkedClass : ''));
+                    this.$switchContainer.removeClass(defaultContainerDisableClass);
+                },
+                destroy: function () {
+                    this.$main.show();
+                    this.$switchContainer.off('click.bizSwitch').remove();
+                    this.$main.data(dataKey, null);
+                },
+                val: function () {
+                    if (this.$switchDom.hasClass(checkedClass)) {
+                        return 'on';
+                    }
+                    return 'off';
+                }
+            };
+            function isSwitch(elem) {
+                return elem.nodeType === 1 && elem.tagName.toLowerCase() === 'input' && elem.getAttribute('type').toLowerCase() === 'checkbox';
+            }
+            $.extend($.fn, {
+                bizSwitch: function (method) {
+                    var internal_return, args = arguments;
+                    this.each(function () {
+                        var instance = $(this).data(dataKey);
+                        if (instance) {
+                            if (typeof method === 'string' && typeof instance[method] === 'function') {
+                                internal_return = instance[method].apply(instance, Array.prototype.slice.call(args, 1));
+                                if (internal_return !== undefined) {
+                                    return false;
+                                }
+                            }
+                        } else {
+                            if (isSwitch(this) && (method === undefined || jQuery.isPlainObject(method))) {
+                                $(this).data(dataKey, new Switch(this, method));
+                            }
+                        }
+                    });
+                    if (internal_return !== undefined) {
+                        return internal_return;
+                    } else {
+                        return this;
+                    }
+                }
+            });
+            module.exports = Switch;
+        },
         function (module, exports) {
             function Tab(tab, options) {
                 this.main = tab;

diff --git a/dist/jquery.bizui.min.css b/dist/jquery.bizui.min.css
diff --git a/dist/jquery.bizui.min.js b/dist/jquery.bizui.min.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -86,6 +86,7 @@ gulp.task('doc', function(cb) {
         'src/ui/Panel.js',
         'src/ui/Radio.js',
         'src/ui/Select.js',
+        'src/ui/Switch.js',
         'src/ui/Tab.js',
         'src/ui/Table.js',
         'src/ui/Textarea.js',

diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
     <a href="#" class="active">BizUI</a>
     <a href="pages/tutorial.html">起步</a>
     <a href="pages/components.html">组件</a>
-    <a class="github" href="https://github.com/bizdevfe/biz-ui/releases" target="_blank">GitHub&nbsp;&nbsp;v1.5.2</a>
+    <a class="github" href="https://github.com/bizdevfe/biz-ui/releases" target="_blank">GitHub&nbsp;&nbsp;v1.6.0</a>
     <a href="https://github.com/bizdevfe/biz-ui-react" target="_blank">React</a>
     <a href="https://github.com/bizdevfe/biz-ui-mobile" target="_blank">Mobile</a>
 </nav>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "biz-ui",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "A jQuery plugin for business UI components",
   "author": "BizFE",
   "main": "dist/jquery.bizui.js",

diff --git a/pages/asset/css/main.css b/pages/asset/css/main.css
@@ -325,7 +325,7 @@ body.index {
 .components aside .calendar {background-position: 0 -46px; background-color: rgb(3, 169, 244);}
 .components aside .checkbox {background-position: 0 -92px; background-color: rgb(0, 188, 212);}
 .components aside .dialog {background-position: 0 -138px; background-color: rgb(0, 150, 136);}
-.components aside .dropdown {background-position: 0 -737px; background-color: rgb(76, 175, 80);}
+.components aside .dropdown {background-position: 0 -736px; background-color: rgb(76, 175, 80);}
 .components aside .input {background-position: 0 -184px; background-color: rgb(139, 195, 74);}
 .components aside .page {background-position: 0 -230px; background-color: rgb(205, 220, 57);}
 .components aside .panel {background-position: 0 -276px; background-color: rgb(255, 227, 142);}
@@ -335,10 +335,11 @@ body.index {
 .components aside .table {background-position: 0 -460px; background-color: rgb(96, 125, 139);}
 .components aside .textarea {background-position: 0 -506px; background-color: rgb(158, 158, 158);}
 .components aside .textline {background-position: 0 -552px; background-color: rgb(255, 87, 34);}
-.components aside .tooltips {background-position: 0 -599px; background-color: rgb(244, 67, 54);}
-.components aside .transfer {background-position: 0 -783px; background-color: rgb(233, 30, 99);}
-.components aside .tree {background-position: 0 -645px; background-color: rgb(156, 39, 176);}
-.components aside .treetable {background-position: 0 -691px; background-color: rgb(103, 58, 183)}
+.components aside .tooltips {background-position: 0 -598px; background-color: rgb(244, 67, 54);}
+.components aside .transfer {background-position: 0 -782px; background-color: rgb(233, 30, 99);}
+.components aside .tree {background-position: 0 -644px; background-color: rgb(156, 39, 176);}
+.components aside .treetable {background-position: 0 -690px; background-color: rgb(103, 58, 183)}
+.components aside .switch {background-position: 0 -828px; background-color: rgb(76, 175, 8);}
 .components .main {
     flex-grow: 1;
     padding-bottom: 120px;
@@ -497,6 +498,7 @@ ul.issues {
     .components aside .treetable {background-position: 0 -345px;}
     .components aside .dropdown {background-position: 0 -368px;}
     .components aside .transfer {background-position: 0 -391px;}
+    .components aside .switch {background-position: 0 -414px;}
     .components table.options {
         margin-left: 0;
         width: 100%;

diff --git a/pages/asset/img/icons.png b/pages/asset/img/icons.png
diff --git a/pages/asset/img/icons.psd b/pages/asset/img/icons.psd
diff --git a/pages/components.html b/pages/components.html
@@ -18,7 +18,7 @@
     <a href="../index.html">BizUI</a>
     <a href="tutorial.html">起步</a>
     <a href="#" class="active">组件</a>
-    <a class="github" href="https://github.com/bizdevfe/biz-ui/releases" target="_blank">GitHub&nbsp;&nbsp;v1.5.2</a>
+    <a class="github" href="https://github.com/bizdevfe/biz-ui/releases" target="_blank">GitHub&nbsp;&nbsp;v1.6.0</a>
     <a href="https://github.com/bizdevfe/biz-ui-react" target="_blank">React</a>
     <a href="https://github.com/bizdevfe/biz-ui-mobile" target="_blank">Mobile</a>
 </nav>
@@ -35,6 +35,7 @@
         <a href="#panel"><span class="panel"></span>Panel</a>
         <a href="#radio"><span class="radio"></span>Radio</a>
         <a href="#select"><span class="select"></span>Select</a>
+        <a href="#switch"><span class="switch"></span>Switch</a>
         <a href="#tab"><span class="tab"></span>Tab</a>
         <a href="#table"><span class="table"></span>Table</a>
         <a href="#textarea"><span class="textarea"></span>Textarea</a>
@@ -79,6 +80,7 @@ <h3>帮助</h3>
 <script src="src/components/Panel/Panel.js"></script>
 <script src="src/components/Radio/Radio.js"></script>
 <script src="src/components/Select/Select.js"></script>
+<script src="src/components/Switch/Switch.js"></script>
 <script src="src/components/Tab/Tab.js"></script>
 <script src="src/components/Table/Table.js"></script>
 <script src="src/components/Textarea/Textarea.js"></script>

diff --git a/pages/src/Router.js b/pages/src/Router.js
@@ -11,6 +11,7 @@ var Router = Backbone.Router.extend({
         'panel': 'panel',
         'radio': 'radio',
         'select': 'select',
+        'switch': 'switch',
         'tab': 'tab',
         'table': 'table',
         'textarea': 'textarea',
@@ -73,6 +74,10 @@ var Router = Backbone.Router.extend({
         this.startRout(new Select());
     },
 
+    switch: function() {
+        this.startRout(new Switch());
+    },
+
     tab: function() {
         this.startRout(new Tab());
     },