diff --git a/Gruntfile.js b/Gruntfile.js index 30f18a642..e45eaaaec 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -83,7 +83,7 @@ module.exports = function (grunt) { }, sliderJs: { src: [ - 'src/addons/slider/slider/**/*.js' + 'src/addons/slider/singleslider/**/*.js' ], dest: 'dist/slider.js' }, diff --git a/bi/case.js b/bi/case.js index 5a102525e..7f196ca75 100644 --- a/bi/case.js +++ b/bi/case.js @@ -12545,6 +12545,81 @@ BI.IconTrigger = BI.inherit(BI.Trigger, { } }); BI.shortcut('bi.icon_trigger', BI.IconTrigger);/** + * 文字trigger + * + * Created by GUY on 2015/9/15. + * @class BI.IconTextTrigger + * @extends BI.Trigger + */ +BI.IconTextTrigger = BI.inherit(BI.Trigger, { + _const: { + hgap: 4, + triggerWidth: 30 + }, + + _defaultConfig: function () { + var conf = BI.IconTextTrigger.superclass._defaultConfig.apply(this, arguments); + return BI.extend(conf, { + baseCls: (conf.baseCls || "") + " bi-text-trigger", + height: 30 + }); + }, + + _init: function () { + BI.IconTextTrigger.superclass._init.apply(this, arguments); + var self = this, o = this.options, c = this._const; + this.text = BI.createWidget({ + type: "bi.label", + textAlign: "left", + height: o.height, + text: o.text, + hgap: c.hgap + }); + this.trigerButton = BI.createWidget({ + type: "bi.trigger_icon_button", + cls: "bi-border-left", + width: c.triggerWidth + }); + + BI.createWidget({ + element: this, + type: 'bi.htape', + items: [{ + el: { + type: "bi.icon_change_button", + cls: "icon-combo-trigger-icon " + o.iconClass, + ref: function (_ref) { + self.icon = _ref; + }, + disableSelected: true + }, + width: 24 + }, + { + el: this.text + }, { + el: this.trigerButton, + width: c.triggerWidth + } + ] + }); + }, + + setValue: function (value) { + this.text.setValue(value); + this.text.setTitle(value); + }, + + setIcon: function (iconCls) { + this.icon.setIcon(iconCls); + }, + + setText: function (text) { + this.text.setText(text); + this.text.setTitle(text); + } +}); +BI.shortcut("bi.icon_text_trigger", BI.IconTextTrigger);/** * 文字trigger * * Created by GUY on 2015/9/15. diff --git a/bi/slider.js b/bi/slider.js index d28871148..e69de29bb 100644 --- a/bi/slider.js +++ b/bi/slider.js @@ -1,799 +0,0 @@ -/** - * Created by zcf on 2016/9/22. - */ -BI.SliderButton = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.Slider.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-single-slider-button" - }); - }, - _init: function () { - BI.extend(BI.Slider.superclass._init.apply(this, arguments)); - this.slider = BI.createWidget({ - type: "bi.icon_button", - cls: "widget-slider-icon slider-button", - iconWidth: 14, - iconHeight: 14, - height: 14, - width: 14 - }); - BI.createWidget({ - type: "bi.absolute", - element: this, - items: [{ - el: this.slider, - top: 7, - left: -7 - }], - width: 0, - height: 14 - }); - } -}); -BI.shortcut("bi.single_slider_button", BI.SliderButton);/** - * Created by zcf on 2016/9/22. - */ -BI.SingleSlider = BI.inherit(BI.Widget, { - _constant: { - EDITOR_WIDTH: 90, - 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.grayTrack = BI.createWidget({ - type: "bi.layout", - cls: "gray-track", - height: 6 - }); - this.blueTrack = BI.createWidget({ - type: "bi.layout", - cls: "blue-track bi-high-light-background", - height: 6 - }); - this.track = this._createTrackWrapper(); - - this.slider = BI.createWidget({ - type: "bi.single_slider_button" - }); - 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 bi-border", - 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 v = BI.parseFloat(this.getValue()); - self.value = v; - var percent = self._getPercentByValue(v); - var significantPercent = BI.parseFloat(percent.toFixed(1)); - self._setAllPosition(significantPercent); - self.fireEvent(BI.SingleSlider.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%" - }, { - el: sliderVertical, - top: 30, - left: 0, - width: "100%" - }, { - el: { - type: "bi.vertical", - items: [{ - type: "bi.absolute", - items: [this.label] - }], - rgap: c.EDITOR_WIDTH, - height: c.EDITOR_HEIGHT - }, - top: 0, - left: 0, - width: "100%" - }] - }) - }, - - _createTrackWrapper: function () { - return BI.createWidget({ - type: "bi.absolute", - items: [{ - 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) - }, - - _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);/** - * normal single slider - * Created by Young on 2017/6/21. - */ -BI.SingleSliderNormal = BI.inherit(BI.Widget, { - - _constant: { - EDITOR_WIDTH: 90, - EDITOR_HEIGHT: 30, - HEIGHT: 28, - SLIDER_WIDTH_HALF: 15, - SLIDER_WIDTH: 30, - SLIDER_HEIGHT: 30, - TRACK_HEIGHT: 24 - }, - - props: { - baseCls: "bi-single-button bi-button-track", - minMax: { - min: 0, - max: 100 - }, - color: "#3f8ce8" - }, - - render: function () { - var self = this; - var c = this._constant; - var track = this._createTrack(); - this.slider = BI.createWidget({ - type: "bi.single_slider_button" - }); - 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); - var v = self._getValueByPercent(significantPercent); - self.value = v; - self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, 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.value = v; - self.fireEvent(BI.SingleSlider.EVENT_CHANGE); - } - }); - - return { - type: "bi.absolute", - element: this, - items: [{ - el: { - type: "bi.vertical", - items: [{ - type: "bi.absolute", - items: [{ - el: track, - width: "100%", - height: c.TRACK_HEIGHT - }] - }], - hgap: 7, - height: c.TRACK_HEIGHT - }, - top: 3, - left: 0, - width: "100%" - }, { - el: sliderVertical, - top: 0, - left: 0, - width: "100%" - }] - } - }, - - _createTrack: function () { - var self = this; - var c = this._constant; - this.grayTrack = BI.createWidget({ - type: "bi.layout", - cls: "gray-track", - height: 6 - }); - this.blueTrack = BI.createWidget({ - type: "bi.layout", - cls: "blue-track", - height: 6 - }); - this.blueTrack.element.css({"background-color": this.options.color}); - - return { - type: "bi.absolute", - items: [{ - 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%" - }], - ref: function (ref) { - self.track = ref; - } - } - }, - - _checkValidation: function (v) { - return !(BI.isNull(v) || v < this.min || v > this.max) - }, - - _setBlueTrack: function (percent) { - this.blueTrack.element.css({"width": percent + "%"}); - }, - - _setSliderPosition: function (percent) { - this.slider.element.css({"left": percent + "%"}); - }, - - _setAllPosition: function (percent) { - this._setSliderPosition(percent); - this._setBlueTrack(percent); - }, - - _setVisible: function (visible) { - this.slider.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; - if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) { - this._setAllPosition(this._getPercentByValue(this.value)); - } else { - this._setAllPosition(100); - } - } - } -}); -BI.SingleSliderNormal.EVENT_DRAG = "EVENT_DRAG"; -BI.shortcut("bi.single_slider_normal", BI.SingleSliderNormal);/** - * 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.SliderNormal = 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.SliderNormal.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-slider", - min: 10, - max: 50 - }) - }, - - _init: function () { - BI.SliderNormal.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.SliderNormal.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.SliderNormal.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.SliderNormal.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.SliderNormal.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.slider", BI.SliderNormal); \ No newline at end of file diff --git a/demo/js/widget/slider/demo.slider.js b/demo/js/widget/slider/demo.slider.js index 6412a351f..56a97ccad 100644 --- a/demo/js/widget/slider/demo.slider.js +++ b/demo/js/widget/slider/demo.slider.js @@ -12,48 +12,38 @@ Demo.Slider = BI.inherit(BI.Widget, { _init: function () { Demo.Slider.superclass._init.apply(this, arguments); - var slider = BI.createWidget({ - type: "bi.slider", - min: 16, - max: 50, - width: 100, + var singleSlider = BI.createWidget({ + type: "bi.single_slider", + width: 300, height: 50 }); - slider.setValue("30"); - - slider.on(BI.SliderNormal.EVENT_CHANGE, function () { - console.log(this.getValue()); - }); - - var singleSlider = BI.createWidget({ - type: "bi.single_slider", - min: 16, - max: 50 + singleSlider.setMinAndMax({ + min: 10, + max: 100 }); singleSlider.populate(); var normalSingleSlider = BI.createWidget({ type: "bi.single_slider_normal", - min: 16, - max: 50 + height: 30, + width: 300 }); + normalSingleSlider.setMinAndMax({ + min: 0, + max: 100 + }); + + normalSingleSlider.setValue(10); + normalSingleSlider.populate(); BI.createWidget({ type: "bi.vtape", element: this, items: [{ - el: { - type: "bi.center_adapt", - items: [{ - el: slider - }] - }, - height: 200 - }, { el: { type: "bi.center_adapt", items: [{ diff --git a/dist/demo.js b/dist/demo.js index df5e44441..9f9c13df8 100644 --- a/dist/demo.js +++ b/dist/demo.js @@ -8446,48 +8446,38 @@ Demo.Slider = BI.inherit(BI.Widget, { _init: function () { Demo.Slider.superclass._init.apply(this, arguments); - var slider = BI.createWidget({ - type: "bi.slider", - min: 16, - max: 50, - width: 100, + var singleSlider = BI.createWidget({ + type: "bi.single_slider", + width: 300, height: 50 }); - slider.setValue("30"); - - slider.on(BI.SliderNormal.EVENT_CHANGE, function () { - console.log(this.getValue()); - }); - - var singleSlider = BI.createWidget({ - type: "bi.single_slider", - min: 16, - max: 50 + singleSlider.setMinAndMax({ + min: 10, + max: 100 }); singleSlider.populate(); var normalSingleSlider = BI.createWidget({ type: "bi.single_slider_normal", - min: 16, - max: 50 + height: 30, + width: 300 + }); + + normalSingleSlider.setMinAndMax({ + min: 0, + max: 100 }); + normalSingleSlider.setValue(10); + normalSingleSlider.populate(); BI.createWidget({ type: "bi.vtape", element: this, items: [{ - el: { - type: "bi.center_adapt", - items: [{ - el: slider - }] - }, - height: 200 - }, { el: { type: "bi.center_adapt", items: [{ diff --git a/dist/slider.js b/dist/slider.js index d28871148..04ba397d9 100644 --- a/dist/slider.js +++ b/dist/slider.js @@ -1,14 +1,14 @@ /** * Created by zcf on 2016/9/22. */ -BI.SliderButton = BI.inherit(BI.Widget, { +BI.SliderIconButton = BI.inherit(BI.Widget, { _defaultConfig: function () { - return BI.extend(BI.Slider.superclass._defaultConfig.apply(this, arguments), { + return BI.extend(BI.SliderIconButton.superclass._defaultConfig.apply(this, arguments), { baseCls: "bi-single-slider-button" }); }, _init: function () { - BI.extend(BI.Slider.superclass._init.apply(this, arguments)); + BI.extend(BI.SliderIconButton.superclass._init.apply(this, arguments)); this.slider = BI.createWidget({ type: "bi.icon_button", cls: "widget-slider-icon slider-button", @@ -30,7 +30,7 @@ BI.SliderButton = BI.inherit(BI.Widget, { }); } }); -BI.shortcut("bi.single_slider_button", BI.SliderButton);/** +BI.shortcut("bi.single_slider_button", BI.SliderIconButton);/** * Created by zcf on 2016/9/22. */ BI.SingleSlider = BI.inherit(BI.Widget, { @@ -127,7 +127,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { cls: "slider-editor-button bi-border", errorText: "", height: c.HEIGHT, - width: c.EDITOR_WIDTH, + width: c.EDITOR_WIDTH - 2, allowBlank: false, validationChecker: function (v) { return self._checkValidation(v); @@ -553,247 +553,4 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, { } }); BI.SingleSliderNormal.EVENT_DRAG = "EVENT_DRAG"; -BI.shortcut("bi.single_slider_normal", BI.SingleSliderNormal);/** - * 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.SliderNormal = 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.SliderNormal.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-slider", - min: 10, - max: 50 - }) - }, - - _init: function () { - BI.SliderNormal.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.SliderNormal.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.SliderNormal.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.SliderNormal.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.SliderNormal.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.slider", BI.SliderNormal); \ No newline at end of file +BI.shortcut("bi.single_slider_normal", BI.SingleSliderNormal); \ No newline at end of file diff --git a/src/addons/slider/slider/singleslider/button/iconbutton.slider.js b/src/addons/slider/singleslider/button/iconbutton.slider.js similarity index 70% rename from src/addons/slider/slider/singleslider/button/iconbutton.slider.js rename to src/addons/slider/singleslider/button/iconbutton.slider.js index fc8906124..63e9f2b18 100644 --- a/src/addons/slider/slider/singleslider/button/iconbutton.slider.js +++ b/src/addons/slider/singleslider/button/iconbutton.slider.js @@ -1,14 +1,14 @@ /** * Created by zcf on 2016/9/22. */ -BI.SliderButton = BI.inherit(BI.Widget, { +BI.SliderIconButton = BI.inherit(BI.Widget, { _defaultConfig: function () { - return BI.extend(BI.Slider.superclass._defaultConfig.apply(this, arguments), { + return BI.extend(BI.SliderIconButton.superclass._defaultConfig.apply(this, arguments), { baseCls: "bi-single-slider-button" }); }, _init: function () { - BI.extend(BI.Slider.superclass._init.apply(this, arguments)); + BI.extend(BI.SliderIconButton.superclass._init.apply(this, arguments)); this.slider = BI.createWidget({ type: "bi.icon_button", cls: "widget-slider-icon slider-button", @@ -30,4 +30,4 @@ BI.SliderButton = BI.inherit(BI.Widget, { }); } }); -BI.shortcut("bi.single_slider_button", BI.SliderButton); \ No newline at end of file +BI.shortcut("bi.single_slider_button", BI.SliderIconButton); \ No newline at end of file diff --git a/src/addons/slider/slider/singleslider/singleslider.js b/src/addons/slider/singleslider/singleslider.js similarity index 99% rename from src/addons/slider/slider/singleslider/singleslider.js rename to src/addons/slider/singleslider/singleslider.js index fa4646f99..a7a6f8483 100644 --- a/src/addons/slider/slider/singleslider/singleslider.js +++ b/src/addons/slider/singleslider/singleslider.js @@ -95,7 +95,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { cls: "slider-editor-button bi-border", errorText: "", height: c.HEIGHT, - width: c.EDITOR_WIDTH, + width: c.EDITOR_WIDTH - 2, allowBlank: false, validationChecker: function (v) { return self._checkValidation(v); diff --git a/src/addons/slider/slider/singleslider/singleslider.normal.js b/src/addons/slider/singleslider/singleslider.normal.js similarity index 100% rename from src/addons/slider/slider/singleslider/singleslider.normal.js rename to src/addons/slider/singleslider/singleslider.normal.js diff --git a/src/addons/slider/slider/slider.button.js b/src/addons/slider/slider/slider.button.js deleted file mode 100644 index 3666d39a7..000000000 --- a/src/addons/slider/slider/slider.button.js +++ /dev/null @@ -1,44 +0,0 @@ -/** - * 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/addons/slider/slider/slider.js b/src/addons/slider/slider/slider.js deleted file mode 100644 index 51efde461..000000000 --- a/src/addons/slider/slider/slider.js +++ /dev/null @@ -1,201 +0,0 @@ -/** - * Created by Urthur on 2017/9/4. - */ -BI.SliderNormal = 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.SliderNormal.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-slider", - min: 10, - max: 50 - }) - }, - - _init: function () { - BI.SliderNormal.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.SliderNormal.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.SliderNormal.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.SliderNormal.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.SliderNormal.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.slider", BI.SliderNormal); \ No newline at end of file