From 23294573b582c245c1bb0d02e7cb7fc7540da92c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E8=8D=A3=E6=AD=86?= Date: Mon, 17 Jul 2017 10:31:31 +0800 Subject: [PATCH] no message --- bi/widget.js | 26 ++++-- demo/css/main.css | 18 ++-- demo/less/main.less | 100 +++++++++++++---------- docs/demo.css | 18 ++-- docs/demo.js | 9 +- docs/icon/arrow left right.png | Bin 0 -> 389 bytes docs/icon/双向箭头.png | Bin 0 -> 189 bytes docs/widget.js | 26 ++++-- src/widget/singleslider1/singleslider.js | 26 ++++-- 9 files changed, 138 insertions(+), 85 deletions(-) create mode 100644 docs/icon/arrow left right.png create mode 100644 docs/icon/双向箭头.png 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 0000000000000000000000000000000000000000..2a87a9b4692b825db1fb14fa90eb475a58d1d29e GIT binary patch literal 389 zcmV;00eb$4P)IiRVAs2Aj&%Q)xxu_#Z_ zC$NcCI+G1yza*kc6eN;}Dp`<-DyjxSB8sS*1c^mO)hI|TBC2LVVwR{^5F{pvdL=>P zAyJ;79@qhI6=yfx=T%XSb6`zK!xf8bLVAF&3>L{b9juSrtuzdnbD#(Iz#=favq%@QQc8Bl|$MFa_R29+#oQ9;6-fhCHHB1o7s zxFk_g1qpKsN)VMqkT9nxXHiK733Cchu?lB$BC#N0PH~PrMUb#jahIz2K{}o!NHoI| jNAmvl=1kbLnL6YL7KV$WAKMuj00000NkvXXu0mjfi9(tz literal 0 HcmV?d00001 diff --git a/docs/icon/双向箭头.png b/docs/icon/双向箭头.png new file mode 100644 index 0000000000000000000000000000000000000000..c816d0394bf426506e045b76d6e74a0770f110b2 GIT binary patch literal 189 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=ffJ7Ec$)kcif|m(TJxD2OmW=zGA? zcR-`>fJe^(w_Tk%4b$5V)!Oz~y`Em6y+xcsQ1IpE2}XyXRy)7@k$fcU=}yJjy57!1=Ur%bpMG*|X-NWGN>gTe~DWM4fP%%lo literal 0 HcmV?d00001 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; }