Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

no message

es6
刘荣歆 7 years ago
parent
133b5b4693
commit
23294573b5
9 changed files with 138 additions and 85 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      bi/widget.js
  2. 18
      demo/css/main.css
  3. 100
      demo/less/main.less
  4. 18
      docs/demo.css
  5. 9
      docs/demo.js
  6. BIN
      docs/icon/arrow left right.png
  7. BIN
      docs/icon/双向箭头.png
  8. 26
      docs/widget.js
  9. 26
      src/widget/singleslider1/singleslider.js

26
bi/widget.js
Unescape View File

@ -14940,7 +14940,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
scroll: false, scroll: false,
drag: function (e, ui) { drag: function (e, ui) {
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); 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._setBlueTrack(significantPercent);
self._setLabelPosition(significantPercent); self._setLabelPosition(significantPercent);
var v = self._getValueByPercent(significantPercent); var v = self._getValueByPercent(significantPercent);
@ -14987,7 +14987,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
}); });
this.label = BI.createWidget({ this.label = BI.createWidget({
type: "bi.sign_editor", type: "bi.sign_editor",
cls: "slider-editor-button bi-border", cls: "slider-editor-button",
errorText: "", errorText: "",
height: c.HEIGHT, height: c.HEIGHT,
width: c.EDITOR_WIDTH, width: c.EDITOR_WIDTH,
@ -15005,6 +15005,12 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
self._setAllPosition(significantPercent); self._setAllPosition(significantPercent);
self.fireEvent(BI.SingleSlider.EVENT_CHANGE); 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); this._setVisible(false);
BI.createWidget({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
@ -15038,7 +15044,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
type: "bi.absolute", type: "bi.absolute",
items: [this.label] items: [this.label]
}], }],
rgap: c.EDITOR_WIDTH/2, rgap: c.EDITOR_WIDTH / 2,
height: c.EDITOR_HEIGHT height: c.EDITOR_HEIGHT
}, },
top: 0, top: 0,
@ -15086,15 +15092,21 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
}, },
_setBlueTrack: function (percent) { _setBlueTrack: function (percent) {
this.blueTrack.element.css({"width": percent + "%"}); this.blueTrack.element.css({
"width": percent + "%"
});
}, },
_setLabelPosition: function (percent) { _setLabelPosition: function (percent) {
this.label.element.css({"left": percent + "%"}); this.label.element.css({
"left": percent + "%"
});
}, },
_setSliderPosition: function (percent) { _setSliderPosition: function (percent) {
this.slider.element.css({"left": percent + "%"}); this.slider.element.css({
"left": percent + "%"
});
}, },
_setAllPosition: function (percent) { _setAllPosition: function (percent) {
@ -15143,7 +15155,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
setMinAndMax: function (v) { setMinAndMax: function (v) {
var minNumber = BI.parseFloat(v.min); var minNumber = BI.parseFloat(v.min);
var maxNumber = BI.parseFloat(v.max); var maxNumber = BI.parseFloat(v.max);
if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) { if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber)) {
this.min = minNumber; this.min = minNumber;
this.max = maxNumber; this.max = maxNumber;
} }

18
demo/css/main.css
Unescape View File

@ -66,21 +66,23 @@ body {
-moz-border-radius: 4px; -moz-border-radius: 4px;
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 { .widget-slider-icon .x-icon {
display: block; 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'); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-normal.png');
_background: none; _background: none;
background-size: 100% 100%; background-size: 100% 100%;
} }
.widget-slider-icon:hover .x-icon, .widget-slider-icon:hover .x-icon {
.widget-slider-icon:focus .x-icon, display: block;
.widget-slider-icon.hover .x-icon { 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; 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'); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-active.png');
_background: none; _background: none;
background-size: 100% 100%; background-size: 100% 100%;

100
demo/less/main.less
Unescape View File

@ -1,5 +1,4 @@
@import "index"; @import "index";
.layout-bg-white { .layout-bg-white {
background-color: #ffffff; background-color: #ffffff;
} }
@ -62,51 +61,62 @@ body {
background-color: @color-bi-background-normal-theme-dark; background-color: @color-bi-background-normal-theme-dark;
} }
.demo-editor{ .demo-editor {
border: 1px solid rgb(204, 204, 204); border: 1px solid rgb(204, 204, 204);
} }
.bi-slider-track .background-track { .bi-slider-track {
background-color: rgba(153, 153, 153, 0); .background-track {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33999999,endColorstr=#33999999); background-color: rgba(153, 153, 153, 0);
-webkit-border-radius: 12px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33999999, endColorstr=#33999999);
-moz-border-radius: 12px; -webkit-border-radius: 12px;
border-radius: 12px; -moz-border-radius: 12px;
} border-radius: 12px;
.bi-slider-track .gray-track { }
background: #cccccc; .gray-track {
-webkit-border-radius: 4px; background: #cccccc;
-moz-border-radius: 4px; -webkit-border-radius: 4px;
border-radius: 4px; -moz-border-radius: 4px;
} border-radius: 4px;
.bi-slider-track .blue-track { }
-webkit-border-radius: 4px; .blue-track {
-moz-border-radius: 4px; -webkit-border-radius: 4px;
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 {
.widget-slider-icon .x-icon { .x-icon {
display: block; 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'); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-normal.png');
_background: none; _background: none;
background-size: 100% 100%; background-size: 100% 100%;
//background-position:center center; }
} &:hover {
.widget-slider-icon:hover .x-icon, .x-icon {
.widget-slider-icon:focus .x-icon, display: block;
.widget-slider-icon.hover .x-icon { background: url('./icon/双向箭头.png') no-repeat;
display: block; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-active.png');
background: url('./icon/slider.png') no-repeat 0 0; _background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-active.png'); background-size: 100% 100%;
_background: none; }
background-size: 100% 100%; }
// background-position:center center; &::focus {
} .x-icon {
.widget-slider-icon.native .x-icon, display: block;
.widget-slider-icon.disabled .x-icon { background: url('./icon/双向箭头.png') no-repeat;
display: block; _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;
}
} }

18
docs/demo.css
Unescape View File

@ -69,21 +69,23 @@ body {
-moz-border-radius: 4px; -moz-border-radius: 4px;
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 { .widget-slider-icon .x-icon {
display: block; 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'); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-normal.png');
_background: none; _background: none;
background-size: 100% 100%; background-size: 100% 100%;
} }
.widget-slider-icon:hover .x-icon, .widget-slider-icon:hover .x-icon {
.widget-slider-icon:focus .x-icon, display: block;
.widget-slider-icon.hover .x-icon { 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; 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'); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-active.png');
_background: none; _background: none;
background-size: 100% 100%; background-size: 100% 100%;

9
docs/demo.js
Unescape View File

@ -7077,7 +7077,7 @@ Demo.IntervalSlider = BI.inherit(BI.Widget, {
self.slider = _ref; self.slider = _ref;
}, },
width: 300, width: 300,
height:90 height: 90
}, { }, {
type: "bi.button", type: "bi.button",
text: "populate", text: "populate",
@ -7095,12 +7095,15 @@ Demo.IntervalSlider = BI.inherit(BI.Widget, {
handler: function () { handler: function () {
//既然 setVlaue后要重新 populate 才能生效,为何不直接在 setValue方法的结尾调用 populate 方法呢? //既然 setVlaue后要重新 populate 才能生效,为何不直接在 setValue方法的结尾调用 populate 方法呢?
self.slider.setValue({min:20,max:80}); self.slider.setValue({
min: 20,
max: 80
});
self.slider.populate(); self.slider.populate();
}, },
width: 300 width: 300
}], }],
vgap:20 vgap: 20
} }
} }
}) })

BIN
docs/icon/arrow left right.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 389 B

BIN
docs/icon/双向箭头.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 189 B

26
docs/widget.js
Unescape View File

@ -14940,7 +14940,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
scroll: false, scroll: false,
drag: function (e, ui) { drag: function (e, ui) {
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); 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._setBlueTrack(significantPercent);
self._setLabelPosition(significantPercent); self._setLabelPosition(significantPercent);
var v = self._getValueByPercent(significantPercent); var v = self._getValueByPercent(significantPercent);
@ -14987,7 +14987,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
}); });
this.label = BI.createWidget({ this.label = BI.createWidget({
type: "bi.sign_editor", type: "bi.sign_editor",
cls: "slider-editor-button bi-border", cls: "slider-editor-button",
errorText: "", errorText: "",
height: c.HEIGHT, height: c.HEIGHT,
width: c.EDITOR_WIDTH, width: c.EDITOR_WIDTH,
@ -15005,6 +15005,12 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
self._setAllPosition(significantPercent); self._setAllPosition(significantPercent);
self.fireEvent(BI.SingleSlider.EVENT_CHANGE); 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); this._setVisible(false);
BI.createWidget({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
@ -15038,7 +15044,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
type: "bi.absolute", type: "bi.absolute",
items: [this.label] items: [this.label]
}], }],
rgap: c.EDITOR_WIDTH/2, rgap: c.EDITOR_WIDTH / 2,
height: c.EDITOR_HEIGHT height: c.EDITOR_HEIGHT
}, },
top: 0, top: 0,
@ -15086,15 +15092,21 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
}, },
_setBlueTrack: function (percent) { _setBlueTrack: function (percent) {
this.blueTrack.element.css({"width": percent + "%"}); this.blueTrack.element.css({
"width": percent + "%"
});
}, },
_setLabelPosition: function (percent) { _setLabelPosition: function (percent) {
this.label.element.css({"left": percent + "%"}); this.label.element.css({
"left": percent + "%"
});
}, },
_setSliderPosition: function (percent) { _setSliderPosition: function (percent) {
this.slider.element.css({"left": percent + "%"}); this.slider.element.css({
"left": percent + "%"
});
}, },
_setAllPosition: function (percent) { _setAllPosition: function (percent) {
@ -15143,7 +15155,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
setMinAndMax: function (v) { setMinAndMax: function (v) {
var minNumber = BI.parseFloat(v.min); var minNumber = BI.parseFloat(v.min);
var maxNumber = BI.parseFloat(v.max); var maxNumber = BI.parseFloat(v.max);
if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) { if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber)) {
this.min = minNumber; this.min = minNumber;
this.max = maxNumber; this.max = maxNumber;
} }

26
src/widget/singleslider1/singleslider.js
Unescape View File

@ -50,7 +50,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
scroll: false, scroll: false,
drag: function (e, ui) { drag: function (e, ui) {
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); 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._setBlueTrack(significantPercent);
self._setLabelPosition(significantPercent); self._setLabelPosition(significantPercent);
var v = self._getValueByPercent(significantPercent); var v = self._getValueByPercent(significantPercent);
@ -97,7 +97,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
}); });
this.label = BI.createWidget({ this.label = BI.createWidget({
type: "bi.sign_editor", type: "bi.sign_editor",
cls: "slider-editor-button bi-border", cls: "slider-editor-button",
errorText: "", errorText: "",
height: c.HEIGHT, height: c.HEIGHT,
width: c.EDITOR_WIDTH, width: c.EDITOR_WIDTH,
@ -115,6 +115,12 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
self._setAllPosition(significantPercent); self._setAllPosition(significantPercent);
self.fireEvent(BI.SingleSlider.EVENT_CHANGE); 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); this._setVisible(false);
BI.createWidget({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
@ -148,7 +154,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
type: "bi.absolute", type: "bi.absolute",
items: [this.label] items: [this.label]
}], }],
rgap: c.EDITOR_WIDTH/2, rgap: c.EDITOR_WIDTH / 2,
height: c.EDITOR_HEIGHT height: c.EDITOR_HEIGHT
}, },
top: 0, top: 0,
@ -196,15 +202,21 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
}, },
_setBlueTrack: function (percent) { _setBlueTrack: function (percent) {
this.blueTrack.element.css({"width": percent + "%"}); this.blueTrack.element.css({
"width": percent + "%"
});
}, },
_setLabelPosition: function (percent) { _setLabelPosition: function (percent) {
this.label.element.css({"left": percent + "%"}); this.label.element.css({
"left": percent + "%"
});
}, },
_setSliderPosition: function (percent) { _setSliderPosition: function (percent) {
this.slider.element.css({"left": percent + "%"}); this.slider.element.css({
"left": percent + "%"
});
}, },
_setAllPosition: function (percent) { _setAllPosition: function (percent) {
@ -253,7 +265,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
setMinAndMax: function (v) { setMinAndMax: function (v) {
var minNumber = BI.parseFloat(v.min); var minNumber = BI.parseFloat(v.min);
var maxNumber = BI.parseFloat(v.max); var maxNumber = BI.parseFloat(v.max);
if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) { if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber)) {
this.min = minNumber; this.min = minNumber;
this.max = maxNumber; this.max = maxNumber;
} }

Write Preview
Loading…
Cancel
Save