forked from fanruan/fineui
guy
7 years ago
188 changed files with 1482 additions and 204 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,20 @@ |
|||||||
|
.bi-single-slider-button .slider-button { |
||||||
|
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); |
||||||
|
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); |
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); |
||||||
|
-webkit-border-radius: 7px; |
||||||
|
-moz-border-radius: 7px; |
||||||
|
border-radius: 7px; |
||||||
|
} |
||||||
|
.bi-slider-track .gray-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; |
||||||
|
} |
||||||
|
.bi-slider-track .blue-track { |
||||||
|
-webkit-border-radius: 3px; |
||||||
|
-moz-border-radius: 3px; |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
@ -0,0 +1,839 @@ |
|||||||
|
/** |
||||||
|
* Created by zcf on 2016/9/22. |
||||||
|
*/ |
||||||
|
BI.SliderIconButton = BI.inherit(BI.Widget, { |
||||||
|
_defaultConfig: function () { |
||||||
|
return BI.extend(BI.SliderIconButton.superclass._defaultConfig.apply(this, arguments), { |
||||||
|
baseCls: "bi-single-slider-button" |
||||||
|
}); |
||||||
|
}, |
||||||
|
_init: function () { |
||||||
|
BI.extend(BI.SliderIconButton.superclass._init.apply(this, arguments)); |
||||||
|
this.slider = BI.createWidget({ |
||||||
|
type: "bi.icon_button", |
||||||
|
cls: "cursor-drag 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.SliderIconButton);/** |
||||||
|
* 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", |
||||||
|
digit: "" |
||||||
|
}); |
||||||
|
}, |
||||||
|
_init: function () { |
||||||
|
BI.SingleSlider.superclass._init.apply(this, arguments); |
||||||
|
|
||||||
|
var self = this, o = this.options; |
||||||
|
var digitExist = (o.digit === "") ? false : true; |
||||||
|
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); |
||||||
|
v = digitExist ? v.toFixed(o.digit) : v; |
||||||
|
self.label.setValue(v); |
||||||
|
self.value = v; |
||||||
|
self.fireEvent(BI.SingleSlider.EVENT_CHANGE); |
||||||
|
}, |
||||||
|
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); |
||||||
|
v = digitExist ? v.toFixed(o.digit) : v; |
||||||
|
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 - 2, |
||||||
|
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()); |
||||||
|
var percent = self._getPercentByValue(v); |
||||||
|
var significantPercent = BI.parseFloat(percent.toFixed(1)); |
||||||
|
self._setAllPosition(significantPercent); |
||||||
|
v = digitExist ? v.toFixed(o.digit) : v; |
||||||
|
this.setValue(v); |
||||||
|
self.value = v; |
||||||
|
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 o = this.options; |
||||||
|
var digitExist = (o.digit === "") ? false : true; |
||||||
|
var value = BI.parseFloat(v); |
||||||
|
value = digitExist ? value.toFixed(o.digit) : value; |
||||||
|
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);/** |
||||||
|
* Created by Urthur on 2017/9/12. |
||||||
|
*/ |
||||||
|
BI.SingleSliderLabel = 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.SingleSliderLabel.superclass._defaultConfig.apply(this, arguments), { |
||||||
|
baseCls: "bi-single-slider bi-slider-track", |
||||||
|
digit: "", |
||||||
|
unit: "" |
||||||
|
}); |
||||||
|
}, |
||||||
|
_init: function () { |
||||||
|
BI.SingleSliderLabel.superclass._init.apply(this, arguments); |
||||||
|
|
||||||
|
var self = this, o = this.options; |
||||||
|
var digitExist = (o.digit === "") ? false : true; |
||||||
|
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); |
||||||
|
v = digitExist ? v.toFixed(o.digit) : v; |
||||||
|
self.label.setText(v + o.unit); |
||||||
|
self.value = v; |
||||||
|
self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE); |
||||||
|
}, |
||||||
|
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.SingleSliderLabel.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); |
||||||
|
v = digitExist ? v.toFixed(o.digit) : v; |
||||||
|
self.label.setText(v + o.unit); |
||||||
|
self.value = v; |
||||||
|
self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE); |
||||||
|
} |
||||||
|
}); |
||||||
|
this.label = BI.createWidget({ |
||||||
|
type: "bi.label", |
||||||
|
height: c.HEIGHT, |
||||||
|
width: c.EDITOR_WIDTH - 2 |
||||||
|
}); |
||||||
|
|
||||||
|
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: 10, |
||||||
|
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 o = this.options; |
||||||
|
var digitExist = (o.digit === "") ? false : true; |
||||||
|
var value = BI.parseFloat(v); |
||||||
|
value = digitExist ? value.toFixed(o.digit) : value; |
||||||
|
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 () { |
||||||
|
var o = this.options; |
||||||
|
if (!isNaN(this.min) && !isNaN(this.max)) { |
||||||
|
this._setVisible(true); |
||||||
|
this.enable = true; |
||||||
|
if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) { |
||||||
|
this.label.setValue(this.value + o.unit); |
||||||
|
this._setAllPosition(this._getPercentByValue(this.value)); |
||||||
|
} else { |
||||||
|
this.label.setValue(this.max + o.unit); |
||||||
|
this._setAllPosition(100); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.SingleSliderLabel.EVENT_CHANGE = "EVENT_CHANGE"; |
||||||
|
BI.shortcut("bi.single_slider_label", BI.SingleSliderLabel);/** |
||||||
|
* 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); |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue