From b3c8383f145fe4428109590af80defdf79a46ec3 Mon Sep 17 00:00:00 2001 From: Urthur Date: Tue, 5 Sep 2017 13:05:01 +0800 Subject: [PATCH] =?UTF-8?q?BI-8895=20slider=E6=8E=A7=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bi/widget.css | 7 + bi/widget.js | 243 +++++++++++++++++++++++++++ demo/js/config/widget.js | 8 + demo/js/widget/slider/demo.slider.js | 42 +++++ dist/bundle.css | 7 + dist/bundle.js | 243 +++++++++++++++++++++++++++ dist/demo.js | 49 ++++++ dist/widget.css | 7 + dist/widget.js | 243 +++++++++++++++++++++++++++ src/css/widget/slider/slider.css | 7 + src/less/widget/slider/slider.less | 8 + src/widget/slider/slider.button.js | 44 +++++ src/widget/slider/slider.js | 201 ++++++++++++++++++++++ 13 files changed, 1109 insertions(+) create mode 100644 demo/js/widget/slider/demo.slider.js create mode 100644 src/css/widget/slider/slider.css create mode 100644 src/less/widget/slider/slider.less create mode 100644 src/widget/slider/slider.button.js create mode 100644 src/widget/slider/slider.js diff --git a/bi/widget.css b/bi/widget.css index d07adc5bfa..c43972c1e6 100644 --- a/bi/widget.css +++ b/bi/widget.css @@ -392,6 +392,13 @@ } /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ +.bi-slider .bi-slider-track { + background-color: rgba(153, 153, 153, 0.3); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ .bi-year-popup .year-popup-navigation { diff --git a/bi/widget.js b/bi/widget.js index c3dd1c3e5e..a2449c6c65 100644 --- a/bi/widget.js +++ b/bi/widget.js @@ -14936,6 +14936,249 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, { }); BI.shortcut("bi.single_tree_trigger", BI.SingleTreeTrigger);/** + * Created by Urthur on 2017/9/4. + */ +BI.SliderButton = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(BI.SliderButton.superclass._defaultConfig.apply(this, arguments), { + baseCls: "bi-slider-button" + }); + }, + _init: function () { + BI.extend(BI.SliderButton.superclass._init.apply(this, arguments)); + var self = this; + var sliderButton = BI.createWidget({ + type: "bi.icon_button", + cls: "column-next-page-h-font", + iconWidth: 16, + iconHeight: 16, + height: 16, + width: 16 + }); + BI.createWidget({ + type: "bi.absolute", + element: this, + items: [{ + el: sliderButton, + left: -8 + }, { + el: { + type: "bi.label", + ref: function (_ref) { + self.label = _ref; + } + }, + left: -8, + top: -10 + }] + }); + }, + + setValue: function (v) { + this.label.setText(v); + } +}); +BI.shortcut("bi.slider_button", BI.SliderButton);/** + * Created by Urthur on 2017/9/4. + */ +BI.Slider = BI.inherit(BI.Widget, { + _constant: { + HEIGHT: 28, + SLIDER_WIDTH_HALF: 10, + SLIDER_WIDTH: 25, + SLIDER_HEIGHT: 30, + TRACK_HEIGHT: 24 + }, + + _defaultConfig: function () { + return BI.extend(BI.Slider.superclass._defaultConfig.apply(this, arguments), { + baseCls: "bi-slider", + min: 10, + max: 50 + }) + }, + + _init: function () { + BI.Slider.superclass._init.apply(this, arguments); + var self = this; + var c = this._constant, o = this.options; + this.enable = false; + this.value = o.min; + this.min = o.min; + this.max = o.max; + + this.rightTrack = BI.createWidget({ + type: "bi.layout", + cls: "bi-slider-track", + height: 5 + }); + this.track = this._createTrack(); + + this.slider = BI.createWidget({ + type: "bi.slider_button" + }); + this.slider.setValue(this.getValue()); + this.slider.element.draggable({ + axis: "x", + containment: this.rightTrack.element, + scroll: false, + drag: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getRightTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 + var v = self._getValueByPercent(significantPercent); + self.value = BI.parseInt(v) + 1; + self.slider.setValue(self.getValue()); + self.fireEvent(BI.Slider.EVENT_CHANGE); + }, + stop: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getRightTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderPosition(significantPercent); + self.fireEvent(BI.Slider.EVENT_CHANGE); + } + }); + var sliderVertical = BI.createWidget({ + type: "bi.vertical", + items: [{ + type: "bi.absolute", + items: [{ + el: this.slider, + top: 10 + }] + }], + 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._getRightTrackLength(); + } + if (offset > (trackLength - c.SLIDER_WIDTH)) { + percent = 100 + } + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderPosition(significantPercent); + var v = self._getValueByPercent(significantPercent); + self.value = BI.parseInt(v); + self.slider.setValue(self.getValue()); + self.fireEvent(BI.Slider.EVENT_CHANGE); + } + }); + + 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 + }] + }], + height: c.TRACK_HEIGHT + }, + top: 33, + left: 0, + width: "100%" + }, { + el: sliderVertical, + top: 15, + left: 0, + width: "100%" + }] + }); + }, + + _createTrack: function () { + return BI.createWidget({ + type: "bi.absolute", + items: [{ + el: { + type: "bi.vertical", + items: [{ + type: "bi.absolute", + items: [{ + el: this.rightTrack, + top: 0, + left: 0, + width: "100%" + }] + }], + hgap: 8, + height: 5 + }, + top: 5, + left: 0, + width: "100%" + }] + }) + }, + + _checkValidation: function (v) { + return !(BI.isNull(v) || v < this.min || v > this.max) + }, + + _setSliderPosition: function (percent) { + this.slider.element.css({"left": percent + "%"}); + }, + + _getRightTrackLength: function () { + return this.rightTrack.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; + } + } + + if (!isNaN(this.min) && !isNaN(this.max)) { + this.enable = true; + if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) { + this.slider.setValue(BI.parseInt(this.value)); + this._setSliderPosition(this._getPercentByValue(this.value)); + } else { + this.slider.setValue(this.max); + this._setSliderPosition(100); + } + } + } +}); + +BI.Slider.EVENT_CHANGE = "EVENT_CHANGE"; +BI.shortcut("bi.slider", BI.Slider);/** * 可以单选多选切换的树 * * Created by GUY on 2015/12/21. diff --git a/demo/js/config/widget.js b/demo/js/config/widget.js index 9c15337406..74f66080d6 100644 --- a/demo/js/config/widget.js +++ b/demo/js/config/widget.js @@ -252,5 +252,13 @@ Demo.WIDGET_CONFIG = [{ pId: 419, text: "bi.file_manager", value: "demo.file_manager" +}, { + pId: 4, + id: 421, + text: "滚动调节" +}, { + pId: 421, + text: "bi.slider", + value: "demo.slider" } ]; \ No newline at end of file diff --git a/demo/js/widget/slider/demo.slider.js b/demo/js/widget/slider/demo.slider.js new file mode 100644 index 0000000000..0fe4bf8a93 --- /dev/null +++ b/demo/js/widget/slider/demo.slider.js @@ -0,0 +1,42 @@ +/** + * Created by Urthur on 2017/9/4. + */ +Demo.Slider = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(Demo.Slider.superclass._defaultConfig.apply(this, arguments), { + baseCls: "demo-slider", + min: 10, + max: 50 + }) + }, + _init: function () { + Demo.Slider.superclass._init.apply(this, arguments); + var self = this; + BI.createWidget({ + type: "bi.vertical_adapt", + element: this, + width: 100, + items: [{ + type: "bi.htape", + items: [{ + el: { + type: "bi.slider", + min: 16, + max: 50, + ref: function (_ref) { + self.slider = _ref; + } + } + }], + height: 30, + width: 100 + }] + }); + this.slider.setValue("30"); + + this.slider.on(BI.Slider.EVENT_CHANGE, function () { + console.log(this.getValue()); + }) + } +}); +BI.shortcut("demo.slider", Demo.Slider); \ No newline at end of file diff --git a/dist/bundle.css b/dist/bundle.css index 59cd85729a..d74fcc9790 100644 --- a/dist/bundle.css +++ b/dist/bundle.css @@ -3161,6 +3161,13 @@ li.CodeMirror-hint-active { } /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ +.bi-slider .bi-slider-track { + background-color: rgba(153, 153, 153, 0.3); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ .bi-year-popup .year-popup-navigation { diff --git a/dist/bundle.js b/dist/bundle.js index 446a9d60e2..51daa9bbcd 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -91930,6 +91930,249 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, { }); BI.shortcut("bi.single_tree_trigger", BI.SingleTreeTrigger);/** + * Created by Urthur on 2017/9/4. + */ +BI.SliderButton = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(BI.SliderButton.superclass._defaultConfig.apply(this, arguments), { + baseCls: "bi-slider-button" + }); + }, + _init: function () { + BI.extend(BI.SliderButton.superclass._init.apply(this, arguments)); + var self = this; + var sliderButton = BI.createWidget({ + type: "bi.icon_button", + cls: "column-next-page-h-font", + iconWidth: 16, + iconHeight: 16, + height: 16, + width: 16 + }); + BI.createWidget({ + type: "bi.absolute", + element: this, + items: [{ + el: sliderButton, + left: -8 + }, { + el: { + type: "bi.label", + ref: function (_ref) { + self.label = _ref; + } + }, + left: -8, + top: -10 + }] + }); + }, + + setValue: function (v) { + this.label.setText(v); + } +}); +BI.shortcut("bi.slider_button", BI.SliderButton);/** + * Created by Urthur on 2017/9/4. + */ +BI.Slider = BI.inherit(BI.Widget, { + _constant: { + HEIGHT: 28, + SLIDER_WIDTH_HALF: 10, + SLIDER_WIDTH: 25, + SLIDER_HEIGHT: 30, + TRACK_HEIGHT: 24 + }, + + _defaultConfig: function () { + return BI.extend(BI.Slider.superclass._defaultConfig.apply(this, arguments), { + baseCls: "bi-slider", + min: 10, + max: 50 + }) + }, + + _init: function () { + BI.Slider.superclass._init.apply(this, arguments); + var self = this; + var c = this._constant, o = this.options; + this.enable = false; + this.value = o.min; + this.min = o.min; + this.max = o.max; + + this.rightTrack = BI.createWidget({ + type: "bi.layout", + cls: "bi-slider-track", + height: 5 + }); + this.track = this._createTrack(); + + this.slider = BI.createWidget({ + type: "bi.slider_button" + }); + this.slider.setValue(this.getValue()); + this.slider.element.draggable({ + axis: "x", + containment: this.rightTrack.element, + scroll: false, + drag: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getRightTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 + var v = self._getValueByPercent(significantPercent); + self.value = BI.parseInt(v) + 1; + self.slider.setValue(self.getValue()); + self.fireEvent(BI.Slider.EVENT_CHANGE); + }, + stop: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getRightTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderPosition(significantPercent); + self.fireEvent(BI.Slider.EVENT_CHANGE); + } + }); + var sliderVertical = BI.createWidget({ + type: "bi.vertical", + items: [{ + type: "bi.absolute", + items: [{ + el: this.slider, + top: 10 + }] + }], + 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._getRightTrackLength(); + } + if (offset > (trackLength - c.SLIDER_WIDTH)) { + percent = 100 + } + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderPosition(significantPercent); + var v = self._getValueByPercent(significantPercent); + self.value = BI.parseInt(v); + self.slider.setValue(self.getValue()); + self.fireEvent(BI.Slider.EVENT_CHANGE); + } + }); + + 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 + }] + }], + height: c.TRACK_HEIGHT + }, + top: 33, + left: 0, + width: "100%" + }, { + el: sliderVertical, + top: 15, + left: 0, + width: "100%" + }] + }); + }, + + _createTrack: function () { + return BI.createWidget({ + type: "bi.absolute", + items: [{ + el: { + type: "bi.vertical", + items: [{ + type: "bi.absolute", + items: [{ + el: this.rightTrack, + top: 0, + left: 0, + width: "100%" + }] + }], + hgap: 8, + height: 5 + }, + top: 5, + left: 0, + width: "100%" + }] + }) + }, + + _checkValidation: function (v) { + return !(BI.isNull(v) || v < this.min || v > this.max) + }, + + _setSliderPosition: function (percent) { + this.slider.element.css({"left": percent + "%"}); + }, + + _getRightTrackLength: function () { + return this.rightTrack.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; + } + } + + if (!isNaN(this.min) && !isNaN(this.max)) { + this.enable = true; + if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) { + this.slider.setValue(BI.parseInt(this.value)); + this._setSliderPosition(this._getPercentByValue(this.value)); + } else { + this.slider.setValue(this.max); + this._setSliderPosition(100); + } + } + } +}); + +BI.Slider.EVENT_CHANGE = "EVENT_CHANGE"; +BI.shortcut("bi.slider", BI.Slider);/** * 可以单选多选切换的树 * * Created by GUY on 2015/12/21. diff --git a/dist/demo.js b/dist/demo.js index 0d478f8fe9..671a81cb47 100644 --- a/dist/demo.js +++ b/dist/demo.js @@ -3728,6 +3728,14 @@ Demo.COMPONENT_CONFIG = [{ pId: 419, text: "bi.file_manager", value: "demo.file_manager" +}, { + pId: 4, + id: 421, + text: "滚动调节" +}, { + pId: 421, + text: "bi.slider", + value: "demo.slider" } ];Demo.Func = BI.inherit(BI.Widget, { props: { @@ -8391,6 +8399,47 @@ Demo.SingleTreeCombo = BI.inherit(BI.Widget, { }) BI.shortcut("demo.single_tree_combo", Demo.SingleTreeCombo);/** + * Created by Urthur on 2017/9/4. + */ +Demo.Slider = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(Demo.Slider.superclass._defaultConfig.apply(this, arguments), { + baseCls: "demo-slider", + min: 10, + max: 50 + }) + }, + _init: function () { + Demo.Slider.superclass._init.apply(this, arguments); + var self = this; + BI.createWidget({ + type: "bi.vertical_adapt", + element: this, + width: 100, + items: [{ + type: "bi.htape", + items: [{ + el: { + type: "bi.slider", + min: 16, + max: 50, + ref: function (_ref) { + self.slider = _ref; + } + } + }], + height: 30, + width: 100 + }] + }); + this.slider.setValue("30"); + + this.slider.on(BI.Slider.EVENT_CHANGE, function () { + console.log(this.getValue()); + }) + } +}); +BI.shortcut("demo.slider", Demo.Slider);/** * Created by Dailer on 2017/7/12. */ Demo.ExcelTable = BI.inherit(BI.Widget, { diff --git a/dist/widget.css b/dist/widget.css index d07adc5bfa..c43972c1e6 100644 --- a/dist/widget.css +++ b/dist/widget.css @@ -392,6 +392,13 @@ } /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ +.bi-slider .bi-slider-track { + background-color: rgba(153, 153, 153, 0.3); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ .bi-year-popup .year-popup-navigation { diff --git a/dist/widget.js b/dist/widget.js index 061e3dd425..4cb1caa2fa 100644 --- a/dist/widget.js +++ b/dist/widget.js @@ -14936,6 +14936,249 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, { }); BI.shortcut("bi.single_tree_trigger", BI.SingleTreeTrigger);/** + * Created by Urthur on 2017/9/4. + */ +BI.SliderButton = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(BI.SliderButton.superclass._defaultConfig.apply(this, arguments), { + baseCls: "bi-slider-button" + }); + }, + _init: function () { + BI.extend(BI.SliderButton.superclass._init.apply(this, arguments)); + var self = this; + var sliderButton = BI.createWidget({ + type: "bi.icon_button", + cls: "column-next-page-h-font", + iconWidth: 16, + iconHeight: 16, + height: 16, + width: 16 + }); + BI.createWidget({ + type: "bi.absolute", + element: this, + items: [{ + el: sliderButton, + left: -8 + }, { + el: { + type: "bi.label", + ref: function (_ref) { + self.label = _ref; + } + }, + left: -8, + top: -10 + }] + }); + }, + + setValue: function (v) { + this.label.setText(v); + } +}); +BI.shortcut("bi.slider_button", BI.SliderButton);/** + * Created by Urthur on 2017/9/4. + */ +BI.Slider = BI.inherit(BI.Widget, { + _constant: { + HEIGHT: 28, + SLIDER_WIDTH_HALF: 10, + SLIDER_WIDTH: 25, + SLIDER_HEIGHT: 30, + TRACK_HEIGHT: 24 + }, + + _defaultConfig: function () { + return BI.extend(BI.Slider.superclass._defaultConfig.apply(this, arguments), { + baseCls: "bi-slider", + min: 10, + max: 50 + }) + }, + + _init: function () { + BI.Slider.superclass._init.apply(this, arguments); + var self = this; + var c = this._constant, o = this.options; + this.enable = false; + this.value = o.min; + this.min = o.min; + this.max = o.max; + + this.rightTrack = BI.createWidget({ + type: "bi.layout", + cls: "bi-slider-track", + height: 5 + }); + this.track = this._createTrack(); + + this.slider = BI.createWidget({ + type: "bi.slider_button" + }); + this.slider.setValue(this.getValue()); + this.slider.element.draggable({ + axis: "x", + containment: this.rightTrack.element, + scroll: false, + drag: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getRightTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 + var v = self._getValueByPercent(significantPercent); + self.value = BI.parseInt(v) + 1; + self.slider.setValue(self.getValue()); + self.fireEvent(BI.Slider.EVENT_CHANGE); + }, + stop: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getRightTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderPosition(significantPercent); + self.fireEvent(BI.Slider.EVENT_CHANGE); + } + }); + var sliderVertical = BI.createWidget({ + type: "bi.vertical", + items: [{ + type: "bi.absolute", + items: [{ + el: this.slider, + top: 10 + }] + }], + 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._getRightTrackLength(); + } + if (offset > (trackLength - c.SLIDER_WIDTH)) { + percent = 100 + } + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderPosition(significantPercent); + var v = self._getValueByPercent(significantPercent); + self.value = BI.parseInt(v); + self.slider.setValue(self.getValue()); + self.fireEvent(BI.Slider.EVENT_CHANGE); + } + }); + + 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 + }] + }], + height: c.TRACK_HEIGHT + }, + top: 33, + left: 0, + width: "100%" + }, { + el: sliderVertical, + top: 15, + left: 0, + width: "100%" + }] + }); + }, + + _createTrack: function () { + return BI.createWidget({ + type: "bi.absolute", + items: [{ + el: { + type: "bi.vertical", + items: [{ + type: "bi.absolute", + items: [{ + el: this.rightTrack, + top: 0, + left: 0, + width: "100%" + }] + }], + hgap: 8, + height: 5 + }, + top: 5, + left: 0, + width: "100%" + }] + }) + }, + + _checkValidation: function (v) { + return !(BI.isNull(v) || v < this.min || v > this.max) + }, + + _setSliderPosition: function (percent) { + this.slider.element.css({"left": percent + "%"}); + }, + + _getRightTrackLength: function () { + return this.rightTrack.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; + } + } + + if (!isNaN(this.min) && !isNaN(this.max)) { + this.enable = true; + if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) { + this.slider.setValue(BI.parseInt(this.value)); + this._setSliderPosition(this._getPercentByValue(this.value)); + } else { + this.slider.setValue(this.max); + this._setSliderPosition(100); + } + } + } +}); + +BI.Slider.EVENT_CHANGE = "EVENT_CHANGE"; +BI.shortcut("bi.slider", BI.Slider);/** * 可以单选多选切换的树 * * Created by GUY on 2015/12/21. diff --git a/src/css/widget/slider/slider.css b/src/css/widget/slider/slider.css new file mode 100644 index 0000000000..6ea5a438fc --- /dev/null +++ b/src/css/widget/slider/slider.css @@ -0,0 +1,7 @@ +.bi-slider .bi-slider-track { + background-color: rgba(153, 153, 153, 0.3); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} diff --git a/src/less/widget/slider/slider.less b/src/less/widget/slider/slider.less new file mode 100644 index 0000000000..7ed1da82e8 --- /dev/null +++ b/src/less/widget/slider/slider.less @@ -0,0 +1,8 @@ +@import "../../bibase"; + +.bi-slider { + .bi-slider-track { + .background-color(@color-bi-background-gray, 30%); + .border-radius(3px); + } +} \ No newline at end of file diff --git a/src/widget/slider/slider.button.js b/src/widget/slider/slider.button.js new file mode 100644 index 0000000000..3666d39a73 --- /dev/null +++ b/src/widget/slider/slider.button.js @@ -0,0 +1,44 @@ +/** + * Created by Urthur on 2017/9/4. + */ +BI.SliderButton = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(BI.SliderButton.superclass._defaultConfig.apply(this, arguments), { + baseCls: "bi-slider-button" + }); + }, + _init: function () { + BI.extend(BI.SliderButton.superclass._init.apply(this, arguments)); + var self = this; + var sliderButton = BI.createWidget({ + type: "bi.icon_button", + cls: "column-next-page-h-font", + iconWidth: 16, + iconHeight: 16, + height: 16, + width: 16 + }); + BI.createWidget({ + type: "bi.absolute", + element: this, + items: [{ + el: sliderButton, + left: -8 + }, { + el: { + type: "bi.label", + ref: function (_ref) { + self.label = _ref; + } + }, + left: -8, + top: -10 + }] + }); + }, + + setValue: function (v) { + this.label.setText(v); + } +}); +BI.shortcut("bi.slider_button", BI.SliderButton); \ No newline at end of file diff --git a/src/widget/slider/slider.js b/src/widget/slider/slider.js new file mode 100644 index 0000000000..fb752242d1 --- /dev/null +++ b/src/widget/slider/slider.js @@ -0,0 +1,201 @@ +/** + * Created by Urthur on 2017/9/4. + */ +BI.Slider = BI.inherit(BI.Widget, { + _constant: { + HEIGHT: 28, + SLIDER_WIDTH_HALF: 10, + SLIDER_WIDTH: 25, + SLIDER_HEIGHT: 30, + TRACK_HEIGHT: 24 + }, + + _defaultConfig: function () { + return BI.extend(BI.Slider.superclass._defaultConfig.apply(this, arguments), { + baseCls: "bi-slider", + min: 10, + max: 50 + }) + }, + + _init: function () { + BI.Slider.superclass._init.apply(this, arguments); + var self = this; + var c = this._constant, o = this.options; + this.enable = false; + this.value = o.min; + this.min = o.min; + this.max = o.max; + + this.rightTrack = BI.createWidget({ + type: "bi.layout", + cls: "bi-slider-track", + height: 5 + }); + this.track = this._createTrack(); + + this.slider = BI.createWidget({ + type: "bi.slider_button" + }); + this.slider.setValue(this.getValue()); + this.slider.element.draggable({ + axis: "x", + containment: this.rightTrack.element, + scroll: false, + drag: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getRightTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 + var v = self._getValueByPercent(significantPercent); + self.value = BI.parseInt(v) + 1; + self.slider.setValue(self.getValue()); + self.fireEvent(BI.Slider.EVENT_CHANGE); + }, + stop: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getRightTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderPosition(significantPercent); + self.fireEvent(BI.Slider.EVENT_CHANGE); + } + }); + var sliderVertical = BI.createWidget({ + type: "bi.vertical", + items: [{ + type: "bi.absolute", + items: [{ + el: this.slider, + top: 10 + }] + }], + 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._getRightTrackLength(); + } + if (offset > (trackLength - c.SLIDER_WIDTH)) { + percent = 100 + } + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderPosition(significantPercent); + var v = self._getValueByPercent(significantPercent); + self.value = BI.parseInt(v); + self.slider.setValue(self.getValue()); + self.fireEvent(BI.Slider.EVENT_CHANGE); + } + }); + + 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 + }] + }], + height: c.TRACK_HEIGHT + }, + top: 33, + left: 0, + width: "100%" + }, { + el: sliderVertical, + top: 15, + left: 0, + width: "100%" + }] + }); + }, + + _createTrack: function () { + return BI.createWidget({ + type: "bi.absolute", + items: [{ + el: { + type: "bi.vertical", + items: [{ + type: "bi.absolute", + items: [{ + el: this.rightTrack, + top: 0, + left: 0, + width: "100%" + }] + }], + hgap: 8, + height: 5 + }, + top: 5, + left: 0, + width: "100%" + }] + }) + }, + + _checkValidation: function (v) { + return !(BI.isNull(v) || v < this.min || v > this.max) + }, + + _setSliderPosition: function (percent) { + this.slider.element.css({"left": percent + "%"}); + }, + + _getRightTrackLength: function () { + return this.rightTrack.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; + } + } + + if (!isNaN(this.min) && !isNaN(this.max)) { + this.enable = true; + if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) { + this.slider.setValue(BI.parseInt(this.value)); + this._setSliderPosition(this._getPercentByValue(this.value)); + } else { + this.slider.setValue(this.max); + this._setSliderPosition(100); + } + } + } +}); + +BI.Slider.EVENT_CHANGE = "EVENT_CHANGE"; +BI.shortcut("bi.slider", BI.Slider); \ No newline at end of file