Merge pull request #60 in FUI/fineui from ~DAILER/fineui:master to master

* commit '0cf31f381266a55d833b64ef03d81fe87fe9a295': no message 解决区间滑块数值精度问题 no message no message 添加单值滑块和区间滑块 no message no message no message no message no message 完善 FineUI Demo 向详细控件中增加若干控件
7 years ago · ecb48d38c2
72 changed files with 71065 additions and 33303 deletions
--- a/bi/polyfill.js
+++ b/bi/polyfill.js
@ -1,93 +1,93 @@
-if(![].indexOf){
-    /**
-     * 检查指定的值是否在数组中
-     * @param {Object} o 要检查的值
-     * @return {Number}  o在数组中的索引（如果不在数组中则返回-1）
-     */
-    Array.prototype.indexOf = function (o) {
-        for (var i = 0, len = this.length; i < len; i++) {
-            if (_.isEqual(o, this[i])) {
-                return i;
-            }
-        }
-        return -1;
-    }
-}
-if(![].lastIndexOf){
-    /**
-     * 检查指定的值是否在数组中
-     * ie67不支持数组的这个方法
-     * @param {Object} o 要检查的值
-     * @return {Number}  o在数组中的索引（如果不在数组中则返回-1）
-     */
-    Array.prototype.lastIndexOf = function (o) {
-        for (var len = this.length, i = len - 1; i >= 0; i--) {
-            if (_.isEqual(o, this[i])) {
-                return i;
-            }
-        }
-        return -1;
-    }
-}/**
- * 特殊情况
- * Created by wang on 15/6/23.
- */
-//解决console未定义问题 guy
-window.console = window.console || (function () {
-        var c = {};
-        c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile
-            = c.clear = c.exception = c.trace = c.assert = function () {
-        };
-        return c;
-    })();
-/*
- * 前端缓存
- */
-window.localStorage || (window.localStorage = {
-    items: {},
-    setItem: function (k, v) {
-        BI.Cache.addCookie(k, v);
-    },
-    getItem: function (k) {
-        return BI.Cache.getCookie(k);
-    },
-    removeItem: function (k) {
-        BI.Cache.deleteCookie(k);
-    },
-    key: function () {
-
-    },
-    clear: function () {
-        this.items = {};
-    }
-});//修复ie9下sort方法的bug
-!function (window) {
-    var ua = window.navigator.userAgent.toLowerCase(),
-        reg = /msie|applewebkit.+safari/;
-    if (reg.test(ua)) {
-        var _sort = Array.prototype.sort;
-        Array.prototype.sort = function (fn) {
-            if (!!fn && typeof fn === 'function') {
-                if (this.length < 2) {
-                    return this;
-                }
-                var i = 0, j = i + 1, l = this.length, tmp, r = false, t = 0;
-                for (; i < l; i++) {
-                    for (j = i + 1; j < l; j++) {
-                        t = fn.call(this, this[i], this[j]);
-                        r = (typeof t === 'number' ? t :
-                                !!t ? 1 : 0) > 0;
-                        if (r === true) {
-                            tmp = this[i];
-                            this[i] = this[j];
-                            this[j] = tmp;
-                        }
-                    }
-                }
-                return this;
-            } else {
-                return _sort.call(this);
-            }
-        };
-    }
+if(![].indexOf){
+    /**
+     * 检查指定的值是否在数组中
+     * @param {Object} o 要检查的值
+     * @return {Number}  o在数组中的索引（如果不在数组中则返回-1）
+     */
+    Array.prototype.indexOf = function (o) {
+        for (var i = 0, len = this.length; i < len; i++) {
+            if (_.isEqual(o, this[i])) {
+                return i;
+            }
+        }
+        return -1;
+    }
+}
+if(![].lastIndexOf){
+    /**
+     * 检查指定的值是否在数组中
+     * ie67不支持数组的这个方法
+     * @param {Object} o 要检查的值
+     * @return {Number}  o在数组中的索引（如果不在数组中则返回-1）
+     */
+    Array.prototype.lastIndexOf = function (o) {
+        for (var len = this.length, i = len - 1; i >= 0; i--) {
+            if (_.isEqual(o, this[i])) {
+                return i;
+            }
+        }
+        return -1;
+    }
+}/**
+ * 特殊情况
+ * Created by wang on 15/6/23.
+ */
+//解决console未定义问题 guy
+window.console = window.console || (function () {
+        var c = {};
+        c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile
+            = c.clear = c.exception = c.trace = c.assert = function () {
+        };
+        return c;
+    })();
+/*
+ * 前端缓存
+ */
+window.localStorage || (window.localStorage = {
+    items: {},
+    setItem: function (k, v) {
+        BI.Cache.addCookie(k, v);
+    },
+    getItem: function (k) {
+        return BI.Cache.getCookie(k);
+    },
+    removeItem: function (k) {
+        BI.Cache.deleteCookie(k);
+    },
+    key: function () {
+
+    },
+    clear: function () {
+        this.items = {};
+    }
+});//修复ie9下sort方法的bug
+!function (window) {
+    var ua = window.navigator.userAgent.toLowerCase(),
+        reg = /msie|applewebkit.+safari/;
+    if (reg.test(ua)) {
+        var _sort = Array.prototype.sort;
+        Array.prototype.sort = function (fn) {
+            if (!!fn && typeof fn === 'function') {
+                if (this.length < 2) {
+                    return this;
+                }
+                var i = 0, j = i + 1, l = this.length, tmp, r = false, t = 0;
+                for (; i < l; i++) {
+                    for (j = i + 1; j < l; j++) {
+                        t = fn.call(this, this[i], this[j]);
+                        r = (typeof t === 'number' ? t :
+                                !!t ? 1 : 0) > 0;
+                        if (r === true) {
+                            tmp = this[i];
+                            this[i] = this[j];
+                            this[j] = tmp;
+                        }
+                    }
+                }
+                return this;
+            } else {
+                return _sort.call(this);
+            }
+        };
+    }
 }(window);
--- a/bi/widget.js
+++ b/bi/widget.js
--- a/demo/config.js
+++ b/demo/config.js
--- a/demo/css/main.css
+++ b/demo/css/main.css
@ -45,3 +45,49 @@ body {
 .bi-theme-dark body {
  background-color: #191B2B;
 }
+.demo-editor {
+  border: 1px solid #cccccc;
+}
+.bi-slider-track .background-track {
+  background-color: rgba(153, 153, 153, 0);
+  _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33999999, 99, endColorstr=#33999999, 99);
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+}
+.bi-slider-track .gray-track {
+  background: #cccccc;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.bi-slider-track .blue-track {
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.widget-slider-icon .x-icon {
+  display: block;
+  background: url('icon/slider.png') no-repeat;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-normal.png');
+  _background: none;
+  background-size: 100% 100%;
+}
+.widget-slider-icon:hover .x-icon {
+  display: block;
+  background: url('icon/双向箭头.png') no-repeat;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-active.png');
+  _background: none;
+  background-size: 100% 100%;
+}
+.widget-slider-icon::focus .x-icon {
+  display: block;
+  background: url('icon/双向箭头.png') no-repeat;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-active.png');
+  _background: none;
+  background-size: 100% 100%;
+}
+.widget-slider-icon.native .x-icon,
+.widget-slider-icon.disabled .x-icon {
+  display: block;
+}
--- a/demo/js/config/base.js
+++ b/demo/js/config/base.js
@ -1,7 +1,7 @@
 Demo.BASE_CONFIG = [{
    id: 2,
    text: "基础控件",
-    open: true
+    open: false
 }, {
    pId: 2,
    text: "bi.label",
--- a/demo/js/config/case.js
+++ b/demo/js/config/case.js
@ -1,7 +1,7 @@
 Demo.CASE_CONFIG = [{
    id: 3,
    text: "实例控件",
-    open: true,
+    open: false
 }, {
    pId: 3,
    id: 301,
--- a/demo/js/config/widget.js
+++ b/demo/js/config/widget.js
@ -1,48 +1,269 @@
 Demo.WIDGET_CONFIG = [{
-    id: 4,
-    text: "详细控件"
-}, {
-    id: 401,
-    pId: 4,
-    text: "table"
-}, {
-    pId: 401,
-    text: "bi.preview_table",
-    value: "demo.preview_table"
-}, {
-    pId: 401,
-    text: "bi.responsive_table",
-    value: "demo.responsive_table"
-}, {
-    pId: 401,
-    text: "bi.sequence_table",
-    value: "demo.sequence_table"
-}, {
-    pId: 401,
-    text: "bi.page_table",
-    value: "demo.page_table"
-}, {
-    id: 402,
-    pId: 4,
-    text: "tree"
-}, {
-    pId: 402,
-    text: "bi.multilayer_select_tree_combo",
-    value: "demo.multilayer_select_tree_combo"
-}, {
-    pId: 4,
-    text: "bi.multi_select_combo",
-    value: "demo.multi_select_combo"
-}, {
-    pId: 4,
-    text: "bi.path_chooser",
-    value: "demo.path_chooser"
-}, {
-    pId: 4,
-    text: "bi.relation_view",
-    value: "demo.relation_view"
-}, {
-    pId: 4,
-    text: "bi.interactive_arrangement",
-    value: "demo.interactive_arrangement"
-}];
+        id: 4,
+        text: "详细控件",
+        open: true
+    }, {
+        id: 400,
+        pId: 4,
+        text: "tree"
+    }, {
+        pId: 400,
+        text: "bi.multi_tree_combo",
+        value: "demo.multi_tree_combo"
+    }, {
+        id: 401,
+        pId: 4,
+        text: "table"
+    }, {
+        pId: 401,
+        text: "bi.preview_table",
+        value: "demo.preview_table"
+    }, {
+        pId: 401,
+        text: "bi.responsive_table",
+        value: "demo.responsive_table"
+    }, {
+        pId: 401,
+        text: "bi.excel_table",
+        value: "demo.excel_table"
+    }, {
+        pId: 4,
+        id: 402,
+        text: "年份控件",
+        open: false
+    }, {
+        pId: 402,
+        text: "bi.year_combo",
+        value: "demo.year"
+    }, {
+        pId: 4,
+        id: 403,
+        text: "月份控件",
+        open: false
+    }, {
+        pId: 403,
+        text: "bi.month_combo",
+        value: "demo.month"
+    }, {
+        pId: 4,
+        id: 404,
+        text: "季度控件",
+        open: false
+    }, {
+        pId: 404,
+        text: "bi.quarter_combo",
+        value: "demo.quarter"
+    }, {
+        pId: 4,
+        id: 405,
+        text: "下拉列表",
+        open: false
+    }, {
+        pId: 405,
+        text: "bi.down_list_combo",
+        value: "demo.down_list"
+    }, {
+        pId: 4,
+        id: 406,
+        text: "文本框控件",
+        open: false
+    }, {
+        pId: 406,
+        text: "bi.text_editor",
+        value: "demo.text_editor"
+    }, {
+        pId: 406,
+        text: "bi.search_editor",
+        value: "demo.search_editor"
+    }, {
+        pId: 406,
+        text: "bi.sign_editor",
+        value: "demo.sign_editor"
+    }, {
+        pId: 406,
+        text: "bi.sign_initial_editor",
+        value: "demo.sign_initial_editor"
+    }, {
+        pId: 406,
+        text: "bi.sign_style_editor",
+        value: "demo.sign_style_editor"
+    }, {
+        pId: 406,
+        text: "bi.state_editor",
+        value: "demo.state_editor"
+    }, {
+        pId: 406,
+        text: "bi.clear_editor",
+        value: "demo.clear_editor"
+    }, {
+        pId: 406,
+        text: "bi.record_editor",
+        value: "demo.record_editor"
+    }, {
+        pId: 406,
+        text: "bi.shelter_editor",
+        value: "demo.shelter_editor"
+    },
+    {
+        pId: 4,
+        id: 407,
+        text: "下拉框控件",
+        open: false
+    }, {
+        pId: 407,
+        text: "bi.text_value_combo",
+        value: "demo.text_value_combo"
+    }, {
+        pId: 407,
+        text: "bi.text_value_check_combo",
+        value: "demo.text_value_check_combo"
+    }, {
+        pId: 407,
+        text: "bi.text_value_down_list_combo",
+        value: "demo.text_value_down_list_combo"
+    }, {
+        pId: 407,
+        text: "bi.static_combo",
+        value: "demo.static_combo"
+    }, {
+        pId: 407,
+        text: "bi.icon_combo",
+        value: "demo.icon_combo"
+    }, {
+        pId: 407,
+        text: "bi.formula_combo",
+        value: "demo.formula_combo"
+    }, {
+        pId: 4,
+        id: 408,
+        text: "选择字段列表",
+        open: false
+    }, {
+        pId: 408,
+        text: "bi.placeholder"
+    }, {
+        pId: 4,
+        id: 409,
+        text: "公式编辑器",
+        open: false
+    }, {
+        pId: 409,
+        text: "bi.placeholder"
+    }, {
+        pId: 4,
+        id: 410,
+        text: "数值区间控件"
+    }, {
+        pId: 410,
+        text: "bi.numerical_interval",
+        value: "demo.numberical_interval"
+    }, {
+        pId: 4,
+        id: 411,
+        text: "下拉复选框有确定按钮"
+    }, {
+        pId: 411,
+        text: "bi.multi_select_combo",
+        value: "demo.multi_select_combo"
+    }, {
+        pId: 4,
+        id: 412,
+        text: "简单日期控件"
+    }, {
+        pId: 412,
+        text: "bi.date_combo",
+        value: "demo.date"
+    }, {
+        pId: 412,
+        text: "bi.date_pane_widget",
+        value: "demo.date_pane_widget"
+    }, {
+        pId: 412,
+        text: "bi.year_month_combo",
+        value: "demo.year_month_combo"
+    },{
+        pId: 412,
+        text: "bi.year_quarter_combo",
+        value: "demo.year_quarter_combo"
+    },{
+        pId: 4,
+        id: 413,
+        text: "简单下拉树"
+    }, {
+        pId: 413,
+        text: "bi.single_tree_combo",
+        value: "demo.single_tree_combo"
+    }, {
+        pId: 413,
+        text: "bi.multilayer_single_tree_combo",
+        value: "demo.multilayer_single_tree_combo"
+    }, {
+        pId: 4,
+        id: 414,
+        text: "可选下拉树"
+    }, {
+        pId: 414,
+        text: "bi.select_tree_combo",
+        value: "demo.select_tree_combo"
+    }, {
+        pId: 414,
+        text: "bi.multilayer_select_tree_combo",
+        value: "demo.multilayer_select_tree_combo"
+    }, {
+        pId: 4,
+        id: 415,
+        text: "路径选择"
+    }, {
+        pId: 415,
+        text: "bi.path_chooser",
+        value: "demo.path_chooser"
+    }, {
+        pId: 415,
+        text: "bi.direction_path_chooser",
+        value: "demo.direction_path_chooser"
+    }, {
+        pId: 4,
+        id: 416,
+        text: "关联视图"
+    }, {
+        pId: 416,
+        text: "bi.relation_view",
+        value: "demo.relation_view"
+    }, {
+        pId: 4,
+        id: 417,
+        text: "布局"
+    }, {
+        pId: 417,
+        text: "bi.adaptive_arrangement",
+        value: "demo.adaptive_arrangement"
+    }, {
+        pId: 417,
+        text: "bi.interactive_arrangement",
+        value: "demo.interactive_arrangement"
+    }, {
+        pId: 4,
+        id: 418,
+        text: "提示对话框"
+    }, {
+        pId: 418,
+        text: "bi.dialog",
+        value: "demo.dialog"
+    }, {
+        pId: 4,
+        id: 419,
+        text: "单值滑块"
+    }, {
+        pId: 419,
+        text: "bi.single_slider",
+        value: "demo.single_slider"
+    },{
+        pId: 4,
+        id: 420,
+        text: "区间滑块"
+    }, {
+        pId: 420,
+        text: "bi.interval_slider",
+        value: "demo.interval_slider"
+    },
+];
--- a/demo/js/widget/arrangment/demo.adaptive_arrangement.js
+++ b/demo/js/widget/arrangment/demo.adaptive_arrangement.js
@ -0,0 +1,121 @@
+Demo.AdaptiveArrangement = BI.inherit(BI.Widget, {
+
+    _createItem: function () {
+        var self = this;
+        var id = BI.UUID();
+        var item = BI.createWidget({
+            type: "bi.text_button",
+            id: id,
+            cls: "layout-bg" + BI.random(1, 8),
+            handler: function () {
+                self.arrangement.deleteRegion(id);
+            }
+        });
+        item.setValue(item.attr("id"));
+        return item;
+    },
+
+    render: function () {
+        var self = this;
+        this.arrangement = BI.createWidget({
+            type: "bi.adaptive_arrangement",
+            layoutType: BI.Arrangement.LAYOUT_TYPE.ADAPTIVE,
+            cls: "mvc-border",
+            width: 800,
+            height: 400,
+            items: []
+        });
+        var drag = BI.createWidget({
+            type: "bi.label",
+            cls: "mvc-border",
+            width: 100,
+            height: 25,
+            text: "drag me"
+        });
+
+        // drag.element.draggable && 
+        drag.element.draggable({
+            revert: true,
+            cursorAt: {
+                left: 0,
+                top: 0
+            },
+            drag: function (e, ui) {
+                self.arrangement.setPosition({
+                    left: ui.position.left,
+                    top: ui.position.top
+                }, {
+                    width: 300,
+                    height: 200
+                })
+            },
+            stop: function (e, ui) {
+                self.arrangement.addRegion({
+                    el: self._createItem()
+                });
+            },
+            helper: function (e) {
+                var helper = self.arrangement.getHelper();
+                return helper.element;
+            }
+        });
+
+        BI.createWidget({
+            type: "bi.absolute",
+            items: [{
+                el: drag,
+                left: 30,
+                top: 450
+            }, {
+                el: this.arrangement,
+                left: 30,
+                top: 30
+            }, {
+                el: {
+                    type: "bi.button",
+                    text: "回撤",
+                    height: 25,
+                    handler: function () {
+                        //self.arrangement.revoke();
+                    }
+                },
+                left: 130,
+                top: 450
+            }, {
+                el: {
+                    type: "bi.button",
+                    text: "getAllRegions",
+                    height: 25,
+                    handler: function () {
+                        var items = [];
+                        BI.each(self.arrangement.getAllRegions(), function (i, region) {
+                            items.push({
+                                id: region.id,
+                                left: region.left,
+                                top: region.top,
+                                width: region.width,
+                                height: region.height
+                            });
+                        });
+                        BI.Msg.toast(JSON.stringify(items));
+                    }
+                },
+                left: 230,
+                top: 450
+            }, {
+                el: {
+                    type: "bi.button",
+                    text: "relayout",
+                    height: 25,
+                    handler: function () {
+                        self.arrangement.relayout();
+                    }
+                },
+                left: 330,
+                top: 450
+            }]
+        });
+    }
+});
+
+BI.shortcut("demo.adaptive_arrangement", Demo.AdaptiveArrangement);
--- a/demo/js/widget/arrangment/demo.interactive_arrangement.js
+++ b/demo/js/widget/arrangment/demo.interactive_arrangement.js
--- a/demo/js/widget/combo/demo.formula_combo.js
+++ b/demo/js/widget/combo/demo.formula_combo.js
@ -0,0 +1,31 @@
+/**
+ * Created by Dailer on 2017/7/12.
+ */
+Demo.FormulaCombo = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+
+    render: function () {
+
+        var self = this;
+
+
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.formula_combo",
+                fieldItems: [{
+                    text: "A",
+                    value: "A",
+                    fieldType: 16
+                }],
+                width: 200,
+                height: 30
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.formula_combo", Demo.FormulaCombo);
--- a/demo/js/widget/combo/demo.icon_combo.js
+++ b/demo/js/widget/combo/demo.icon_combo.js
@ -0,0 +1,38 @@
+/**
+ * Created by Dailer on 2017/7/12.
+ */
+Demo.IconCombo = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+
+    render: function () {
+
+        var self = this;
+
+
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.icon_combo",
+                ref:function(_ref){
+                    self.refs=_ref;
+                },
+               // iconClass: "pull-down-ha-font",
+                items: [{
+                    value: "第一项",
+                    iconClass: "delete-font"
+                }, {
+                    value: "第二项",
+                    iconClass: "rename-font"
+                }, {
+                    value: "第三项",
+                    iconClass: "move-font"
+                }]
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.icon_combo", Demo.IconCombo);
--- a/demo/js/widget/combo/demo.static_combo.js
+++ b/demo/js/widget/combo/demo.static_combo.js
@ -0,0 +1,45 @@
+/**
+ * Created by Dailer on 2017/7/11.
+ */
+Demo.StaticCombo = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+
+
+    beforeMounted: function () {
+        this.refs.setValue(2);
+    },
+
+    render: function () {
+
+        var self = this;
+
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.static_combo",
+                text: "Value 不变",
+                width: 300,
+                ref: function (_ref) {
+                    self.refs = _ref;
+                },
+                items: [
+                    {
+                        text: "MVC-1",
+                        value: 1
+                    }, {
+                        text: "MVC-2",
+                        value: 2
+                    }, {
+                        text: "MVC-3",
+                        value: 3
+                    }
+                ]
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.static_combo", Demo.StaticCombo);
--- a/demo/js/widget/combo/demo.text_value_combo.js
+++ b/demo/js/widget/combo/demo.text_value_combo.js
@ -0,0 +1,60 @@
+/**
+ * Created by Dailer on 2017/7/11.
+ */
+Demo.TextValueCombo = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+    render: function () {
+
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.text_value_combo",
+                text: "天气热死了",
+                width: 300,
+                items: [{
+                    text: "MVC-1",
+                    value: 1
+                }, {
+                    text: "MVC-2",
+                    value: 2
+                }, {
+                    text: "MVC-3",
+                    value: 3
+                }]
+            },{
+                type: "bi.text_value_check_combo",
+                text: "天气热死了",
+                width: 300,
+                items: [{
+                    text: "MVC-1",
+                    value: 1
+                }, {
+                    text: "MVC-2",
+                    value: 2
+                }, {
+                    text: "MVC-3",
+                    value: 3
+                }]
+            },{
+                type: "bi.text_value_combo",
+                text: "天气热死了",
+                width: 300,
+                items: [{
+                    text: "MVC-1",
+                    value: 1
+                }, {
+                    text: "MVC-2",
+                    value: 2
+                }, {
+                    text: "MVC-3",
+                    value: 3
+                }]
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.text_value_combo", Demo.TextValueCombo);
--- a/demo/js/widget/combo/demo.text_value_down_list_combo.js
+++ b/demo/js/widget/combo/demo.text_value_down_list_combo.js
@ -0,0 +1,57 @@
+/**
+ * Created by Dailer on 2017/7/11.
+ */
+Demo.TextValueDownListCombo = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+
+
+    beforeMounted:function(){
+        this.refs.setValue(2);
+    },
+
+    render: function () {
+
+        var self = this;
+
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.label",
+                cls: "layout-bg2",
+                text: "分组+二级",
+                width: 300
+            }, {
+                type: "bi.text_value_down_list_combo",
+                text: "天气热死了",
+                width: 300,
+                ref: function (_ref) {
+                    self.refs = _ref;
+                },
+                items: [
+                    [{
+                        el: {
+                            text: "MVC-1",
+                            value: 1
+                        },
+                        children: [{
+                            text: "MVC-1-1",
+                            value: 11
+                        }]
+                    }],
+                    [{
+                        text: "MVC-2",
+                        value: 2
+                    }, {
+                        text: "MVC-3",
+                        value: 3
+                    }]
+                ]
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.text_value_down_list_combo", Demo.TextValueDownListCombo);
--- a/demo/js/widget/combo/demo.text_vlaue_check_combo.js
+++ b/demo/js/widget/combo/demo.text_vlaue_check_combo.js
@ -0,0 +1,32 @@
+/**
+ * Created by Dailer on 2017/7/11.
+ */
+Demo.TextValueCheckCombo = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+    render: function () {
+
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.text_value_check_combo",
+                text: "天气热死了",
+                width: 300,
+                items: [{
+                    text: "MVC-1",
+                    value: 1
+                }, {
+                    text: "MVC-2",
+                    value: 2
+                }, {
+                    text: "MVC-3",
+                    value: 3
+                }]
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.text_value_check_combo", Demo.TextValueCheckCombo);
--- a/demo/js/widget/date/demo.date.js
+++ b/demo/js/widget/date/demo.date.js
@ -0,0 +1,31 @@
+/**
+ * Created by Dailer on 2017/7/11.
+ */
+Demo.Date = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-date"
+    },
+
+    _init: function () {
+        Demo.Date.superclass._init.apply(this, arguments);
+    },
+
+    render: function () {
+
+        return {
+            type: "bi.horizontal_auto",
+            vgap: 10,
+            items: [{
+                type: "bi.date_combo",
+                width: 300
+            }, {
+                type: "bi.button",
+                text: "getVlaue",
+                height: 50,
+                width: 300
+            }]
+        }
+    }
+})
+
+BI.shortcut("demo.date", Demo.Date);
--- a/demo/js/widget/date/demo.datepane.js
+++ b/demo/js/widget/date/demo.datepane.js
@ -0,0 +1,39 @@
+Demo.DatePane = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-datepane"
+    },
+    render: function () {
+
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.vertical",
+                vgap: 10,
+                items: [{
+                        type: "bi.label",
+                        cls: "layout-bg2",
+                        text: "bi.date_pane_widget"
+                    }, {
+                        type: "bi.date_pane_widget",
+                        selectedTime: {
+                            year: 2017,
+                            month: 12,
+                            day: 11
+                        },
+                        height:300
+                    },
+                    {
+                        type: "bi.button",
+                        text: "getValue",
+                        handler: function () {
+                            BI.Msg.toast("date" + JSON.stringify(datepane.getValue()));
+                        }
+                    }
+                ],
+                width: "50%"
+            }]
+        }
+    }
+})
+
+BI.shortcut("demo.date_pane_widget", Demo.DatePane);
--- a/demo/js/widget/dialog/demo.dialog.js
+++ b/demo/js/widget/dialog/demo.dialog.js
@ -0,0 +1,27 @@
+Demo.DialogView = BI.inherit(BI.Widget, {
+
+    render: function () {
+        var items = [{
+            el: {
+                type: 'bi.button',
+                text: '弹出对话框',
+                level: 'common',
+                height: 30
+            }
+        }];
+        BI.each(items, function (i, item) {
+            item.el.handler = function () {
+                BI.Msg.alert('提示', "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写");
+            }
+        });
+
+        return {
+            type: "bi.left",
+            vgap: 200,
+            hgap: 20,
+            items: items
+        }
+    }
+});
+
+BI.shortcut("demo.dialog", Demo.DialogView);
--- a/demo/js/widget/downlist/demo.downlist.js
+++ b/demo/js/widget/downlist/demo.downlist.js
@ -0,0 +1,136 @@
+Demo.Downlist = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-downlist"
+    },
+
+    mounted: function () {
+        var downlist = this.downlist;
+        var label = this.label;
+        downlist.on(BI.DownListCombo.EVENT_CHANGE, function (value, fatherValue) {
+            label.setValue(JSON.stringify(downlist.getValue()));
+        });
+
+        this.downlist.on(BI.DownListCombo.EVENT_SON_VALUE_CHANGE, function (value, fatherValue) {
+            label.setValue(JSON.stringify(downlist.getValue()));
+        });
+    },
+
+
+    render: function () {
+        self = this;
+        return {
+            type: "bi.horizontal_adapt",
+            items: [{
+                type: "bi.down_list_combo",
+                ref: function (_ref) {
+                    self.downlist = _ref;
+                },
+                cls:"layout-bg3",
+                height: 30,
+                width: 100,
+                items: [
+                    [{
+                        el: {
+                            text: "column 1111",
+                            iconCls1: "check-mark-e-font",
+                            value: 11
+                        },
+                        children: [{
+                            text: "column 1.1",
+                            value: 21,
+                            cls: "dot-e-font",
+                            selected: true
+                        }, {
+                            text: "column 1.222222222222222222222222222222222222",
+                            cls: "dot-e-font",
+                            value: 22,
+                        }]
+                    }],
+                    [{
+                        el: {
+                            type: "bi.icon_text_icon_item",
+                            text: "column 2",
+                            iconCls1: "chart-type-e-font",
+                            cls: "dot-e-font",
+                            value: 12
+                        },
+                        disabled: true,
+                        children: [{
+                            type: "bi.icon_text_item",
+                            cls: "dot-e-font",
+                            height: 25,
+                            text: "column 2.1",
+                            value: 11
+                        }, {
+                            text: "column 2.2",
+                            value: 12,
+                            cls: "dot-e-font"
+                        }]
+                    }],
+                    [{
+                            text: "column 8",
+                            value: 18,
+                            cls: "dot-e-font",
+                            selected: true
+                        },
+                        {
+
+                            text: "column 9",
+                            cls: "dot-e-font",
+                            value: 19
+                        }
+                    ],
+                    [{
+                            text: "column 10",
+                            value: 20,
+                            cls: "dot-e-font",
+                            selected: true
+                        },
+                        {
+
+                            text: "column 11",
+                            cls: "dot-e-font",
+                            value: 21
+                        },
+                        {
+
+                            text: "column 12",
+                            cls: "dot-e-font",
+                            value: 22
+                        },
+                        {
+
+                            text: "column 13",
+                            cls: "dot-e-font",
+                            value: 23
+                        },
+                        {
+
+                            text: "column 14",
+                            cls: "dot-e-font",
+                            value: 24
+                        },
+                        {
+
+                            text: "column 15",
+                            cls: "dot-e-font",
+                            value: 23
+                        }
+                    ]
+
+                ]
+            }, {
+                type: "bi.label",
+                text: "显示选择值",
+                width:500,
+                cls:"layout-bg4",
+                ref: function (_ref) {
+                    self.label = _ref;
+                }
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.down_list", Demo.Downlist);
--- a/demo/js/widget/editor/demo.adapt_editor.js
+++ b/demo/js/widget/editor/demo.adapt_editor.js
@ -0,0 +1,46 @@
+/**
+ * Created by Dailer on 2017/7/11.
+ */
+Demo.AdaptEditor = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+
+
+
+    //这东西好奇怪,不支持设置宽度,那么渲染出来宽度几乎没有,无奈之下只能假装给他个默认值了
+    beforeMounted: function () {
+        this.refs.setValue("Winter is coming !")
+    },
+
+    render: function () {
+        var self = this;
+        var editor = BI.createWidget({
+            type: "bi.adapt_editor",
+            cls: "layout-bg5",
+            ref: function (_ref) {
+                self.refs = _ref;
+            }
+        })
+
+        var text=["You know nothing! Jon Snow","A Lannister always pays his debts.","Power is a curious thing."]
+
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                el: editor
+            }, {
+                type: "bi.button",
+                text: "为了展示长度真的是可变的,每点一下就换一行字",
+                handler: function () {
+                    var temp=text.shift();
+                    editor.setValue(temp);
+                    text.push(temp);
+                }
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.adapt_editor", Demo.AdaptEditor);
--- a/demo/js/widget/editor/demo.clear_editor.js
+++ b/demo/js/widget/editor/demo.clear_editor.js
@ -0,0 +1,22 @@
+/**
+ * Created by Dailer on 2017/7/11.
+ */
+Demo.ClearEditor = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+    render: function () {
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.clear_editor",
+                cls: "bi-border",
+                width: 300,
+                watermark: "这个是带清除按钮的"
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.clear_editor", Demo.ClearEditor);
--- a/demo/js/widget/editor/demo.record_editor.js
+++ b/demo/js/widget/editor/demo.record_editor.js
@ -0,0 +1,22 @@
+/**
+ * Created by Dailer on 2017/7/11.
+ */
+Demo.RecordEditor = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+    render: function () {
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.record_editor",
+                cls: "bi-border",
+                width: 300,
+                watermark: "这个是可以记录输入的"
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.record_editor", Demo.RecordEditor);
--- a/demo/js/widget/editor/demo.search_editor.js
+++ b/demo/js/widget/editor/demo.search_editor.js
@ -0,0 +1,29 @@
+/**
+ * Created by Dailer on 2017/7/11.
+ */
+Demo.SearchEditor = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-exceltable"
+    },
+    render: function () {
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.search_editor",
+                width: 300,
+                watermark:"添加合法性判断",
+                errorText: "长度必须大于4",
+                validationChecker:function(){
+                    return this.getValue().length > 4 ? true : false
+                }
+            },{
+                type: "bi.small_search_editor",
+                width: 300,
+                watermark:"这个是 small,小一号"
+            }],
+            vgap:20
+        }
+    }
+})
+
+BI.shortcut("demo.search_editor", Demo.SearchEditor);
--- a/demo/js/widget/editor/demo.shelter_editor.js
+++ b/demo/js/widget/editor/demo.shelter_editor.js
@ -0,0 +1,41 @@
+/**
+ * Created by Dailer on 2017/7/11.
+ */
+Demo.ClearEditor = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+    render: function () {
+        var editor;
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.shelter_editor",
+                cls: "bi-border",
+                ref:function(_ref){
+                    editor=_ref;
+                },
+                width: 300,
+                watermark: "这个是带标记的"
+            },{
+                type:"bi.button",
+                text:"setValue",
+                width:300,
+                handler:function(){
+                    editor.setValue("凛冬将至");
+                }
+            },{
+                type:"bi.button",
+                text:"doHighLight",
+                width:300,
+                handler:function(){
+                    editor.doHighLight();
+                    console.log(editor.getState());
+                }
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.shelter_editor", Demo.ClearEditor);
--- a/demo/js/widget/editor/demo.sign_editor.js
+++ b/demo/js/widget/editor/demo.sign_editor.js
@ -0,0 +1,24 @@
+/**
+ * Created by Dailer on 2017/7/14.
+ */
+Demo.SignEditor = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+    render: function () {
+        return {
+            type: "bi.horizontal_adapt",
+            items: [{
+                type: "bi.sign_editor",
+                //  cls:"layout-bg5",
+                value: "123",
+                text: "456",
+                width: 300
+            }],
+            vgap: 20
+
+        }
+    }
+})
+
+BI.shortcut("demo.sign_editor", Demo.SignEditor);
--- a/demo/js/widget/editor/demo.sign_initial_editor.js
+++ b/demo/js/widget/editor/demo.sign_initial_editor.js
@ -0,0 +1,24 @@
+/**
+ * Created by Dailer on 2017/7/11.
+ */
+Demo.SignInitialEditor = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+    render: function () {
+        return {
+            type: "bi.horizontal_adapt",
+            items: [{
+                type: "bi.sign_initial_editor",
+                cls:"layout-bg5",
+                value:"123",
+                text:"456",
+                width: 300
+            }],
+            vgap:20
+
+        }
+    }
+})
+
+BI.shortcut("demo.sign_initial_editor", Demo.SignInitialEditor);
--- a/demo/js/widget/editor/demo.sign_style_editor.js
+++ b/demo/js/widget/editor/demo.sign_style_editor.js
@ -0,0 +1,22 @@
+/**
+ * Created by Dailer on 2017/7/11.
+ */
+Demo.SignStyleEditor = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-exceltable"
+    },
+    render: function () {
+        return {
+            type: "bi.horizontal_adapt",
+            items: [{
+                type: "bi.sign_style_editor",
+                cls:"layout-bg5",
+                value:"12313",
+                width: 300
+            }],
+            vgap:20
+        }
+    }
+})
+
+BI.shortcut("demo.sign_style_editor", Demo.SignStyleEditor);
--- a/demo/js/widget/editor/demo.state_editor.js
+++ b/demo/js/widget/editor/demo.state_editor.js
@ -0,0 +1,24 @@
+/**
+ * Created by Dailer on 2017/7/11.
+ */
+Demo.StateEditor = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+    render: function () {
+        return {
+            type: "bi.horizontal_adapt",
+            items: [{
+                type: "bi.state_editor",
+                cls:"bi-border",
+                value:"123",
+                text:"456",
+                width: 300
+            }],
+            vgap:20
+
+        }
+    }
+})
+
+BI.shortcut("demo.state_editor", Demo.StateEditor);
--- a/demo/js/widget/editor/demo.text_editor.js
+++ b/demo/js/widget/editor/demo.text_editor.js
@ -0,0 +1,28 @@
+/**
+ * Created by Dailer on 2017/7/11.
+ */
+Demo.TextEditor = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-exceltable"
+    },
+    render: function () {
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.text_editor",
+                watermark:"这是水印,watermark",
+                width: 300
+            },{
+                type: "bi.text_editor",
+                watermark:"这个不予许空",
+                allowBlank: false,
+                errorText: "非空!",
+                width: 300
+            }],
+            vgap:20
+
+        }
+    }
+})
+
+BI.shortcut("demo.text_editor", Demo.TextEditor);
--- a/demo/js/widget/intervalslider/demo.interval_slider.js
+++ b/demo/js/widget/intervalslider/demo.interval_slider.js
@ -0,0 +1,70 @@
+/**
+ * Created by Dailer on 2017/7/14.
+ */
+Demo.IntervalSlider = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+
+    render: function () {
+        var self = this;
+        var min = BI.createWidget({
+            type: "bi.text_editor",
+            watermark: "min",
+            width: 100
+        });
+        var max = BI.createWidget({
+            type: "bi.text_editor",
+            watermark: "max",
+            width: 100
+        })
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.interval_slider",
+                ref: function (_ref) {
+                    self.slider = _ref;
+                },
+                width: 300,
+                height: 90
+            }, {
+                type: "bi.center_adapt",
+                width: 300,
+                items: [{
+                    type: "bi.text",
+                    text: "min"
+                }, min, {
+                    type: "bi.text",
+                    text: "max"
+                }, max]
+            }, {
+                type: "bi.button",
+                text: "populate",
+                handler: function () {
+                    self.slider.setMinAndMax({
+                        min: min.getValue() || 0,
+                        max: max.getValue() || 100
+                    });
+                    self.slider.populate();
+                },
+                width: 300
+            }, {
+                type: "bi.button",
+                text: "setValue",
+                handler: function () {
+
+                    //既然 setVlaue后要重新 populate 才能生效,为何不直接在 setValue方法的结尾调用 populate 方法呢?
+                    self.slider.setValue({
+                        min: 20,
+                        max: 80
+                    });
+                    self.slider.populate();
+                },
+                width: 300
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.interval_slider", Demo.IntervalSlider);
--- a/demo/js/widget/month/demo.month.js
+++ b/demo/js/widget/month/demo.month.js
@ -0,0 +1,20 @@
+/**
+ * Created by Dailer on 2017/7/11.
+ */
+Demo.Month = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-exceltable"
+    },
+    render: function () {
+        return {
+            type: "bi.horizontal_adapt",
+            items: [{
+                type: "bi.month_combo",
+                width: 300
+            }]
+
+        }
+    }
+})
+
+BI.shortcut("demo.month", Demo.Month);
--- a/demo/js/widget/multiselect/demo.multi_select_combo.js
+++ b/demo/js/widget/multiselect/demo.multi_select_combo.js
@ -44,8 +44,8 @@ Demo.MultiSelectCombo = BI.inherit(BI.Widget, {
            var search = BI.Func.getSearchResult(items, kw);
            items = search.matched.concat(search.finded);
        });
-        if (options.selectedValues) {//过滤
-            var filter = BI.makeObject(options.selectedValues, true);
+        if (options.selected_values) {//过滤
+            var filter = BI.makeObject(options.selected_values, true);
            items = BI.filter(items, function (i, ob) {
                return !filter[ob.value];
            });
@ -74,7 +74,7 @@ Demo.MultiSelectCombo = BI.inherit(BI.Widget, {
            scrolly: false,
            items: [{
                el: this._createMultiSelectCombo(),
-                right: 10,
+                right: "50%",
                top: 10
            }]
        }
--- a/demo/js/widget/multitree/demo.multi_tree_combo.js
+++ b/demo/js/widget/multitree/demo.multi_tree_combo.js
@ -0,0 +1,41 @@
+/**
+ * Created by Dailer on 2017/7/13.
+ */
+Demo.MultiTreeCombo = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+
+    render: function () {
+        var self = this;
+        var items = BI.deepClone(Demo.CONSTANTS.TREE);
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.multi_tree_combo",
+                ref: function (_ref) {
+                    self.tree = _ref;
+                },
+                itemsCreator: function (options, callback) {
+                     console.log(options);
+                    
+                    
+                    callback({
+                        items: items
+                    });
+                },
+                width: 300
+            }, {
+                type: "bi.button",
+                text: "getVlaue",
+                handler: function () {
+                    BI.Msg.toast(JSON.stringify(self.tree.getValue()));
+                },
+                width: 300
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.multi_tree_combo", Demo.MultiTreeCombo);
--- a/demo/js/widget/numericalinterval/demo.numerical_interval.js
+++ b/demo/js/widget/numericalinterval/demo.numerical_interval.js
@ -0,0 +1,44 @@
+/**
+ * Created by Dailer on 2017/7/12.
+ */
+Demo.NumericalInterval = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-exceltable"
+    },
+
+    mounted: function () {
+        var numerical = this.numerical;
+        var label = this.label;
+        numerical.on(BI.NumericalInterval.EVENT_CHANGE, function () {
+            var temp = numerical.getValue();
+            var res = "大于" + (temp.closemin ? "等于 " : " ") + temp.min + " 小于" + (temp.closemax ? "等于 " : " ") + temp.max;
+            label.setValue(res);
+        })
+    },
+
+
+
+
+    render: function () {
+        var self = this;
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.numerical_interval",
+                ref: function (_ref) {
+                    self.numerical = _ref;
+                },
+                width: 500
+            }, {
+                type: "bi.label",
+                ref: function (_ref) {
+                    self.label = _ref;
+                },
+                text: "显示结果"
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.numberical_interval", Demo.NumericalInterval);
--- a/demo/js/widget/pathchooser/demo.directionpathchooser.js
+++ b/demo/js/widget/pathchooser/demo.directionpathchooser.js
@ -0,0 +1,77 @@
+
+
+
+Demo.DirectionPathChooser = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-direction-path-chooser"
+    },
+
+    render: function () {
+        return {
+            type: "bi.center_adapt",
+            items: [
+                {
+                    type: "bi.direction_path_chooser",
+                    items: [[{
+                        "region": "8c4460bc3605685e",
+                        "regionText": "采购订单XXX",
+                        "text": "ID",
+                        "value": "1"
+                    }, {
+                        "region": "0fbd0dc648f41e97",
+                        "regionText": "采购订单",
+                        "text": "学号",
+                        "value": "3"
+                    }, {
+                        "region": "c6d72d6c7e19a667",
+                        "regionText": "供应商基本信息",
+                        "text": "ID",
+                        "value": "5"
+                    }], [{
+                        "region": "ed013e18cc7c8637",
+                        "regionText": "采购订单XXX",
+                        "text": "ID",
+                        "value": "1"
+                    }, {
+                        "region": "153d75878431f8ee",
+                        "regionText": "A3",
+                        "text": "学号",
+                        "value": "2"
+                    }, {
+                        "region": "3861fb024c7d7825",
+                        "regionText": "采购订单",
+                        "text": "学号",
+                        "value": "3"
+                    }, {
+                        "region": "88e3e5071bd10bc5",
+                        "regionText": "供应商",
+                        "text": "ID",
+                        "value": "4"
+                    }, {
+                        "region": "8476c77ab5c147e0",
+                        "regionText": "供应商基本信息",
+                        "text": "ID",
+                        "value": "5"
+                    }], [{
+                        "region": "f00f67fbb9fba6fe",
+                        "regionText": "采购订单XXX",
+                        "text": "ID",
+                        "value": "1"
+                    }, {
+                        "region": "1e8badf5d5793408",
+                        "regionText": "A3",
+                        "text": "学号",
+                        "value": "2"
+                    }, {
+                        "region": "de1ebd3d0986a294",
+                        "regionText": "供应商基本信息",
+                        "text": "ID",
+                        "value": "5"
+                    }]]
+                }
+            ]
+        }
+    }
+})
+
+BI.shortcut("demo.direction_path_chooser",Demo.DirectionPathChooser);
--- a/demo/js/widget/pathchooser/demo.pathchooser.js
+++ b/demo/js/widget/pathchooser/demo.pathchooser.js
--- a/demo/js/widget/quarter/demo.quarter.js
+++ b/demo/js/widget/quarter/demo.quarter.js
@ -0,0 +1,20 @@
+/**
+ * Created by Dailer on 2017/7/11.
+ */
+Demo.Quarter = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-exceltable"
+    },
+    render: function () {
+        return {
+            type: "bi.horizontal_adapt",
+            items: [{
+                type: "bi.quarter_combo",
+                width: 300
+            }]
+
+        }
+    }
+})
+
+BI.shortcut("demo.quarter", Demo.Quarter);
--- a/demo/js/widget/relationview/demo.relationview.js
+++ b/demo/js/widget/relationview/demo.relationview.js
--- a/demo/js/widget/selecttree/demo.multilayer_select_tree_combo.js
+++ b/demo/js/widget/selecttree/demo.multilayer_select_tree_combo.js
@ -0,0 +1,35 @@
+/**
+ * Created by Dailer on 2017/7/13.
+ */
+Demo.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+
+    render: function () {
+        var self = this;
+        var items = BI.deepClone(Demo.CONSTANTS.TREE);
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.multilayer_select_tree_combo",
+                ref: function (_ref) {
+                    self.tree = _ref;
+                },
+                text: "默认值",
+                items: items,
+                width: 300
+            }, {
+                type: "bi.button",
+                text: "getVlaue",
+                handler: function () {
+                    BI.Msg.toast(self.tree.getValue()[0]);
+                },
+                width: 300
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.multilayer_select_tree_combo", Demo.MultiLayerSelectTreeCombo);
--- a/demo/js/widget/selecttree/demo.select_tree_combo.js
+++ b/demo/js/widget/selecttree/demo.select_tree_combo.js
@ -0,0 +1,182 @@
+/**
+ * Created by Dailer on 2017/7/13.
+ */
+Demo.SelectTreeCombo = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-exceltable"
+    },
+
+    render: function () {
+        var self = this;
+        var items = [{
+            id: 1,
+            text: "第一项",
+            value: 1,
+            isParent: true,
+            title: "第一项"
+        }, {
+            id: 2,
+            text: "第二项",
+            value: 2,
+            isParent: true,
+            title: "第二项"
+        }, {
+            id: 3,
+            text: "第三项",
+            value: 3,
+            isParent: true,
+            open: true,
+            title: "第三项"
+        }, {
+            id: 4,
+            text: "第四项",
+            value: 4,
+            isParent: true,
+            title: "第四项"
+        }, {
+            id: 5,
+            text: "第五项",
+            value: 5,
+            isParent: true,
+            title: "第五项"
+        }, {
+            id: 6,
+            text: "第六项",
+            value: 6,
+            isParent: true,
+            open: true,
+            title: "第六项"
+        }, {
+            id: 7,
+            text: "第七项",
+            value: 7,
+            isParent: true,
+            open: true,
+            title: "第七项"
+        }, {
+            id: 11,
+            pId: 1,
+            text: "子项1",
+            value: 11,
+            title: "子项1"
+        }, {
+            id: 12,
+            pId: 1,
+            text: "子项2",
+            value: 12,
+            title: "子项2"
+        }, {
+            id: 13,
+            pId: 1,
+            text: "子项3",
+            value: 13,
+            title: "子项3"
+        }, {
+            id: 21,
+            pId: 2,
+            text: "子项1",
+            value: 21,
+            title: "子项1"
+        }, {
+            id: 22,
+            pId: 2,
+            text: "子项2",
+            value: 22,
+            title: "子项2"
+        }, {
+            id: 31,
+            pId: 3,
+            text: "子项1",
+            value: 31,
+            title: "子项1"
+        }, {
+            id: 32,
+            pId: 3,
+            text: "子项2",
+            value: 32,
+            title: "子项2"
+        }, {
+            id: 33,
+            pId: 3,
+            text: "子项3",
+            value: 33,
+            title: "子项3"
+        }, {
+            id: 41,
+            pId: 4,
+            text: "子项1",
+            value: 41,
+            title: "子项1"
+        }, {
+            id: 42,
+            pId: 4,
+            text: "子项2",
+            value: 42,
+            title: "子项2"
+        }, {
+            id: 43,
+            pId: 4,
+            text: "子项3",
+            value: 43,
+            title: "子项3"
+        }, {
+            id: 51,
+            pId: 5,
+            text: "子项1",
+            value: 51,
+            title: "子项1"
+        }, {
+            id: 52,
+            pId: 5,
+            text: "子项2",
+            value: 52,
+            title: "子项2"
+        }, {
+            id: 61,
+            pId: 6,
+            text: "子项1",
+            value: 61,
+            title: "子项1"
+        }, {
+            id: 62,
+            pId: 6,
+            text: "子项2",
+            value: 62,
+            title: "子项2"
+        }, {
+            id: 71,
+            pId: 7,
+            text: "子项1",
+            value: 71,
+            title: "子项1"
+        }, {
+            id: 72,
+            pId: 7,
+            text: "子项2",
+            value: 72,
+            title: "子项2"
+        }];
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.select_tree_combo",
+                ref: function (_ref) {
+                    self.tree = _ref;
+                },
+                text: "默认值",
+                items: items,
+                width: 300
+            }, {
+                type: "bi.button",
+                text: "getVlaue",
+                handler: function () {
+                    BI.Msg.toast(self.tree.getValue()[0]);
+                },
+                width: 300
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.select_tree_combo", Demo.SelectTreeCombo);
--- a/demo/js/widget/singleslider/demo.single_slider.js
+++ b/demo/js/widget/singleslider/demo.single_slider.js
@ -0,0 +1,48 @@
+/**
+ * Created by Dailer on 2017/7/14.
+ */
+Demo.SingleSlider = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+
+    render: function () {
+        var self = this;
+
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.single_slider",
+                ref: function (_ref) {
+                    self.slider = _ref;
+                },
+                width: 300,
+                height: 50
+            }, {
+                type: "bi.button",
+                text: "populate",
+                handler: function () {
+                    self.slider.setMinAndMax({
+                        min: 1,
+                        max: 100
+                    });
+                    self.slider.populate();
+                },
+                width: 300
+            }, {
+                type: "bi.button",
+                text: "setValue",
+                handler: function () {
+
+                    //既然 setVlaue后要重新 populate 才能生效,为何不直接在 setValue方法的结尾调用 populate 方法呢?
+                    self.slider.setValue(50);
+                    self.slider.populate();
+                },
+                width: 300
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.single_slider", Demo.SingleSlider);
--- a/demo/js/widget/singletree/demo.multilayer_single_tree_combo.js
+++ b/demo/js/widget/singletree/demo.multilayer_single_tree_combo.js
@ -0,0 +1,35 @@
+/**
+ * Created by Dailer on 2017/7/13.
+ */
+Demo.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+
+    render: function () {
+        var self = this;
+        var items = BI.deepClone(Demo.CONSTANTS.TREE);
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.multilayer_single_tree_combo",
+                ref: function (_ref) {
+                    self.tree = _ref;
+                },
+                text: "默认值",
+                items: items,
+                width: 300
+            }, {
+                type: "bi.button",
+                text: "getVlaue",
+                handler: function () {
+                    BI.Msg.toast(self.tree.getValue()[0]);
+                },
+                width: 300
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.multilayer_single_tree_combo", Demo.MultiLayerSingleTreeCombo);
--- a/demo/js/widget/singletree/demo.single_tree_combo.js
+++ b/demo/js/widget/singletree/demo.single_tree_combo.js
@ -0,0 +1,181 @@
+/**
+ * Created by Dailer on 2017/7/13.
+ */
+Demo.SingleTreeCombo = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-exceltable"
+    },
+
+    render: function () {
+        var self = this;
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.single_tree_combo",
+                ref: function (_ref) {
+                    self.tree = _ref;
+                },
+                text: "默认值",
+                items: [{
+                    id: 1,
+                    text: "第一项",
+                    value: 1,
+                    isParent: true,
+                    title: "第一项"
+                }, {
+                    id: 2,
+                    text: "第二项",
+                    value: 1,
+                    isParent: true,
+                    title: "第二项"
+                }, {
+                    id: 3,
+                    text: "第三项",
+                    value: 1,
+                    isParent: true,
+                    open: true,
+                    title: "第三项"
+                }, {
+                    id: 4,
+                    text: "第四项",
+                    value: 1,
+                    isParent: true,
+                    title: "第四项"
+                }, {
+                    id: 5,
+                    text: "第五项",
+                    value: 1,
+                    isParent: true,
+                    title: "第五项"
+                }, {
+                    id: 6,
+                    text: "第六项",
+                    value: 1,
+                    isParent: true,
+                    open: true,
+                    title: "第六项"
+                }, {
+                    id: 7,
+                    text: "第七项",
+                    value: 1,
+                    isParent: true,
+                    open: true,
+                    title: "第七项"
+                }, {
+                    id: 11,
+                    pId: 1,
+                    text: "子项1",
+                    value: 11,
+                    title: "子项1"
+                }, {
+                    id: 12,
+                    pId: 1,
+                    text: "子项2",
+                    value: 12,
+                    title: "子项2"
+                }, {
+                    id: 13,
+                    pId: 1,
+                    text: "子项3",
+                    value: 13,
+                    title: "子项3"
+                }, {
+                    id: 21,
+                    pId: 2,
+                    text: "子项1",
+                    value: 21,
+                    title: "子项1"
+                }, {
+                    id: 22,
+                    pId: 2,
+                    text: "子项2",
+                    value: 22,
+                    title: "子项2"
+                }, {
+                    id: 31,
+                    pId: 3,
+                    text: "子项1",
+                    value: 31,
+                    title: "子项1"
+                }, {
+                    id: 32,
+                    pId: 3,
+                    text: "子项2",
+                    value: 32,
+                    title: "子项2"
+                }, {
+                    id: 33,
+                    pId: 3,
+                    text: "子项3",
+                    value: 33,
+                    title: "子项3"
+                }, {
+                    id: 41,
+                    pId: 4,
+                    text: "子项1",
+                    value: 41,
+                    title: "子项1"
+                }, {
+                    id: 42,
+                    pId: 4,
+                    text: "子项2",
+                    value: 42,
+                    title: "子项2"
+                }, {
+                    id: 43,
+                    pId: 4,
+                    text: "子项3",
+                    value: 43,
+                    title: "子项3"
+                }, {
+                    id: 51,
+                    pId: 5,
+                    text: "子项1",
+                    value: 51,
+                    title: "子项1"
+                }, {
+                    id: 52,
+                    pId: 5,
+                    text: "子项2",
+                    value: 52,
+                    title: "子项2"
+                }, {
+                    id: 61,
+                    pId: 6,
+                    text: "子项1",
+                    value: 61,
+                    title: "子项1"
+                }, {
+                    id: 62,
+                    pId: 6,
+                    text: "子项2",
+                    value: 62,
+                    title: "子项2"
+                }, {
+                    id: 71,
+                    pId: 7,
+                    text: "子项1",
+                    value: 71,
+                    title: "子项1"
+                }, {
+                    id: 72,
+                    pId: 7,
+                    text: "子项2",
+                    value: 72,
+                    title: "子项2"
+                }],
+                width: 300
+            }, {
+                type: "bi.button",
+                text: "getVlaue",
+                handler: function () {
+                    BI.Msg.toast(self.tree.getValue()[0]);
+                },
+                width: 300
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.single_tree_combo", Demo.SingleTreeCombo);
--- a/demo/js/widget/table/demo.excel_table.js
+++ b/demo/js/widget/table/demo.excel_table.js
@ -0,0 +1,40 @@
+/**
+ * Created by Dailer on 2017/7/12.
+ */
+Demo.ExcelTable = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-exceltable"
+    },
+    render: function () {
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.excel_table",
+                columnSize: [200,200,200,200,200],
+                items: [
+                    [{
+                        type: "bi.label",
+                        cls: "layout-bg1",
+                        text: "第一行第一列"
+                    }, {
+                        type: "bi.label",
+                        cls: "layout-bg2",
+                        text: "第一行第二列"
+                    }],
+                    [{
+                        type: "bi.label",
+                        cls: "layout-bg3",
+                        text: "第二行第一列"
+                    }, {
+                        type: "bi.label",
+                        cls: "layout-bg4",
+                        text: "第二行第二列"
+                    }]
+                ]
+            }],
+            width:500
+        }
+    }
+})
+
+BI.shortcut("demo.excel_table", Demo.ExcelTable);
--- a/demo/js/widget/timeinterval/demo.time_interval.js
+++ b/demo/js/widget/timeinterval/demo.time_interval.js
@ -0,0 +1,33 @@
+/**
+ * Created by Dailer on 2017/7/13.
+ */
+Demo.TimeInterval = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+
+    render: function () {
+        var self = this;
+        var items = BI.deepClone(Demo.CONSTANTS.TREE);
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.time_interval",
+                ref: function (_ref) {
+                    self.interval = _ref;
+                },
+                width: 300
+            }, {
+                type: "bi.button",
+                text: "getVlaue",
+                handler: function () {
+                    BI.Msg.toast(JSON.stringify(self.interval.getValue()));
+                },
+                width: 300
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.time_interval", Demo.TimeInterval);
--- a/demo/js/widget/tree/demo.multilayer_select_tree_combo.js
+++ b/demo/js/widget/tree/demo.multilayer_select_tree_combo.js
@ -1,66 +0,0 @@
-/**
- * Created by User on 2017/3/22.
- */
-Demo.MultiSelectCombo = BI.inherit(BI.Widget, {
-    props: {},
-
-    render: function (vessel) {
-        var TREEWITHCHILDREN = [{
-            id: -1, value: "根目录", text: "根目录", children: [
-                {
-                    id: 1, value: "第一级目录1", text: "第一级目录1", children: [
-                    {id: 11, value: "第二级文件1", text: "第二级文件1"},
-                    {
-                        id: 12, value: "第二级目录2", text: "第二级目录2", children: [
-                        {
-                            id: 121, value: "第三级目录1", text: "第三级目录1", children: [
-                            {
-                                id: 1211, value: "第四级目录1", text: "第四级目录1", children: [
-                                {id: 12111, value: "第五级文件1", text: "第五级文件1"}
-                            ]
-                            }
-                        ]
-                        },
-                        {id: 122, value: "第三级文件1", text: "第三级文件1"}
-                    ]
-                    }
-                ]
-                },
-                {
-                    id: 2, value: "第一级目录2", text: "第一级目录2", children: [
-                    {
-                        id: 21, value: "第二级目录3", text: "第二级目录3", children: [
-                        {
-                            id: 211, value: "第三级目录2", text: "第三级目录2", children: [
-                            {id: 2111, value: "第四级文件1", text: "第四级文件1"}
-                        ]
-                        },
-                        {id: 212, value: "第三级文件2", text: "第三级文件2"}
-                    ]
-                    },
-                    {id: 22, value: "第二级文件2", text: "第二级文件2"}
-                ]
-                }
-            ]
-        }];
-        var items = BI.deepClone(TREEWITHCHILDREN);
-        var combo = BI.createWidget({
-            type: "bi.multilayer_select_tree_combo",
-        });
-
-        combo.populate(items);
-        return {
-            type: "bi.vertical",
-            items: [combo, {
-                type: "bi.button",
-                width: 100,
-                text: "getValue",
-                handler: function () {
-                    BI.Msg.alert("", JSON.stringify(combo.getValue()));
-                }
-            }],
-            vgap: 100
-        }
-    }
-});
-BI.shortcut("demo.multilayer_select_tree_combo", Demo.MultiSelectCombo);
--- a/demo/js/widget/tree/demo.switch_tree.js
+++ b/demo/js/widget/tree/demo.switch_tree.js
@ -0,0 +1,24 @@
+/**
+ * Created by Dailer on 2017/7/13.
+ */
+Demo.SwitchTree = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+    render: function () {
+
+        var items = BI.deepClone(Demo.CONSTANTS.TREE);
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.switch_tree",
+                items: items
+            },{
+                type:"bi.button",
+                text:"getValue"
+            }]
+        }
+    }
+})
+
+BI.shortcut("demo.switch_tree", Demo.SwitchTree);
--- a/demo/js/widget/year/demo.year.js
+++ b/demo/js/widget/year/demo.year.js
@ -0,0 +1,19 @@
+/**
+ * Created by Dailer on 2017/7/11.
+ */
+Demo.Year = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-exceltable"
+    },
+    render: function () {
+        return {
+            type: "bi.horizontal_adapt",
+            items: [{
+                type: "bi.year_combo",
+                width: 300
+            }]
+        }
+    }
+})
+
+BI.shortcut("demo.year", Demo.Year);
--- a/demo/js/widget/yearmonth/demo.year_month_combo.js
+++ b/demo/js/widget/yearmonth/demo.year_month_combo.js
@ -0,0 +1,32 @@
+/**
+ * Created by Dailer on 2017/7/13.
+ */
+Demo.YearMonthCombo = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+    render: function () {
+
+        var self = this;
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.year_month_combo",
+                ref: function (_ref) {
+                    self.widget = _ref;
+                },
+                width: 300
+            }, {
+                type: "bi.button",
+                text: "getValue",
+                handler: function () {
+                    BI.Msg.toast(JSON.stringify(self.widget.getValue()))
+                },
+                width: 300
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.year_month_combo", Demo.YearMonthCombo);
--- a/demo/js/widget/yearquarter/demo.year_quarter_combo.js
+++ b/demo/js/widget/yearquarter/demo.year_quarter_combo.js
@ -0,0 +1,33 @@
+/**
+ * Created by Dailer on 2017/7/13.
+ */
+Demo.YearQuarterCombo = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+    render: function () {
+        var self=this;
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.year_quarter_combo",
+                width: 300,
+                ref:function(_ref){
+                    self.widget=_ref;
+                },
+                yearBehaviors: {},
+                quarterBehaviors: {},
+            }, {
+                type: "bi.button",
+                text: "getValue",
+                handler:function(){
+                    BI.Msg.toast(JSON.stringify(self.widget.getValue()))
+                },
+                width: 300
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.year_quarter_combo", Demo.YearQuarterCombo);
--- a/demo/less/main.less
+++ b/demo/less/main.less
@ -1,5 +1,4 @@
@import "index";
-
 .layout-bg-white {
  background-color: #ffffff;
 }
@ -60,4 +59,64 @@ body {

 .bi-theme-dark body {
  background-color: @color-bi-background-normal-theme-dark;
+}
+
+.demo-editor {
+  border: 1px solid rgb(204, 204, 204);
+}
+
+.bi-slider-track {
+  .background-track {
+    background-color: rgba(153, 153, 153, 0);
+    _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33999999, endColorstr=#33999999);
+    -webkit-border-radius: 12px;
+    -moz-border-radius: 12px;
+    border-radius: 12px;
+  }
+  .gray-track {
+    background: #cccccc;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+  }
+  .blue-track {
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+  }
+}
+
+.widget-slider-icon {
+  .x-icon {
+    display: block;
+    background: url('./icon/slider.png') no-repeat;
+    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-normal.png');
+    _background: none;
+    background-size: 100% 100%;
+  }
+  &:hover {
+    .x-icon {
+      display: block;
+      background: url('./icon/双向箭头.png') no-repeat;
+      _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-active.png');
+      _background: none;
+      background-size: 100% 100%;
+    }
+  }
+  &::focus {
+    .x-icon {
+      display: block;
+      background: url('./icon/双向箭头.png') no-repeat;
+      _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-active.png');
+      _background: none;
+      background-size: 100% 100%;
+    }
+  }
+}
+
+.widget-slider-icon.native,
+.widget-slider-icon.disabled {
+  .x-icon {
+    display: block;
+  }
 }
--- a/docs/core.js
+++ b/docs/core.js
--- a/docs/demo.css
+++ b/docs/demo.css
@ -48,6 +48,52 @@ body {
 .bi-theme-dark body {
  background-color: #191B2B;
 }
+.demo-editor {
+  border: 1px solid #cccccc;
+}
+.bi-slider-track .background-track {
+  background-color: rgba(153, 153, 153, 0);
+  _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33999999, 99, endColorstr=#33999999, 99);
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+}
+.bi-slider-track .gray-track {
+  background: #cccccc;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.bi-slider-track .blue-track {
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.widget-slider-icon .x-icon {
+  display: block;
+  background: url('icon/slider.png') no-repeat;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-normal.png');
+  _background: none;
+  background-size: 100% 100%;
+}
+.widget-slider-icon:hover .x-icon {
+  display: block;
+  background: url('icon/双向箭头.png') no-repeat;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-active.png');
+  _background: none;
+  background-size: 100% 100%;
+}
+.widget-slider-icon::focus .x-icon {
+  display: block;
+  background: url('icon/双向箭头.png') no-repeat;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-active.png');
+  _background: none;
+  background-size: 100% 100%;
+}
+.widget-slider-icon.native .x-icon,
+.widget-slider-icon.disabled .x-icon {
+  display: block;
+}
 .demo-north {
  background-color: #3c8dbc;
 }
--- a/docs/demo.js
+++ b/docs/demo.js
--- a/docs/icon/arrow
+++ b/docs/icon/arrow
--- a/docs/icon/radio.png
+++ b/docs/icon/radio.png
--- a/docs/icon/slider.png
+++ b/docs/icon/slider.png
--- a/docs/icon/双向箭头.png
+++ b/docs/icon/双向箭头.png
--- a/docs/index.html
+++ b/docs/index.html
@ -1,33 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="utf-8">
-    <title></title>

-    <link rel="stylesheet" type="text/css"
-          href="core.css"/>
-    <link rel="stylesheet" type="text/css"
-          href="base.css"/>
-    <link rel="stylesheet" type="text/css"
-          href="widget.css"/>
-    <link rel="stylesheet" type="text/css"
-          href="resource.css"/>
-    <link rel="stylesheet" type="text/css"
-          href="demo.css"/>
+<head>
+      <meta charset="utf-8">
+      <title></title>
+      <link rel="stylesheet" type="text/css" href="core.css" />
+      <link rel="stylesheet" type="text/css" href="base.css" />
+      <link rel="stylesheet" type="text/css" href="widget.css" />
+      <link rel="stylesheet" type="text/css" href="resource.css" />
+      <link rel="stylesheet" type="text/css" href="demo.css" />

-    <script src="polyfill.js"></script>
-    <script src="core.js"></script>
-    <script src="base.js"></script>
-    <script src="case.js"></script>
-    <script src="widget.js"></script>
-    <!--图表-->
-    <script src="vancharts-all.js"></script>
-    <script src="biconst.js"></script><!--图表用到的常量(直接拿的bi的常量)-->
-    <script src="chart.js"></script>
+      <script src="polyfill.js"></script>
+      <script src="core.js"></script>
+      <script src="base.js"></script>
+      <script src="case.js"></script>
+      <script src="widget.js"></script>
+      <!--图表-->
+      <script src="vancharts-all.js"></script>
+      <script src="biconst.js"></script>
+      <!--图表用到的常量(直接拿的bi的常量)-->
+      <script src="chart.js"></script>

-    <script src="demo.js"></script>
+      <script src="demo.js"></script>
 </head>
+
 <body>
-<div id="wrapper"></div>
+      <div id="wrapper"></div>
 </body>
+
 </html>
--- a/docs/polyfill.js
+++ b/docs/polyfill.js
@ -1,93 +1,93 @@
-if(![].indexOf){
-    /**
-     * 检查指定的值是否在数组中
-     * @param {Object} o 要检查的值
-     * @return {Number}  o在数组中的索引（如果不在数组中则返回-1）
-     */
-    Array.prototype.indexOf = function (o) {
-        for (var i = 0, len = this.length; i < len; i++) {
-            if (_.isEqual(o, this[i])) {
-                return i;
-            }
-        }
-        return -1;
-    }
-}
-if(![].lastIndexOf){
-    /**
-     * 检查指定的值是否在数组中
-     * ie67不支持数组的这个方法
-     * @param {Object} o 要检查的值
-     * @return {Number}  o在数组中的索引（如果不在数组中则返回-1）
-     */
-    Array.prototype.lastIndexOf = function (o) {
-        for (var len = this.length, i = len - 1; i >= 0; i--) {
-            if (_.isEqual(o, this[i])) {
-                return i;
-            }
-        }
-        return -1;
-    }
-}/**
- * 特殊情况
- * Created by wang on 15/6/23.
- */
-//解决console未定义问题 guy
-window.console = window.console || (function () {
-        var c = {};
-        c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile
-            = c.clear = c.exception = c.trace = c.assert = function () {
-        };
-        return c;
-    })();
-/*
- * 前端缓存
- */
-window.localStorage || (window.localStorage = {
-    items: {},
-    setItem: function (k, v) {
-        BI.Cache.addCookie(k, v);
-    },
-    getItem: function (k) {
-        return BI.Cache.getCookie(k);
-    },
-    removeItem: function (k) {
-        BI.Cache.deleteCookie(k);
-    },
-    key: function () {
-
-    },
-    clear: function () {
-        this.items = {};
-    }
-});//修复ie9下sort方法的bug
-!function (window) {
-    var ua = window.navigator.userAgent.toLowerCase(),
-        reg = /msie|applewebkit.+safari/;
-    if (reg.test(ua)) {
-        var _sort = Array.prototype.sort;
-        Array.prototype.sort = function (fn) {
-            if (!!fn && typeof fn === 'function') {
-                if (this.length < 2) {
-                    return this;
-                }
-                var i = 0, j = i + 1, l = this.length, tmp, r = false, t = 0;
-                for (; i < l; i++) {
-                    for (j = i + 1; j < l; j++) {
-                        t = fn.call(this, this[i], this[j]);
-                        r = (typeof t === 'number' ? t :
-                                !!t ? 1 : 0) > 0;
-                        if (r === true) {
-                            tmp = this[i];
-                            this[i] = this[j];
-                            this[j] = tmp;
-                        }
-                    }
-                }
-                return this;
-            } else {
-                return _sort.call(this);
-            }
-        };
-    }
+if(![].indexOf){
+    /**
+     * 检查指定的值是否在数组中
+     * @param {Object} o 要检查的值
+     * @return {Number}  o在数组中的索引（如果不在数组中则返回-1）
+     */
+    Array.prototype.indexOf = function (o) {
+        for (var i = 0, len = this.length; i < len; i++) {
+            if (_.isEqual(o, this[i])) {
+                return i;
+            }
+        }
+        return -1;
+    }
+}
+if(![].lastIndexOf){
+    /**
+     * 检查指定的值是否在数组中
+     * ie67不支持数组的这个方法
+     * @param {Object} o 要检查的值
+     * @return {Number}  o在数组中的索引（如果不在数组中则返回-1）
+     */
+    Array.prototype.lastIndexOf = function (o) {
+        for (var len = this.length, i = len - 1; i >= 0; i--) {
+            if (_.isEqual(o, this[i])) {
+                return i;
+            }
+        }
+        return -1;
+    }
+}/**
+ * 特殊情况
+ * Created by wang on 15/6/23.
+ */
+//解决console未定义问题 guy
+window.console = window.console || (function () {
+        var c = {};
+        c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile
+            = c.clear = c.exception = c.trace = c.assert = function () {
+        };
+        return c;
+    })();
+/*
+ * 前端缓存
+ */
+window.localStorage || (window.localStorage = {
+    items: {},
+    setItem: function (k, v) {
+        BI.Cache.addCookie(k, v);
+    },
+    getItem: function (k) {
+        return BI.Cache.getCookie(k);
+    },
+    removeItem: function (k) {
+        BI.Cache.deleteCookie(k);
+    },
+    key: function () {
+
+    },
+    clear: function () {
+        this.items = {};
+    }
+});//修复ie9下sort方法的bug
+!function (window) {
+    var ua = window.navigator.userAgent.toLowerCase(),
+        reg = /msie|applewebkit.+safari/;
+    if (reg.test(ua)) {
+        var _sort = Array.prototype.sort;
+        Array.prototype.sort = function (fn) {
+            if (!!fn && typeof fn === 'function') {
+                if (this.length < 2) {
+                    return this;
+                }
+                var i = 0, j = i + 1, l = this.length, tmp, r = false, t = 0;
+                for (; i < l; i++) {
+                    for (j = i + 1; j < l; j++) {
+                        t = fn.call(this, this[i], this[j]);
+                        r = (typeof t === 'number' ? t :
+                                !!t ? 1 : 0) > 0;
+                        if (r === true) {
+                            tmp = this[i];
+                            this[i] = this[j];
+                            this[j] = tmp;
+                        }
+                    }
+                }
+                return this;
+            } else {
+                return _sort.call(this);
+            }
+        };
+    }
 }(window);
--- a/docs/widget.css
+++ b/docs/widget.css
@ -1,416 +1,416 @@
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-arrangement .arrangement-helper {
-  background: #3f8ce8;
-  z-index: 1000000000;
-}
-.bi-arrangement .arrangement-block {
-  z-index: 1000000000;
-}
-.bi-arrangement .arrangement-drop-container {
-  z-index: 1000000000;
-}
-.bi-arrangement .arrangement-drop-container .arrangement-drop-region {
-  overflow: hidden;
-}
-.bi-arrangement .arrangement-drop-container .drop-devider {
-  z-index: 1000000001;
-  background: #3f8ce8;
-}
-.bi-arrangement .arrangement-drop-container .top-left,
-.bi-arrangement .arrangement-drop-container .top-right,
-.bi-arrangement .arrangement-drop-container .bottom-left,
-.bi-arrangement .arrangement-drop-container .bottom-right,
-.bi-arrangement .arrangement-drop-container .top-left-second,
-.bi-arrangement .arrangement-drop-container .top-right-second,
-.bi-arrangement .arrangement-drop-container .bottom-left-second,
-.bi-arrangement .arrangement-drop-container .bottom-right-second,
-.bi-arrangement .arrangement-drop-container .top-center,
-.bi-arrangement .arrangement-drop-container .bottom-center,
-.bi-arrangement .arrangement-drop-container .left-center,
-.bi-arrangement .arrangement-drop-container .right-center,
-.bi-arrangement .arrangement-drop-container .top-center-second,
-.bi-arrangement .arrangement-drop-container .bottom-center-second,
-.bi-arrangement .arrangement-drop-container .left-center-second,
-.bi-arrangement .arrangement-drop-container .right-center-second {
-  z-index: 1000000001;
-  background: #3f8ce8;
-}
-.bi-arrangement-droppable {
-  z-index: 100000;
-}
-/****添加计算宽度的--运算符直接需要space****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-adapt-editor .adapt-editor-text {
-  font-size: 14px;
-}
-/****添加计算宽度的--运算符直接需要space****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-/*************BI.SearchEditor******************/
-.bi-search-editor {
-  border: 1px solid #d4dadd;
-}
-.bi-search-editor .close-font {
-  font-size: 20px;
-}
-.bi-search-editor .search-font {
-  font-size: 20px;
-}
-/****添加计算宽度的--运算符直接需要space****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-/*************BI.SearchEditor******************/
-.bi-small-search-editor .bi-editor {
-  font-size: 12px;
-}
-.bi-small-search-editor .bi-editor .bi-input {
-  font-size: 12px;
-}
-.bi-small-search-editor .bi-editor .bi-label {
-  font-size: 12px;
-}
-.bi-small-search-editor .close-font {
-  font-size: 18px;
-}
-.bi-small-search-editor .search-font {
-  font-size: 18px;
-}
-/****添加计算宽度的--运算符直接需要space****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-sign-initial-editor .sign-initial-editor-text {
-  font-size: 14px;
-}
-/****添加计算宽度的--运算符直接需要space****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-sign-style-editor .sign-style-editor-text {
-  max-width: 100%;
-  font-size: 12px;
-}
-.bi-sign-style-editor .sign-style-editor-tip {
-  max-width: 100%;
-  font-size: 12px;
-  color: #808080;
-}
-/****添加计算宽度的--运算符直接需要space****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-text-editor {
-  border: 1px solid #d4dadd;
-}
-/****添加计算宽度的--运算符直接需要space****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-/*************BI.SearchEditor******************/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-date-trigger {
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-}
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-down-list-popup .bi-down-list-item .list-item-text {
-  max-width: 203px;
-}
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-excel-table > div.bottom-right > div > div > table {
-  border-right: 1px solid #d4dadd;
-}
-.bi-theme-dark .bi-excel-table > div.bottom-right > div > div > table {
-  border-right: 1px solid #525466;
-}
-.bi-excel-table-header-cell {
-  font-weight: bold;
-}
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-file-manager-nav-button .file-manager-nav-button-text {
-  max-width: 200px;
-}
-.bi-file-manager-nav-button .file-manager-nav-button-text.active {
-  background-color: #eff1f4;
-  color: #999999;
-}
-.bi-file-manager-nav-button .file-manager-nav-button-triangle {
-  z-index: 1;
-}
-.bi-theme-dark .bi-file-manager-nav-button .file-manager-nav-button-text.active {
-  background-color: #191b2b;
-  color: #999999;
-}
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-fine-tuning-number-editor {
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-}
-.bi-interactive-arrangement .interactive-arrangement-dragtag-line {
-  z-index: 1000000000;
-  background-color: #f07d0a;
-}
-.bi-interactive-arrangement .interactive-arrangement-dragtag-icon {
-  z-index: 1000000000;
-}
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-month-trigger {
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-}
-.bi-multi-select-check-pane .multi-select-check-selected {
-  text-decoration: underline;
-}
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-multi-select-combo .multi-select-trigger-icon-button {
-  font-size: 16px;
-}
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-multi-select-trigger {
-  -webkit-border-radius: 2px 2px 2px 2px;
-  -moz-border-radius: 2px 2px 2px 2px;
-  border-radius: 2px 2px 2px 2px;
-}
-.bi-multi-select-search-pane .multi-select-toolbar {
-  color: #e85050;
-}
-.bi-multi-select-check-selected-button {
-  z-index: 1;
-}
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-multi-tree-check-pane .multi-tree-check-selected {
-  color: #3f8ce8;
-}
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-multi-tree-combo .multi-select-trigger-icon-button {
-  font-size: 16px;
-}
-.bi-multi-tree-popup .popup-view-tree {
-  min-height: 170px;
-}
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-multi-tree-check-selected-button .trigger-check-selected {
-  color: #3f8ce8;
-  z-index: 1;
-}
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-numerical-interval .numerical-interval-small-editor {
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  -moz-border-radius-bottomleft: 2px;
-  -webkit-border-bottom-left-radius: 2px;
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-.bi-numerical-interval .numerical-interval-big-editor {
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-.bi-numerical-interval .numerical-interval-big-combo {
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  -moz-border-radius-bottomleft: 2px;
-  -webkit-border-bottom-left-radius: 2px;
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-.bi-numerical-interval .numerical-interval-big-combo .bi-icon-combo-trigger .icon-combo-trigger-icon {
-  font-size: 14px;
-}
-.bi-numerical-interval .numerical-interval-small-combo {
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-.bi-numerical-interval .numerical-interval-small-combo .bi-icon-combo-trigger .icon-combo-trigger-icon {
-  font-size: 14px;
-}
-.bi-numerical-interval.number-error .bi-input {
-  color: #e85050;
-}
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-page-table-cell {
-  -webkit-user-select: initial;
-  -khtml-user-select: initial;
-  -moz-user-select: initial;
-  -ms-user-select: initial;
-  -o-user-select: initial;
-  user-select: initial;
-}
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-path-chooser .path-chooser-radio {
-  z-index: 1;
-}
-.bi-path-region .path-region-label {
-  z-index: 1;
-}
-.bi-preview-table-cell {
-  min-height: 25px;
-  min-width: 80px;
-  max-width: 220px;
-}
-.bi-preview-table {
-  -webkit-user-select: initial;
-  -khtml-user-select: initial;
-  -moz-user-select: initial;
-  -ms-user-select: initial;
-  -o-user-select: initial;
-  user-select: initial;
-}
-.bi-preview-table > div > table > thead > tr.odd,
-.bi-preview-table > div > div > div > table > thead > tr.odd {
-  background-color: #eff1f4;
-}
-.bi-theme-dark .bi-preview-table > div > table > thead > tr.odd,
-.bi-theme-dark .bi-preview-table > div > div > div > table > thead > tr.odd {
-  background-color: #191b2b;
-}
-.bi-preview-table-header-cell {
-  font-weight: bold;
-  min-height: 25px;
-  min-width: 80px;
-  max-width: 220px;
-}
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-quarter-trigger {
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-}
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-relation-view-region .relation-view-region-container {
-  z-index: 1;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-}
-.bi-relation-view-region .relation-view-region-container.other-package {
-  border-style: dashed;
-}
-.bi-sequence-table-dynamic-number .sequence-table-title-cell {
-  overflow: hidden;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  -webkit-box-sizing: border-box;
-  /*Safari3.2+*/
-  -moz-box-sizing: border-box;
-  /*Firefox3.5+*/
-  -ms-box-sizing: border-box;
-  /*IE8*/
-  box-sizing: border-box;
-  /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
-}
-.bi-sequence-table-dynamic-number .sequence-table-number-cell {
-  -webkit-box-sizing: border-box;
-  /*Safari3.2+*/
-  -moz-box-sizing: border-box;
-  /*Firefox3.5+*/
-  -ms-box-sizing: border-box;
-  /*IE8*/
-  box-sizing: border-box;
-  /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
-}
-.bi-sequence-table-list-number .sequence-table-title-cell {
-  overflow: hidden;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  -webkit-box-sizing: border-box;
-  /*Safari3.2+*/
-  -moz-box-sizing: border-box;
-  /*Firefox3.5+*/
-  -ms-box-sizing: border-box;
-  /*IE8*/
-  box-sizing: border-box;
-  /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
-}
-.bi-sequence-table-list-number .sequence-table-number-cell {
-  -webkit-box-sizing: border-box;
-  /*Safari3.2+*/
-  -moz-box-sizing: border-box;
-  /*Firefox3.5+*/
-  -ms-box-sizing: border-box;
-  /*IE8*/
-  box-sizing: border-box;
-  /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
-}
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-sequence-table-tree-number .sequence-table-title-cell {
-  overflow: hidden;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  -webkit-box-sizing: border-box;
-  /*Safari3.2+*/
-  -moz-box-sizing: border-box;
-  /*Firefox3.5+*/
-  -ms-box-sizing: border-box;
-  /*IE8*/
-  box-sizing: border-box;
-  /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
-}
-.bi-sequence-table-tree-number .sequence-table-number-cell {
-  -webkit-box-sizing: border-box;
-  /*Safari3.2+*/
-  -moz-box-sizing: border-box;
-  /*Firefox3.5+*/
-  -ms-box-sizing: border-box;
-  /*IE8*/
-  box-sizing: border-box;
-  /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
-}
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-year-popup .year-popup-navigation {
-  line-height: 30px;
-}
-.bi-year-popup .year-popup-navigation > .center-element {
-  border-left: 1px solid #d4dadd;
-}
-.bi-year-popup .year-popup-navigation > .first-element {
-  border-left: none;
-}
-.bi-theme-dark .bi-year-popup .year-popup-navigation > .center-element {
-  border-left: 1px solid #525466;
-}
-.bi-theme-dark .bi-year-popup .year-popup-navigation > .first-element {
-  border-left: none;
-}
-.bi-year-trigger {
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-arrangement .arrangement-helper {
+  background: #3f8ce8;
+  z-index: 1000000000;
+}
+.bi-arrangement .arrangement-block {
+  z-index: 1000000000;
+}
+.bi-arrangement .arrangement-drop-container {
+  z-index: 1000000000;
+}
+.bi-arrangement .arrangement-drop-container .arrangement-drop-region {
+  overflow: hidden;
+}
+.bi-arrangement .arrangement-drop-container .drop-devider {
+  z-index: 1000000001;
+  background: #3f8ce8;
+}
+.bi-arrangement .arrangement-drop-container .top-left,
+.bi-arrangement .arrangement-drop-container .top-right,
+.bi-arrangement .arrangement-drop-container .bottom-left,
+.bi-arrangement .arrangement-drop-container .bottom-right,
+.bi-arrangement .arrangement-drop-container .top-left-second,
+.bi-arrangement .arrangement-drop-container .top-right-second,
+.bi-arrangement .arrangement-drop-container .bottom-left-second,
+.bi-arrangement .arrangement-drop-container .bottom-right-second,
+.bi-arrangement .arrangement-drop-container .top-center,
+.bi-arrangement .arrangement-drop-container .bottom-center,
+.bi-arrangement .arrangement-drop-container .left-center,
+.bi-arrangement .arrangement-drop-container .right-center,
+.bi-arrangement .arrangement-drop-container .top-center-second,
+.bi-arrangement .arrangement-drop-container .bottom-center-second,
+.bi-arrangement .arrangement-drop-container .left-center-second,
+.bi-arrangement .arrangement-drop-container .right-center-second {
+  z-index: 1000000001;
+  background: #3f8ce8;
+}
+.bi-arrangement-droppable {
+  z-index: 100000;
+}
+/****添加计算宽度的--运算符直接需要space****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-adapt-editor .adapt-editor-text {
+  font-size: 14px;
+}
+/****添加计算宽度的--运算符直接需要space****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+/*************BI.SearchEditor******************/
+.bi-search-editor {
+  border: 1px solid #d4dadd;
+}
+.bi-search-editor .close-font {
+  font-size: 20px;
+}
+.bi-search-editor .search-font {
+  font-size: 20px;
+}
+/****添加计算宽度的--运算符直接需要space****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+/*************BI.SearchEditor******************/
+.bi-small-search-editor .bi-editor {
+  font-size: 12px;
+}
+.bi-small-search-editor .bi-editor .bi-input {
+  font-size: 12px;
+}
+.bi-small-search-editor .bi-editor .bi-label {
+  font-size: 12px;
+}
+.bi-small-search-editor .close-font {
+  font-size: 18px;
+}
+.bi-small-search-editor .search-font {
+  font-size: 18px;
+}
+/****添加计算宽度的--运算符直接需要space****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-sign-initial-editor .sign-initial-editor-text {
+  font-size: 14px;
+}
+/****添加计算宽度的--运算符直接需要space****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-sign-style-editor .sign-style-editor-text {
+  max-width: 100%;
+  font-size: 12px;
+}
+.bi-sign-style-editor .sign-style-editor-tip {
+  max-width: 100%;
+  font-size: 12px;
+  color: #808080;
+}
+/****添加计算宽度的--运算符直接需要space****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-text-editor {
+  border: 1px solid #d4dadd;
+}
+/****添加计算宽度的--运算符直接需要space****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+/*************BI.SearchEditor******************/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-date-trigger {
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-down-list-popup .bi-down-list-item .list-item-text {
+  max-width: 203px;
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-excel-table > div.bottom-right > div > div > table {
+  border-right: 1px solid #d4dadd;
+}
+.bi-theme-dark .bi-excel-table > div.bottom-right > div > div > table {
+  border-right: 1px solid #525466;
+}
+.bi-excel-table-header-cell {
+  font-weight: bold;
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-file-manager-nav-button .file-manager-nav-button-text {
+  max-width: 200px;
+}
+.bi-file-manager-nav-button .file-manager-nav-button-text.active {
+  background-color: #eff1f4;
+  color: #999999;
+}
+.bi-file-manager-nav-button .file-manager-nav-button-triangle {
+  z-index: 1;
+}
+.bi-theme-dark .bi-file-manager-nav-button .file-manager-nav-button-text.active {
+  background-color: #191b2b;
+  color: #999999;
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-fine-tuning-number-editor {
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+}
+.bi-interactive-arrangement .interactive-arrangement-dragtag-line {
+  z-index: 1000000000;
+  background-color: #f07d0a;
+}
+.bi-interactive-arrangement .interactive-arrangement-dragtag-icon {
+  z-index: 1000000000;
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-month-trigger {
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+}
+.bi-multi-select-check-pane .multi-select-check-selected {
+  text-decoration: underline;
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-multi-select-combo .multi-select-trigger-icon-button {
+  font-size: 16px;
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-multi-select-trigger {
+  -webkit-border-radius: 2px 2px 2px 2px;
+  -moz-border-radius: 2px 2px 2px 2px;
+  border-radius: 2px 2px 2px 2px;
+}
+.bi-multi-select-search-pane .multi-select-toolbar {
+  color: #e85050;
+}
+.bi-multi-select-check-selected-button {
+  z-index: 1;
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-multi-tree-check-pane .multi-tree-check-selected {
+  color: #3f8ce8;
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-multi-tree-combo .multi-select-trigger-icon-button {
+  font-size: 16px;
+}
+.bi-multi-tree-popup .popup-view-tree {
+  min-height: 170px;
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-multi-tree-check-selected-button .trigger-check-selected {
+  color: #3f8ce8;
+  z-index: 1;
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-numerical-interval .numerical-interval-small-editor {
+  -moz-border-radius-topleft: 2px;
+  -webkit-border-top-left-radius: 2px;
+  -moz-border-radius-bottomleft: 2px;
+  -webkit-border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+.bi-numerical-interval .numerical-interval-big-editor {
+  -moz-border-radius-topright: 2px;
+  -webkit-border-top-right-radius: 2px;
+  -moz-border-radius-bottomright: 2px;
+  -webkit-border-bottom-right-radius: 2px;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+.bi-numerical-interval .numerical-interval-big-combo {
+  -moz-border-radius-topleft: 2px;
+  -webkit-border-top-left-radius: 2px;
+  -moz-border-radius-bottomleft: 2px;
+  -webkit-border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+.bi-numerical-interval .numerical-interval-big-combo .bi-icon-combo-trigger .icon-combo-trigger-icon {
+  font-size: 14px;
+}
+.bi-numerical-interval .numerical-interval-small-combo {
+  -moz-border-radius-topright: 2px;
+  -webkit-border-top-right-radius: 2px;
+  -moz-border-radius-bottomright: 2px;
+  -webkit-border-bottom-right-radius: 2px;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+.bi-numerical-interval .numerical-interval-small-combo .bi-icon-combo-trigger .icon-combo-trigger-icon {
+  font-size: 14px;
+}
+.bi-numerical-interval.number-error .bi-input {
+  color: #e85050;
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-page-table-cell {
+  -webkit-user-select: initial;
+  -khtml-user-select: initial;
+  -moz-user-select: initial;
+  -ms-user-select: initial;
+  -o-user-select: initial;
+  user-select: initial;
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-path-chooser .path-chooser-radio {
+  z-index: 1;
+}
+.bi-path-region .path-region-label {
+  z-index: 1;
+}
+.bi-preview-table-cell {
+  min-height: 25px;
+  min-width: 80px;
+  max-width: 220px;
+}
+.bi-preview-table {
+  -webkit-user-select: initial;
+  -khtml-user-select: initial;
+  -moz-user-select: initial;
+  -ms-user-select: initial;
+  -o-user-select: initial;
+  user-select: initial;
+}
+.bi-preview-table > div > table > thead > tr.odd,
+.bi-preview-table > div > div > div > table > thead > tr.odd {
+  background-color: #eff1f4;
+}
+.bi-theme-dark .bi-preview-table > div > table > thead > tr.odd,
+.bi-theme-dark .bi-preview-table > div > div > div > table > thead > tr.odd {
+  background-color: #191b2b;
+}
+.bi-preview-table-header-cell {
+  font-weight: bold;
+  min-height: 25px;
+  min-width: 80px;
+  max-width: 220px;
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-quarter-trigger {
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-relation-view-region .relation-view-region-container {
+  z-index: 1;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+}
+.bi-relation-view-region .relation-view-region-container.other-package {
+  border-style: dashed;
+}
+.bi-sequence-table-dynamic-number .sequence-table-title-cell {
+  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  -webkit-box-sizing: border-box;
+  /*Safari3.2+*/
+  -moz-box-sizing: border-box;
+  /*Firefox3.5+*/
+  -ms-box-sizing: border-box;
+  /*IE8*/
+  box-sizing: border-box;
+  /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
+}
+.bi-sequence-table-dynamic-number .sequence-table-number-cell {
+  -webkit-box-sizing: border-box;
+  /*Safari3.2+*/
+  -moz-box-sizing: border-box;
+  /*Firefox3.5+*/
+  -ms-box-sizing: border-box;
+  /*IE8*/
+  box-sizing: border-box;
+  /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
+}
+.bi-sequence-table-list-number .sequence-table-title-cell {
+  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  -webkit-box-sizing: border-box;
+  /*Safari3.2+*/
+  -moz-box-sizing: border-box;
+  /*Firefox3.5+*/
+  -ms-box-sizing: border-box;
+  /*IE8*/
+  box-sizing: border-box;
+  /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
+}
+.bi-sequence-table-list-number .sequence-table-number-cell {
+  -webkit-box-sizing: border-box;
+  /*Safari3.2+*/
+  -moz-box-sizing: border-box;
+  /*Firefox3.5+*/
+  -ms-box-sizing: border-box;
+  /*IE8*/
+  box-sizing: border-box;
+  /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-sequence-table-tree-number .sequence-table-title-cell {
+  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  -webkit-box-sizing: border-box;
+  /*Safari3.2+*/
+  -moz-box-sizing: border-box;
+  /*Firefox3.5+*/
+  -ms-box-sizing: border-box;
+  /*IE8*/
+  box-sizing: border-box;
+  /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
+}
+.bi-sequence-table-tree-number .sequence-table-number-cell {
+  -webkit-box-sizing: border-box;
+  /*Safari3.2+*/
+  -moz-box-sizing: border-box;
+  /*Firefox3.5+*/
+  -ms-box-sizing: border-box;
+  /*IE8*/
+  box-sizing: border-box;
+  /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-year-popup .year-popup-navigation {
+  line-height: 30px;
+}
+.bi-year-popup .year-popup-navigation > .center-element {
+  border-left: 1px solid #d4dadd;
+}
+.bi-year-popup .year-popup-navigation > .first-element {
+  border-left: none;
+}
+.bi-theme-dark .bi-year-popup .year-popup-navigation > .center-element {
+  border-left: 1px solid #525466;
+}
+.bi-theme-dark .bi-year-popup .year-popup-navigation > .first-element {
+  border-left: none;
+}
+.bi-year-trigger {
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+}
--- a/docs/widget.js
+++ b/docs/widget.js
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/less/resource/icon.less
+++ b/src/less/resource/icon.less
@ -55,3 +55,5 @@
 //Half Select
 .icon(check-half-select-icon, @icon-half-select);

+
+
--- a/src/less/widget/singleslider/singleslider.less
+++ b/src/less/widget/singleslider/singleslider.less
@ -0,0 +1,6 @@
+@import "../../bibase";
+
+.bi-single-slider {
+  & .slider-editor-button {
+  }
+}
--- a/src/less/widget/singleslider/slider/widget.slider.less
+++ b/src/less/widget/singleslider/slider/widget.slider.less
@ -0,0 +1,4 @@
+@import "../../../bibase";
+.bi-single-slider-slider{
+  cursor: url('@{leftRightCursor}'), auto;
+}
--- a/src/less/widget/singleslider/track/widget.track.less
+++ b/src/less/widget/singleslider/track/widget.track.less
@ -0,0 +1,15 @@
+@import "../../../bibase";
+
+.bi-slider-track {
+  .background-track {
+    .background-color(@color-bi-background-gray, 0);
+    .border-radius(12px);
+  }
+  .gray-track {
+    background: @color-bi-background-disabled;
+    .border-radius(4px);
+  }
+  .blue-track {
+    .border-radius(4px);
+  }
+}
--- a/src/widget/intervalslider/intervalslider.js
+++ b/src/widget/intervalslider/intervalslider.js
@ -0,0 +1,495 @@
+/**
+ * Created by zcf on 2016/9/26.
+ * Make some change by dailer on 2017/7/17
+ */
+BI.IntervalSlider = BI.inherit(BI.Widget, {
+    _constant: {
+        EDITOR_WIDTH: 58,
+        EDITOR_R_GAP: 60,
+        EDITOR_HEIGHT: 30,
+        HEIGHT: 28,
+        SLIDER_WIDTH_HALF: 15,
+        SLIDER_WIDTH: 30,
+        SLIDER_HEIGHT: 30,
+        TRACK_HEIGHT: 24
+    },
+
+    _defaultConfig: function () {
+        return BI.extend(BI.IntervalSlider.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-single-slider bi-slider-track"
+        })
+    },
+
+    _init: function () {
+        BI.IntervalSlider.superclass._init.apply(this, arguments);
+
+        var self = this;
+        var c = this._constant;
+        this.enable = false;
+        this.valueOne = "";
+        this.valueTwo = "";
+        this.calculation = new BI.AccurateCalculationModel();
+
+        this.backgroundTrack = BI.createWidget({
+            type: "bi.layout",
+            cls: "background-track",
+            height: c.TRACK_HEIGHT
+        });
+        this.grayTrack = BI.createWidget({
+            type: "bi.layout",
+            cls: "gray-track",
+            height: 8
+        });
+        this.blueTrack = BI.createWidget({
+            type: "bi.layout",
+            cls: "blue-track bi-high-light-background",
+            height: 8
+        });
+        this.track = this._createTrackWrapper();
+
+        this.labelOne = BI.createWidget({
+            type: "bi.sign_editor",
+            cls: "slider-editor-button",
+            errorText: "",
+            allowBlank: false,
+            height: c.HEIGHT,
+            width: c.EDITOR_WIDTH,
+            validationChecker: function (v) {
+                return self._checkValidation(v);
+            }
+        });
+        this.labelOne.on(BI.Editor.EVENT_CONFIRM, function () {
+            var v = BI.parseFloat(this.getValue());
+            self.valueOne = v;
+            var percent = self._getPercentByValue(v);
+            var significantPercent = BI.parseFloat(percent.toFixed(1)); //分成1000份
+            self._setLabelOnePosition(significantPercent);
+            self._setSliderOnePosition(significantPercent);
+            self._setBlueTrack();
+            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+        });
+        this.labelOne.on(BI.SignEditor.EVENT_FOCUS, function () {
+            self.labelOne.element.addClass("bi-border");
+        });
+        this.labelOne.on(BI.SignEditor.EVENT_BLUR, function () {
+            self.labelOne.element.removeClass("bi-border");
+        });
+
+        this.labelTwo = BI.createWidget({
+            type: "bi.sign_editor",
+            cls: "slider-editor-button",
+            errorText: "",
+            allowBlank: false,
+            height: c.HEIGHT,
+            width: c.EDITOR_WIDTH,
+            validationChecker: function (v) {
+                return self._checkValidation(v);
+            }
+        });
+        this.labelTwo.on(BI.Editor.EVENT_CONFIRM, function () {
+            var v = BI.parseFloat(this.getValue());
+            self.valueTwo = v;
+            var percent = self._getPercentByValue(v);
+            var significantPercent = BI.parseFloat(percent.toFixed(1));
+            self._setLabelTwoPosition(significantPercent);
+            self._setSliderTwoPosition(significantPercent);
+            self._setBlueTrack();
+            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+        });
+        this.labelTwo.on(BI.SignEditor.EVENT_FOCUS, function () {
+            self.labelTwo.element.addClass("bi-border");
+        });
+        this.labelTwo.on(BI.SignEditor.EVENT_BLUR, function () {
+            self.labelTwo.element.removeClass("bi-border");
+        });
+
+        this.sliderOne = BI.createWidget({
+            type: "bi.single_slider_slider"
+        });
+        this.sliderOne.element.draggable({
+            axis: "x",
+            containment: this.grayTrack.element,
+            scroll: false,
+            drag: function (e, ui) {
+                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setLabelOnePosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                self.labelOne.setValue(v);
+                self.valueOne = v;
+                self._setBlueTrack();
+            },
+            stop: function (e, ui) {
+                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderOnePosition(significantPercent);
+                self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+            }
+        });
+
+        this.sliderTwo = BI.createWidget({
+            type: "bi.single_slider_slider"
+        });
+        this.sliderTwo.element.draggable({
+            axis: "x",
+            containment: this.grayTrack.element,
+            scroll: false,
+            drag: function (e, ui) {
+                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setLabelTwoPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                self.labelTwo.setValue(v);
+                self.valueTwo = v;
+                self._setBlueTrack();
+            },
+            stop: function (e, ui) {
+                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderTwoPosition(significantPercent);
+                self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+            }
+        });
+        this._setVisible(false);
+
+        BI.createWidget({
+            type: "bi.absolute",
+            element: this,
+            items: [{
+                    el: {
+                        type: "bi.vertical",
+                        items: [{
+                            type: "bi.absolute",
+                            items: [{
+                                el: this.track,
+                                width: "100%",
+                                height: c.TRACK_HEIGHT
+                            }]
+                        }],
+                        hgap: 7,
+                        height: c.TRACK_HEIGHT
+                    },
+                    top: 33,
+                    left: 0,
+                    width: "100%"
+                },
+                this._createLabelWrapper(),
+                this._createSliderWrapper()
+            ]
+        })
+    },
+
+    _createLabelWrapper: function () {
+        var c = this._constant;
+        return {
+            el: {
+                type: "bi.vertical",
+                items: [{
+                    type: "bi.absolute",
+                    items: [{
+                        el: this.labelOne,
+                        top: 0,
+                        left: "0%"
+                    }]
+                }, {
+                    type: "bi.absolute",
+                    items: [{
+                        el: this.labelTwo,
+                        top: 0,
+                        left: "100%"
+                    }]
+                }],
+                rgap: c.EDITOR_R_GAP,
+                height: 90
+            },
+            top: 0,
+            left: 0,
+            width: "100%"
+        }
+    },
+
+    _createSliderWrapper: function () {
+        var c = this._constant;
+        return {
+            el: {
+                type: "bi.vertical",
+                items: [{
+                    type: "bi.absolute",
+                    items: [{
+                        el: this.sliderOne,
+                        top: 0,
+                        left: "0%"
+                    }]
+                }, {
+                    type: "bi.absolute",
+                    items: [{
+                        el: this.sliderTwo,
+                        top: 0,
+                        left: "100%"
+                    }]
+                }],
+                hgap: c.SLIDER_WIDTH_HALF,
+                height: c.SLIDER_HEIGHT
+            },
+            top: 30,
+            left: 0,
+            width: "100%"
+        }
+    },
+
+    _createTrackWrapper: function () {
+        return BI.createWidget({
+            type: "bi.absolute",
+            items: [{
+                el: this.backgroundTrack,
+                width: "100%"
+            }, {
+                el: {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.absolute",
+                        items: [{
+                            el: this.grayTrack,
+                            top: 0,
+                            left: 0,
+                            width: "100%"
+                        }, {
+                            el: this.blueTrack,
+                            top: 0,
+                            left: 0,
+                            width: "0%"
+                        }]
+                    }],
+                    hgap: 8,
+                    height: 8
+                },
+                top: 8,
+                left: 0,
+                width: "100%"
+            }]
+        })
+    },
+
+    _checkValidation: function (v) {
+        return BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)
+    },
+
+    _checkOverlap: function () {
+        var labelOneLeft = this.labelOne.element[0].offsetLeft;
+        var labelTwoLeft = this.labelTwo.element[0].offsetLeft;
+        if (labelOneLeft <= labelTwoLeft) {
+            if ((labelTwoLeft - labelOneLeft) < 90) {
+                this.labelTwo.element.css({
+                    "top": 60
+                });
+            } else {
+                this.labelTwo.element.css({
+                    "top": 0
+                });
+            }
+        } else {
+            if ((labelOneLeft - labelTwoLeft) < 90) {
+                this.labelTwo.element.css({
+                    "top": 60
+                });
+            } else {
+                this.labelTwo.element.css({
+                    "top": 0
+                });
+            }
+        }
+    },
+
+    _setLabelOnePosition: function (percent) {
+        this.labelOne.element.css({
+            "left": percent + "%"
+        });
+        this._checkOverlap();
+    },
+
+    _setLabelTwoPosition: function (percent) {
+        this.labelTwo.element.css({
+            "left": percent + "%"
+        });
+        this._checkOverlap();
+    },
+
+    _setSliderOnePosition: function (percent) {
+        this.sliderOne.element.css({
+            "left": percent + "%"
+        });
+    },
+
+    _setSliderTwoPosition: function (percent) {
+        this.sliderTwo.element.css({
+            "left": percent + "%"
+        });
+    },
+
+    _setBlueTrackLeft: function (percent) {
+        this.blueTrack.element.css({
+            "left": percent + "%"
+        });
+    },
+
+    _setBlueTrackWidth: function (percent) {
+        this.blueTrack.element.css({
+            "width": percent + "%"
+        });
+    },
+
+    _setBlueTrack: function () {
+        var percentOne = this._getPercentByValue(this.labelOne.getValue());
+        var percentTwo = this._getPercentByValue(this.labelTwo.getValue());
+        if (percentOne <= percentTwo) {
+            this._setBlueTrackLeft(percentOne);
+            this._setBlueTrackWidth(percentTwo - percentOne);
+        } else {
+            this._setBlueTrackLeft(percentTwo);
+            this._setBlueTrackWidth(percentOne - percentTwo);
+        }
+    },
+
+    _setAllPosition: function (one, two) {
+        this._setSliderOnePosition(one);
+        this._setLabelOnePosition(one);
+        this._setSliderTwoPosition(two);
+        this._setLabelTwoPosition(two);
+        this._setBlueTrack();
+    },
+
+    _setVisible: function (visible) {
+        this.sliderOne.setVisible(visible);
+        this.sliderTwo.setVisible(visible);
+        this.labelOne.setVisible(visible);
+        this.labelTwo.setVisible(visible);
+    },
+
+    _setErrorText: function () {
+        var errorText = BI.i18nText("BI-Please_Enter") + this.min + "-" + this.max + BI.i18nText("BI-Basic_De") + BI.i18nText("BI-Basic_Number");
+        this.labelOne.setErrorText(errorText);
+        this.labelTwo.setErrorText(errorText);
+    },
+
+    _getGrayTrackLength: function () {
+        return this.grayTrack.element[0].scrollWidth
+    },
+
+    //其中取max-min后保留4为有效数字后的值的小数位数为最终value的精度
+    _getValueByPercent: function (percent) { //return (((max-min)*percent)/100+min)
+        var sub = this.calculation.accurateSubtraction(this.max, this.min);
+        var mul = this.calculation.accurateMultiplication(sub, percent);
+        var div = this.calculation.accurateDivisionTenExponent(mul, 2);
+        if (this.precision >= 0) {
+            return BI.parseFloat(this.calculation.accurateAddition(div, this.min).toFixed(this.precision));
+        } else {
+            return BI.parseFloat(this.calculation.accurateAddition(div, this.min) - this.calculation.accurateAddition(div, this.min) % (Math.pow(10, (-1) * this.precision)));
+        }
+    },
+
+    _getPercentByValue: function (v) {
+        return (v - this.min) * 100 / (this.max - this.min);
+    },
+
+    _setDraggableEnable: function (enable) {
+        if (enable) {
+            this.sliderOne.element.draggable("enable");
+            this.sliderTwo.element.draggable("enable")
+        } else {
+            this.sliderOne.element.draggable("disable");
+            this.sliderTwo.element.draggable("disable")
+        }
+    },
+
+
+    getValue: function () {
+        if (this.valueOne <= this.valueTwo) {
+            return {
+                min: this.valueOne,
+                max: this.valueTwo
+            }
+        } else {
+            return {
+                min: this.valueTwo,
+                max: this.valueOne
+            }
+        }
+    },
+
+    setMinAndMax: function (v) {
+        var minNumber = BI.parseFloat(v.min);
+        var maxNumber = BI.parseFloat(v.max);
+        if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber >= minNumber)) {
+            this.min = minNumber;
+            this.max = maxNumber;
+            this.valueOne = minNumber;
+            this.valueTwo = maxNumber;
+            //计算每一份值的精度(最大值和最小值的差值保留4为有效数字后的精度)
+            //如果差值的整数位数大于4,toPrecision得到的是科学计数法1234 => 1.2e+3
+            var sub = this.calculation.accurateSubtraction(this.max, this.min);
+            var pre = sub.toPrecision(4);     
+            if(pre.indexOf("e") > -1 ){
+                this.precision = 3 - pre.charAt(pre.length - 1);
+            }else{
+                 var arr = pre.split(".");
+                if(arr.length>1){
+                    this.precision = arr[1].length;
+                }else{
+                     this.precision=0;
+                }     
+            }
+            this._setDraggableEnable(true);
+        }
+        if (maxNumber === minNumber) {
+            this._setDraggableEnable(false);
+        }
+    },
+
+    setValue: function (v) {
+        var valueOne = BI.parseFloat(v.min);
+        var valueTwo = BI.parseFloat(v.max);
+        if (!isNaN(valueOne) && !isNaN(valueTwo)) {
+            if (this._checkValidation(valueOne)) {
+                this.valueOne = valueOne;
+            }
+            if (this._checkValidation(valueTwo)) {
+                this.valueTwo = valueTwo;
+            }
+            if (valueOne < this.min) {
+                this.valueOne = this.min;
+            }
+            if (valueTwo > this.max) {
+                this.valueTwo = this.max;
+            }
+        }
+    },
+
+    reset: function () {
+        this._setVisible(false);
+        this.enable = false;
+        this.valueOne = "";
+        this.valueTwo = "";
+        this.min = NaN;
+        this.max = NaN;
+        this._setBlueTrackWidth(0);
+    },
+
+    populate: function () {
+        if (!isNaN(this.min) && !isNaN(this.max)) {
+            this.enable = true;
+            this._setVisible(true);
+            this._setErrorText();
+            if ((BI.isNumeric(this.valueOne) || BI.isNotEmptyString(this.valueOne)) && (BI.isNumeric(this.valueTwo) || BI.isNotEmptyString(this.valueTwo))) {
+                this.labelOne.setValue(this.valueOne);
+                this.labelTwo.setValue(this.valueTwo);
+                this._setAllPosition(this._getPercentByValue(this.valueOne), this._getPercentByValue(this.valueTwo));
+            } else {
+                this.labelOne.setValue(this.min);
+                this.labelTwo.setValue(this.max);
+                this._setAllPosition(0, 100)
+            }
+        }
+    }
+});
+BI.IntervalSlider.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.interval_slider", BI.IntervalSlider);
--- a/src/widget/intervalslider/model.accuratecalculation.js
+++ b/src/widget/intervalslider/model.accuratecalculation.js
@ -0,0 +1,222 @@
+/**
+ * Created by zcf on 2017/3/1.
+ * 万恶的IEEE-754
+ * 使用字符串精确计算含小数加法、减法、乘法和10的指数倍除法，支持负数
+ */
+BI.AccurateCalculationModel = BI.inherit(BI.Widget, {
+    _defaultConfig: function () {
+        return BI.extend(BI.AccurateCalculationModel.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: ""
+        })
+    },
+
+    _init: function () {
+        BI.AccurateCalculationModel.superclass._init.apply(this, arguments);
+    },
+
+    _getMagnitude: function (n) {
+        var magnitude = "1";
+        for (var i = 0; i < n; i++) {
+            magnitude += "0";
+        }
+        return BI.parseInt(magnitude);
+    },
+
+    _formatDecimal: function (stringNumber1, stringNumber2) {
+        if (stringNumber1.numDecimalLength === stringNumber2.numDecimalLength) {
+            return;
+        }
+        var magnitudeDiff = stringNumber1.numDecimalLength - stringNumber2.numDecimalLength;
+        if (magnitudeDiff > 0) {
+            var needAddZero = stringNumber2
+        } else {
+            var needAddZero = stringNumber1;
+            magnitudeDiff = (0 - magnitudeDiff);
+        }
+        for (var i = 0; i < magnitudeDiff; i++) {
+            if (needAddZero.numDecimal === "0" && i === 0) {
+                continue
+            }
+            needAddZero.numDecimal += "0"
+        }
+    },
+
+    _stringNumberFactory: function (num) {
+        var strNum = num.toString();
+        var numStrArray = strNum.split(".");
+        var numInteger = numStrArray[0];
+        if (numStrArray.length === 1) {
+            var numDecimal = "0";
+            var numDecimalLength = 0;
+        } else {
+            var numDecimal = numStrArray[1];
+            var numDecimalLength = numStrArray[1].length;
+        }
+        return {
+            "numInteger": numInteger,
+            "numDecimal": numDecimal,
+            "numDecimalLength": numDecimalLength
+        }
+    },
+
+    _accurateSubtraction: function (num1, num2) {//num1-num2 && num1>num2
+        var stringNumber1 = this._stringNumberFactory(num1);
+        var stringNumber2 = this._stringNumberFactory(num2);
+        //整数部分计算
+        var integerResult = BI.parseInt(stringNumber1.numInteger) - BI.parseInt(stringNumber2.numInteger);
+        //小数部分
+        this._formatDecimal(stringNumber1, stringNumber2);
+        var decimalMaxLength = getDecimalMaxLength(stringNumber1, stringNumber2);
+
+        if (BI.parseInt(stringNumber1.numDecimal) >= BI.parseInt(stringNumber2.numDecimal)) {
+            var decimalResultTemp = (BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString();
+            var decimalResult = addZero(decimalResultTemp, decimalMaxLength);
+        } else {//否则借位
+            integerResult--;
+            var borrow = this._getMagnitude(decimalMaxLength);
+            var decimalResultTemp = (borrow + BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString();
+            var decimalResult = addZero(decimalResultTemp, decimalMaxLength);
+        }
+        var result = integerResult + "." + decimalResult;
+        return BI.parseFloat(result);
+
+        function getDecimalMaxLength(num1, num2) {
+            if (num1.numDecimal.length >= num2.numDecimal.length) {
+                return num1.numDecimal.length
+            }
+            return num2.numDecimal.length
+        }
+
+        function addZero(resultTemp, length) {
+            var diff = length - resultTemp.length;
+            for (var i = 0; i < diff; i++) {
+                resultTemp = "0" + resultTemp;
+            }
+            return resultTemp
+        }
+    },
+
+    _accurateAddition: function (num1, num2) {//加法结合律
+        var stringNumber1 = this._stringNumberFactory(num1);
+        var stringNumber2 = this._stringNumberFactory(num2);
+        //整数部分计算
+        var integerResult = BI.parseInt(stringNumber1.numInteger) + BI.parseInt(stringNumber2.numInteger);
+        //小数部分
+        this._formatDecimal(stringNumber1, stringNumber2);
+
+        var decimalResult = (BI.parseInt(stringNumber1.numDecimal) + BI.parseInt(stringNumber2.numDecimal)).toString();
+
+        if (decimalResult !== "0") {
+            if (decimalResult.length <= stringNumber1.numDecimal.length) {
+                decimalResult = addZero(decimalResult, stringNumber1.numDecimal.length)
+            } else {
+                integerResult++;//进一
+                decimalResult = decimalResult.slice(1);
+            }
+        }
+        var result = integerResult + "." + decimalResult;
+        return BI.parseFloat(result);
+
+        function addZero(resultTemp, length) {
+            var diff = length - resultTemp.length;
+            for (var i = 0; i < diff; i++) {
+                resultTemp = "0" + resultTemp;
+            }
+            return resultTemp
+        }
+    },
+
+    _accurateMultiplication: function (num1, num2) {//乘法分配律
+        var stringNumber1 = this._stringNumberFactory(num1);
+        var stringNumber2 = this._stringNumberFactory(num2);
+        //整数部分计算
+        var integerResult = BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numInteger);
+        //num1的小数和num2的整数
+        var dec1Int2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numInteger), stringNumber1.numDecimalLength);
+        //num1的整数和num2的小数
+        var int1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numDecimal), stringNumber2.numDecimalLength);
+        //小数*小数
+        var dec1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numDecimal), (stringNumber1.numDecimalLength + stringNumber2.numDecimalLength));
+
+        return this._accurateAddition(this._accurateAddition(this._accurateAddition(integerResult, dec1Int2), int1dec2), dec1dec2);
+    },
+
+    _accurateDivisionTenExponent: function (num, n) {// num/10^n && n>0
+        var stringNumber = this._stringNumberFactory(num);
+        if (stringNumber.numInteger.length > n) {
+            var integerResult = stringNumber.numInteger.slice(0, (stringNumber.numInteger.length - n));
+            var partDecimalResult = stringNumber.numInteger.slice(-n);
+        } else {
+            var integerResult = "0";
+            var partDecimalResult = addZero(stringNumber.numInteger, n);
+        }
+        var result = integerResult + "." + partDecimalResult + stringNumber.numDecimal;
+        return BI.parseFloat(result);
+
+        function addZero(resultTemp, length) {
+            var diff = length - resultTemp.length;
+            for (var i = 0; i < diff; i++) {
+                resultTemp = "0" + resultTemp;
+            }
+            return resultTemp
+        }
+    },
+
+    accurateSubtraction: function (num1, num2) {
+        if (num1 >= 0 && num2 >= 0) {
+            if (num1 >= num2) {
+                return this._accurateSubtraction(num1, num2)
+            }
+            return -this._accurateSubtraction(num2, num1)
+        }
+        if (num1 >= 0 && num2 < 0) {
+            return this._accurateAddition(num1, -num2)
+        }
+        if (num1 < 0 && num2 >= 0) {
+            return -this._accurateAddition(-num1, num2)
+        }
+        if (num1 < 0 && num2 < 0) {
+            if (num1 >= num2) {
+                return this._accurateSubtraction(-num2, -num1)
+            }
+            return this._accurateSubtraction(-num1, -num2)
+        }
+    },
+
+    accurateAddition: function (num1, num2) {
+        if (num1 >= 0 && num2 >= 0) {
+            return this._accurateAddition(num1, num2)
+        }
+        if (num1 >= 0 && num2 < 0) {
+            return this.accurateSubtraction(num1, -num2)
+        }
+        if (num1 < 0 && num2 >= 0) {
+            return this.accurateSubtraction(num2, -num1)
+        }
+        if (num1 < 0 && num2 < 0) {
+            return -this._accurateAddition(-num1, -num2)
+        }
+    },
+
+    accurateMultiplication: function (num1, num2) {
+        if (num1 >= 0 && num2 >= 0) {
+            return this._accurateMultiplication(num1, num2)
+        }
+        if (num1 >= 0 && num2 < 0) {
+            return -this._accurateMultiplication(num1, -num2)
+        }
+        if (num1 < 0 && num2 >= 0) {
+            return -this._accurateMultiplication(-num1, num2)
+        }
+        if (num1 < 0 && num2 < 0) {
+            return this._accurateMultiplication(-num1, -num2)
+        }
+    },
+
+    accurateDivisionTenExponent: function (num1, n) {
+        if (num1 >= 0) {
+            return this._accurateDivisionTenExponent(num1, n);
+        }
+        return -this._accurateDivisionTenExponent(-num1, n);
+    }
+});
--- a/src/widget/singleslider/jquery-ui/jquery-ui.min.js
+++ b/src/widget/singleslider/jquery-ui/jquery-ui.min.js
--- a/src/widget/singleslider/singleslider.js
+++ b/src/widget/singleslider/singleslider.js
@ -0,0 +1,299 @@
+/**
+ * Created by zcf on 2016/9/22.
+ */
+BI.SingleSlider = BI.inherit(BI.Widget, {
+    _constant: {
+        EDITOR_WIDTH: 60,
+        EDITOR_HEIGHT: 30,
+        HEIGHT: 28,
+        SLIDER_WIDTH_HALF: 15,
+        SLIDER_WIDTH: 30,
+        SLIDER_HEIGHT: 30,
+        TRACK_HEIGHT: 24
+    },
+    _defaultConfig: function () {
+        return BI.extend(BI.SingleSlider.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-single-slider bi-slider-track"
+        });
+    },
+    _init: function () {
+        BI.SingleSlider.superclass._init.apply(this, arguments);
+
+        var self = this;
+        var c = this._constant;
+        this.enable = false;
+        this.value = "";
+
+        this.backgroundTrack = BI.createWidget({
+            type: "bi.layout",
+            cls: "background-track bi-background",
+            height: c.TRACK_HEIGHT
+        });
+        this.grayTrack = BI.createWidget({
+            type: "bi.layout",
+            cls: "gray-track",
+            height: 8
+        });
+        this.blueTrack = BI.createWidget({
+            type: "bi.layout",
+            cls: "blue-track bi-high-light-background",
+            height: 8
+        });
+        this.track = this._createTrackWrapper();
+
+        this.slider = BI.createWidget({
+            type: "bi.single_slider_slider"
+        });
+        this.slider.element.draggable({
+            axis: "x",
+            containment: this.grayTrack.element,
+            scroll: false,
+            drag: function (e, ui) {
+                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1)); //直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setLabelPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                self.label.setValue(v);
+                self.value = v;
+            },
+            stop: function (e, ui) {
+                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+            }
+        });
+        var sliderVertical = BI.createWidget({
+            type: "bi.vertical",
+            items: [{
+                type: "bi.absolute",
+                items: [this.slider]
+            }],
+            hgap: c.SLIDER_WIDTH_HALF,
+            height: c.SLIDER_HEIGHT
+        });
+        sliderVertical.element.click(function (e) {
+            if (self.enable) {
+                var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;
+                var trackLength = self.track.element[0].scrollWidth;
+                var percent = 0;
+                if (offset < 0) {
+                    percent = 0
+                }
+                if (offset > 0 && offset < (trackLength - c.SLIDER_WIDTH)) {
+                    percent = offset * 100 / self._getGrayTrackLength();
+                }
+                if (offset > (trackLength - c.SLIDER_WIDTH)) {
+                    percent = 100
+                }
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setAllPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                self.label.setValue(v);
+                self.value = v;
+                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+            }
+        });
+        this.label = BI.createWidget({
+            type: "bi.sign_editor",
+            cls: "slider-editor-button",
+            errorText: "",
+            height: c.HEIGHT,
+            width: c.EDITOR_WIDTH,
+            allowBlank: false,
+            validationChecker: function (v) {
+                return self._checkValidation(v);
+            },
+            quitChecker: function (v) {
+                return self._checkValidation(v);
+            }
+        });
+        this.label.on(BI.SignEditor.EVENT_CONFIRM, function () {
+            var percent = self._getPercentByValue(this.getValue());
+            var significantPercent = BI.parseFloat(percent.toFixed(1));
+            self._setAllPosition(significantPercent);
+            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+        });
+        this.label.on(BI.SignEditor.EVENT_FOCUS, function () {
+            self.label.element.addClass("bi-border");
+        });
+        this.label.on(BI.SignEditor.EVENT_BLUR, function () {
+            self.label.element.removeClass("bi-border");
+        });
+        this._setVisible(false);
+        BI.createWidget({
+            type: "bi.absolute",
+            element: this,
+            items: [{
+                el: {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.absolute",
+                        items: [{
+                            el: this.track,
+                            width: "100%",
+                            height: c.TRACK_HEIGHT
+                        }]
+                    }],
+                    hgap: 7,
+                    height: c.TRACK_HEIGHT
+                },
+                top: 33,
+                left: 0,
+                width: "100%"
+            }, {
+                el: sliderVertical,
+                top: 30,
+                left: 0,
+                width: "100%"
+            }, {
+                el: {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.absolute",
+                        items: [this.label]
+                    }],
+                    rgap: c.EDITOR_WIDTH / 2,
+                    height: c.EDITOR_HEIGHT
+                },
+                top: 0,
+                left: 0,
+                width: "100%"
+            }]
+        })
+    },
+
+    _createTrackWrapper: function () {
+        return BI.createWidget({
+            type: "bi.absolute",
+            items: [{
+                el: this.backgroundTrack,
+                width: "100%"
+            }, {
+                el: {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.absolute",
+                        items: [{
+                            el: this.grayTrack,
+                            top: 0,
+                            left: 0,
+                            width: "100%"
+                        }, {
+                            el: this.blueTrack,
+                            top: 0,
+                            left: 0,
+                            width: "0%"
+                        }]
+                    }],
+                    hgap: 8,
+                    height: 8
+                },
+                top: 8,
+                left: 0,
+                width: "100%"
+            }]
+        })
+    },
+
+    _checkValidation: function (v) {
+        return !(BI.isNull(v) || v < this.min || v > this.max)
+    },
+
+    _setBlueTrack: function (percent) {
+        this.blueTrack.element.css({
+            "width": percent + "%"
+        });
+    },
+
+    _setLabelPosition: function (percent) {
+        this.label.element.css({
+            "left": percent + "%"
+        });
+    },
+
+    _setSliderPosition: function (percent) {
+        this.slider.element.css({
+            "left": percent + "%"
+        });
+    },
+
+    _setAllPosition: function (percent) {
+        this._setSliderPosition(percent);
+        this._setLabelPosition(percent);
+        this._setBlueTrack(percent);
+    },
+
+    _setVisible: function (visible) {
+        this.slider.setVisible(visible);
+        this.label.setVisible(visible);
+    },
+
+    _getGrayTrackLength: function () {
+        return this.grayTrack.element[0].scrollWidth
+    },
+
+    _getValueByPercent: function (percent) {
+        var thousandth = BI.parseInt(percent * 10);
+        return (((this.max - this.min) * thousandth) / 1000 + this.min);
+    },
+
+    _getPercentByValue: function (v) {
+        return (v - this.min) * 100 / (this.max - this.min);
+    },
+
+    getValue: function () {
+        return this.value;
+    },
+
+    setValue: function (v) {
+        var value = BI.parseFloat(v);
+        if ((!isNaN(value))) {
+            if (this._checkValidation(value)) {
+                this.value = value;
+            }
+            if (value > this.max) {
+                this.value = this.max;
+            }
+            if (value < this.min) {
+                this.value = this.min;
+            }
+        }
+    },
+
+    setMinAndMax: function (v) {
+        var minNumber = BI.parseFloat(v.min);
+        var maxNumber = BI.parseFloat(v.max);
+        if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber)) {
+            this.min = minNumber;
+            this.max = maxNumber;
+        }
+    },
+
+    reset: function () {
+        this._setVisible(false);
+        this.enable = false;
+        this.value = "";
+        this.min = 0;
+        this.max = 0;
+        this._setBlueTrack(0);
+    },
+
+    populate: function () {
+        if (!isNaN(this.min) && !isNaN(this.max)) {
+            this._setVisible(true);
+            this.enable = true;
+            this.label.setErrorText(BI.i18nText("BI-Please_Enter") + this.min + "-" + this.max + BI.i18nText("BI-Basic_De") + BI.i18nText("BI-Basic_Number"));
+            if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) {
+                this.label.setValue(this.value);
+                this._setAllPosition(this._getPercentByValue(this.value));
+            } else {
+                this.label.setValue(this.max);
+                this._setAllPosition(100);
+            }
+        }
+    }
+});
+BI.SingleSlider.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.single_slider", BI.SingleSlider);
--- a/src/widget/singleslider/slider/widget.slider.js
+++ b/src/widget/singleslider/slider/widget.slider.js
@ -0,0 +1,33 @@
+/**
+ * Created by zcf on 2016/9/22.
+ */
+BI.Slider = BI.inherit(BI.Widget, {
+    _defaultConfig: function () {
+        return BI.extend(BI.Slider.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-single-slider-slider"
+        });
+    },
+    _init: function () {
+        BI.extend(BI.Slider.superclass._init.apply(this, arguments));
+        this.slider = BI.createWidget({
+            type: "bi.icon_button",
+            cls: "widget-slider-icon",
+            iconWidth: 30,
+            iconHeight: 30,
+            height: 30,
+            width: 30
+        });
+        BI.createWidget({
+            type: "bi.absolute",
+            element: this,
+            items: [{
+                el: this.slider,
+                top: 0,
+                left: -15
+            }],
+            width: 0,
+            height: 30
+        });
+    }
+});
+BI.shortcut("bi.single_slider_slider", BI.Slider);