diff --git a/bi/widget.js b/bi/widget.js index c1a8357cb..6399ab05b 100644 --- a/bi/widget.js +++ b/bi/widget.js @@ -14940,7 +14940,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { scroll: false, drag: function (e, ui) { var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 + var significantPercent = BI.parseFloat(percent.toFixed(1)); //直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 self._setBlueTrack(significantPercent); self._setLabelPosition(significantPercent); var v = self._getValueByPercent(significantPercent); @@ -14987,7 +14987,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { }); this.label = BI.createWidget({ type: "bi.sign_editor", - cls: "slider-editor-button bi-border", + cls: "slider-editor-button", errorText: "", height: c.HEIGHT, width: c.EDITOR_WIDTH, @@ -15005,6 +15005,12 @@ BI.SingleSlider = BI.inherit(BI.Widget, { 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", @@ -15038,7 +15044,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { type: "bi.absolute", items: [this.label] }], - rgap: c.EDITOR_WIDTH/2, + rgap: c.EDITOR_WIDTH / 2, height: c.EDITOR_HEIGHT }, top: 0, @@ -15086,15 +15092,21 @@ BI.SingleSlider = BI.inherit(BI.Widget, { }, _setBlueTrack: function (percent) { - this.blueTrack.element.css({"width": percent + "%"}); + this.blueTrack.element.css({ + "width": percent + "%" + }); }, _setLabelPosition: function (percent) { - this.label.element.css({"left": percent + "%"}); + this.label.element.css({ + "left": percent + "%" + }); }, _setSliderPosition: function (percent) { - this.slider.element.css({"left": percent + "%"}); + this.slider.element.css({ + "left": percent + "%" + }); }, _setAllPosition: function (percent) { @@ -15143,7 +15155,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { setMinAndMax: function (v) { var minNumber = BI.parseFloat(v.min); var maxNumber = BI.parseFloat(v.max); - if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) { + if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber)) { this.min = minNumber; this.max = maxNumber; } diff --git a/demo/css/main.css b/demo/css/main.css index 65474e29e..d568a16cd 100644 --- a/demo/css/main.css +++ b/demo/css/main.css @@ -66,21 +66,23 @@ body { -moz-border-radius: 4px; border-radius: 4px; } -.bi-single-slider-slider { - cursor: url('http://img5.imgtn.bdimg.com/it/u=1821811235,1515479556&fm=26&gp=0.jpg'), auto; -} .widget-slider-icon .x-icon { display: block; - background: url('icon/slider.png') no-repeat 0 0; + 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, -.widget-slider-icon:focus .x-icon, -.widget-slider-icon.hover .x-icon { +.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/slider.png') no-repeat 0 0; + 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%; diff --git a/demo/less/main.less b/demo/less/main.less index 0864f25c9..997d95131 100644 --- a/demo/less/main.less +++ b/demo/less/main.less @@ -1,5 +1,4 @@ @import "index"; - .layout-bg-white { background-color: #ffffff; } @@ -62,51 +61,62 @@ body { background-color: @color-bi-background-normal-theme-dark; } -.demo-editor{ +.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; -} -.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; -} -.bi-single-slider-slider { - cursor: url('http://img5.imgtn.bdimg.com/it/u=1821811235,1515479556&fm=26&gp=0.jpg'), auto; -} - -.widget-slider-icon .x-icon { - display: block; - background: url('./icon/slider.png') no-repeat 0 0 ; - _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%; - //background-position:center center; -} -.widget-slider-icon:hover .x-icon, -.widget-slider-icon:focus .x-icon, -.widget-slider-icon.hover .x-icon { - display: block; - background: url('./icon/slider.png') no-repeat 0 0; - _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%; - // background-position:center center; -} -.widget-slider-icon.native .x-icon, -.widget-slider-icon.disabled .x-icon { - display: block; +.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; + } } \ No newline at end of file diff --git a/docs/demo.css b/docs/demo.css index 7b5dba2ba..2066ecf13 100644 --- a/docs/demo.css +++ b/docs/demo.css @@ -69,21 +69,23 @@ body { -moz-border-radius: 4px; border-radius: 4px; } -.bi-single-slider-slider { - cursor: url('http://img5.imgtn.bdimg.com/it/u=1821811235,1515479556&fm=26&gp=0.jpg'), auto; -} .widget-slider-icon .x-icon { display: block; - background: url('icon/slider.png') no-repeat 0 0; + 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, -.widget-slider-icon:focus .x-icon, -.widget-slider-icon.hover .x-icon { +.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/slider.png') no-repeat 0 0; + 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%; diff --git a/docs/demo.js b/docs/demo.js index 14190559c..c07b79652 100644 --- a/docs/demo.js +++ b/docs/demo.js @@ -7077,7 +7077,7 @@ Demo.IntervalSlider = BI.inherit(BI.Widget, { self.slider = _ref; }, width: 300, - height:90 + height: 90 }, { type: "bi.button", text: "populate", @@ -7095,12 +7095,15 @@ Demo.IntervalSlider = BI.inherit(BI.Widget, { handler: function () { //既然 setVlaue后要重新 populate 才能生效,为何不直接在 setValue方法的结尾调用 populate 方法呢? - self.slider.setValue({min:20,max:80}); + self.slider.setValue({ + min: 20, + max: 80 + }); self.slider.populate(); }, width: 300 }], - vgap:20 + vgap: 20 } } }) diff --git a/docs/icon/arrow left right.png b/docs/icon/arrow left right.png new file mode 100644 index 000000000..2a87a9b46 Binary files /dev/null and b/docs/icon/arrow left right.png differ diff --git a/docs/icon/双向箭头.png b/docs/icon/双向箭头.png new file mode 100644 index 000000000..c816d0394 Binary files /dev/null and b/docs/icon/双向箭头.png differ diff --git a/docs/widget.js b/docs/widget.js index c1a8357cb..6399ab05b 100644 --- a/docs/widget.js +++ b/docs/widget.js @@ -14940,7 +14940,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { scroll: false, drag: function (e, ui) { var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 + var significantPercent = BI.parseFloat(percent.toFixed(1)); //直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 self._setBlueTrack(significantPercent); self._setLabelPosition(significantPercent); var v = self._getValueByPercent(significantPercent); @@ -14987,7 +14987,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { }); this.label = BI.createWidget({ type: "bi.sign_editor", - cls: "slider-editor-button bi-border", + cls: "slider-editor-button", errorText: "", height: c.HEIGHT, width: c.EDITOR_WIDTH, @@ -15005,6 +15005,12 @@ BI.SingleSlider = BI.inherit(BI.Widget, { 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", @@ -15038,7 +15044,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { type: "bi.absolute", items: [this.label] }], - rgap: c.EDITOR_WIDTH/2, + rgap: c.EDITOR_WIDTH / 2, height: c.EDITOR_HEIGHT }, top: 0, @@ -15086,15 +15092,21 @@ BI.SingleSlider = BI.inherit(BI.Widget, { }, _setBlueTrack: function (percent) { - this.blueTrack.element.css({"width": percent + "%"}); + this.blueTrack.element.css({ + "width": percent + "%" + }); }, _setLabelPosition: function (percent) { - this.label.element.css({"left": percent + "%"}); + this.label.element.css({ + "left": percent + "%" + }); }, _setSliderPosition: function (percent) { - this.slider.element.css({"left": percent + "%"}); + this.slider.element.css({ + "left": percent + "%" + }); }, _setAllPosition: function (percent) { @@ -15143,7 +15155,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { setMinAndMax: function (v) { var minNumber = BI.parseFloat(v.min); var maxNumber = BI.parseFloat(v.max); - if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) { + if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber)) { this.min = minNumber; this.max = maxNumber; } diff --git a/src/widget/singleslider1/singleslider.js b/src/widget/singleslider1/singleslider.js index 13003ef1e..9662d5fdd 100644 --- a/src/widget/singleslider1/singleslider.js +++ b/src/widget/singleslider1/singleslider.js @@ -50,7 +50,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { scroll: false, drag: function (e, ui) { var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 + var significantPercent = BI.parseFloat(percent.toFixed(1)); //直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 self._setBlueTrack(significantPercent); self._setLabelPosition(significantPercent); var v = self._getValueByPercent(significantPercent); @@ -97,7 +97,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { }); this.label = BI.createWidget({ type: "bi.sign_editor", - cls: "slider-editor-button bi-border", + cls: "slider-editor-button", errorText: "", height: c.HEIGHT, width: c.EDITOR_WIDTH, @@ -115,6 +115,12 @@ BI.SingleSlider = BI.inherit(BI.Widget, { 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", @@ -148,7 +154,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { type: "bi.absolute", items: [this.label] }], - rgap: c.EDITOR_WIDTH/2, + rgap: c.EDITOR_WIDTH / 2, height: c.EDITOR_HEIGHT }, top: 0, @@ -196,15 +202,21 @@ BI.SingleSlider = BI.inherit(BI.Widget, { }, _setBlueTrack: function (percent) { - this.blueTrack.element.css({"width": percent + "%"}); + this.blueTrack.element.css({ + "width": percent + "%" + }); }, _setLabelPosition: function (percent) { - this.label.element.css({"left": percent + "%"}); + this.label.element.css({ + "left": percent + "%" + }); }, _setSliderPosition: function (percent) { - this.slider.element.css({"left": percent + "%"}); + this.slider.element.css({ + "left": percent + "%" + }); }, _setAllPosition: function (percent) { @@ -253,7 +265,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { setMinAndMax: function (v) { var minNumber = BI.parseFloat(v.min); var maxNumber = BI.parseFloat(v.max); - if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) { + if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber)) { this.min = minNumber; this.max = maxNumber; }