forked from fanruan/fineui
刘荣歆
8 years ago
26 changed files with 3441 additions and 34 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,24 @@
|
||||
/** |
||||
* Created by Dailer on 2017/7/14. |
||||
*/ |
||||
Demo.SignEditor = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.horizontal_adapt", |
||||
items: [{ |
||||
type: "bi.sign_editor", |
||||
// cls:"layout-bg5",
|
||||
value: "123", |
||||
text: "456", |
||||
width: 300 |
||||
}], |
||||
vgap: 20 |
||||
|
||||
} |
||||
} |
||||
}) |
||||
|
||||
BI.shortcut("demo.sign_editor", Demo.SignEditor); |
||||
@ -0,0 +1,51 @@
|
||||
/** |
||||
* Created by Dailer on 2017/7/14. |
||||
*/ |
||||
Demo.IntervalSlider = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "" |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
|
||||
return { |
||||
type: "bi.horizontal_auto", |
||||
items: [{ |
||||
type: "bi.interval_slider", |
||||
ref: function (_ref) { |
||||
self.slider = _ref; |
||||
}, |
||||
width: 300, |
||||
height: 90 |
||||
}, { |
||||
type: "bi.button", |
||||
text: "populate", |
||||
handler: function () { |
||||
self.slider.setMinAndMax({ |
||||
min: 1, |
||||
max: 100 |
||||
}); |
||||
self.slider.populate(); |
||||
}, |
||||
width: 300 |
||||
}, { |
||||
type: "bi.button", |
||||
text: "setValue", |
||||
handler: function () { |
||||
|
||||
//既然 setVlaue后要重新 populate 才能生效,为何不直接在 setValue方法的结尾调用 populate 方法呢?
|
||||
self.slider.setValue({ |
||||
min: 20, |
||||
max: 80 |
||||
}); |
||||
self.slider.populate(); |
||||
}, |
||||
width: 300 |
||||
}], |
||||
vgap: 20 |
||||
} |
||||
} |
||||
}) |
||||
|
||||
BI.shortcut("demo.interval_slider", Demo.IntervalSlider); |
||||
@ -0,0 +1,48 @@
|
||||
/** |
||||
* Created by Dailer on 2017/7/14. |
||||
*/ |
||||
Demo.SingleSlider = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "" |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
|
||||
return { |
||||
type: "bi.horizontal_auto", |
||||
items: [{ |
||||
type: "bi.single_slider", |
||||
ref: function (_ref) { |
||||
self.slider = _ref; |
||||
}, |
||||
width: 300, |
||||
height: 50 |
||||
}, { |
||||
type: "bi.button", |
||||
text: "populate", |
||||
handler: function () { |
||||
self.slider.setMinAndMax({ |
||||
min: 1, |
||||
max: 100 |
||||
}); |
||||
self.slider.populate(); |
||||
}, |
||||
width: 300 |
||||
}, { |
||||
type: "bi.button", |
||||
text: "setValue", |
||||
handler: function () { |
||||
|
||||
//既然 setVlaue后要重新 populate 才能生效,为何不直接在 setValue方法的结尾调用 populate 方法呢?
|
||||
self.slider.setValue(50); |
||||
self.slider.populate(); |
||||
}, |
||||
width: 300 |
||||
}], |
||||
vgap: 20 |
||||
} |
||||
} |
||||
}) |
||||
|
||||
BI.shortcut("demo.single_slider", Demo.SingleSlider); |
||||
|
After Width: | Height: | Size: 385 B |
|
After Width: | Height: | Size: 2.7 KiB |
@ -1,33 +1,31 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title></title> |
||||
|
||||
<link rel="stylesheet" type="text/css" |
||||
href="core.css"/> |
||||
<link rel="stylesheet" type="text/css" |
||||
href="base.css"/> |
||||
<link rel="stylesheet" type="text/css" |
||||
href="widget.css"/> |
||||
<link rel="stylesheet" type="text/css" |
||||
href="resource.css"/> |
||||
<link rel="stylesheet" type="text/css" |
||||
href="demo.css"/> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title></title> |
||||
<link rel="stylesheet" type="text/css" href="core.css" /> |
||||
<link rel="stylesheet" type="text/css" href="base.css" /> |
||||
<link rel="stylesheet" type="text/css" href="widget.css" /> |
||||
<link rel="stylesheet" type="text/css" href="resource.css" /> |
||||
<link rel="stylesheet" type="text/css" href="demo.css" /> |
||||
|
||||
<script src="polyfill.js"></script> |
||||
<script src="core.js"></script> |
||||
<script src="base.js"></script> |
||||
<script src="case.js"></script> |
||||
<script src="widget.js"></script> |
||||
<!--图表--> |
||||
<script src="vancharts-all.js"></script> |
||||
<script src="biconst.js"></script><!--图表用到的常量(直接拿的bi的常量)--> |
||||
<script src="chart.js"></script> |
||||
<script src="polyfill.js"></script> |
||||
<script src="core.js"></script> |
||||
<script src="base.js"></script> |
||||
<script src="case.js"></script> |
||||
<script src="widget.js"></script> |
||||
<!--图表--> |
||||
<script src="vancharts-all.js"></script> |
||||
<script src="biconst.js"></script> |
||||
<!--图表用到的常量(直接拿的bi的常量)--> |
||||
<script src="chart.js"></script> |
||||
|
||||
<script src="demo.js"></script> |
||||
<script src="demo.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<div id="wrapper"></div> |
||||
<div id="wrapper"></div> |
||||
</body> |
||||
|
||||
</html> |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,6 @@
|
||||
@import "../../bibase"; |
||||
|
||||
.bi-single-slider { |
||||
& .slider-editor-button { |
||||
} |
||||
} |
||||
@ -0,0 +1,4 @@
|
||||
@import "../../../bibase"; |
||||
.bi-single-slider-slider{ |
||||
cursor: url('@{leftRightCursor}'), auto; |
||||
} |
||||
@ -0,0 +1,15 @@
|
||||
@import "../../../bibase"; |
||||
|
||||
.bi-slider-track { |
||||
.background-track { |
||||
.background-color(@color-bi-background-gray, 0); |
||||
.border-radius(12px); |
||||
} |
||||
.gray-track { |
||||
background: @color-bi-background-disabled; |
||||
.border-radius(4px); |
||||
} |
||||
.blue-track { |
||||
.border-radius(4px); |
||||
} |
||||
} |
||||
@ -0,0 +1,444 @@
|
||||
/** |
||||
* Created by zcf on 2016/9/26. |
||||
*/ |
||||
BI.IntervalSlider = BI.inherit(BI.Widget, { |
||||
_constant: { |
||||
EDITOR_WIDTH: 58, |
||||
EDITOR_R_GAP: 60, |
||||
EDITOR_HEIGHT: 30, |
||||
HEIGHT: 28, |
||||
SLIDER_WIDTH_HALF: 15, |
||||
SLIDER_WIDTH: 30, |
||||
SLIDER_HEIGHT: 30, |
||||
TRACK_HEIGHT: 24 |
||||
}, |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.IntervalSlider.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-single-slider bi-slider-track" |
||||
}) |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.IntervalSlider.superclass._init.apply(this, arguments); |
||||
|
||||
var self = this; |
||||
var c = this._constant; |
||||
this.enable = false; |
||||
this.valueOne = ""; |
||||
this.valueTwo = ""; |
||||
this.calculation = new BI.AccurateCalculationModel(); |
||||
|
||||
this.backgroundTrack = BI.createWidget({ |
||||
type: "bi.layout", |
||||
cls: "background-track", |
||||
height: c.TRACK_HEIGHT |
||||
}); |
||||
this.grayTrack = BI.createWidget({ |
||||
type: "bi.layout", |
||||
cls: "gray-track", |
||||
height: 8 |
||||
}); |
||||
this.blueTrack = BI.createWidget({ |
||||
type: "bi.layout", |
||||
cls: "blue-track bi-high-light-background", |
||||
height: 8 |
||||
}); |
||||
this.track = this._createTrackWrapper(); |
||||
|
||||
this.labelOne = BI.createWidget({ |
||||
type: "bi.sign_editor", |
||||
cls: "slider-editor-button bi-border", |
||||
errorText: "", |
||||
allowBlank: false, |
||||
height: c.HEIGHT, |
||||
width: c.EDITOR_WIDTH, |
||||
validationChecker: function (v) { |
||||
return self._checkValidation(v); |
||||
} |
||||
}); |
||||
this.labelOne.on(BI.Editor.EVENT_CONFIRM, function () { |
||||
var v = BI.parseFloat(this.getValue()); |
||||
self.valueOne = v; |
||||
var percent = self._getPercentByValue(v); |
||||
var significantPercent = BI.parseFloat(percent.toFixed(1));//分成1000份
|
||||
self._setLabelOnePosition(significantPercent); |
||||
self._setSliderOnePosition(significantPercent); |
||||
self._setBlueTrack(); |
||||
self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); |
||||
}); |
||||
|
||||
this.labelTwo = BI.createWidget({ |
||||
type: "bi.sign_editor", |
||||
cls: "slider-editor-button bi-border", |
||||
errorText: "", |
||||
allowBlank: false, |
||||
height: c.HEIGHT, |
||||
width: c.EDITOR_WIDTH, |
||||
validationChecker: function (v) { |
||||
return self._checkValidation(v); |
||||
} |
||||
}); |
||||
this.labelTwo.on(BI.Editor.EVENT_CONFIRM, function () { |
||||
var v = BI.parseFloat(this.getValue()); |
||||
self.valueTwo = v; |
||||
var percent = self._getPercentByValue(v); |
||||
var significantPercent = BI.parseFloat(percent.toFixed(1)); |
||||
self._setLabelTwoPosition(significantPercent); |
||||
self._setSliderTwoPosition(significantPercent); |
||||
self._setBlueTrack(); |
||||
self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); |
||||
}); |
||||
|
||||
this.sliderOne = BI.createWidget({ |
||||
type: "bi.single_slider_slider" |
||||
}); |
||||
this.sliderOne.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)); |
||||
self._setLabelOnePosition(significantPercent); |
||||
var v = self._getValueByPercent(significantPercent); |
||||
self.labelOne.setValue(v); |
||||
self.valueOne = v; |
||||
self._setBlueTrack(); |
||||
}, |
||||
stop: function (e, ui) { |
||||
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); |
||||
var significantPercent = BI.parseFloat(percent.toFixed(1)); |
||||
self._setSliderOnePosition(significantPercent); |
||||
self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); |
||||
} |
||||
}); |
||||
|
||||
this.sliderTwo = BI.createWidget({ |
||||
type: "bi.single_slider_slider" |
||||
}); |
||||
this.sliderTwo.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)); |
||||
self._setLabelTwoPosition(significantPercent); |
||||
var v = self._getValueByPercent(significantPercent); |
||||
self.labelTwo.setValue(v); |
||||
self.valueTwo = v; |
||||
self._setBlueTrack(); |
||||
}, |
||||
stop: function (e, ui) { |
||||
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); |
||||
var significantPercent = BI.parseFloat(percent.toFixed(1)); |
||||
self._setSliderTwoPosition(significantPercent); |
||||
self.fireEvent(BI.IntervalSlider.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%" |
||||
}, |
||||
this._createLabelWrapper(), |
||||
this._createSliderWrapper() |
||||
] |
||||
}) |
||||
}, |
||||
|
||||
_createLabelWrapper: function () { |
||||
var c = this._constant; |
||||
return { |
||||
el: { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: this.labelOne, |
||||
top: 0, |
||||
left: "0%" |
||||
}] |
||||
}, { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: this.labelTwo, |
||||
top: 0, |
||||
left: "100%" |
||||
}] |
||||
}], |
||||
rgap: c.EDITOR_R_GAP, |
||||
height: 90 |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
width: "100%" |
||||
} |
||||
}, |
||||
|
||||
_createSliderWrapper: function () { |
||||
var c = this._constant; |
||||
return { |
||||
el: { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: this.sliderOne, |
||||
top: 0, |
||||
left: "0%" |
||||
}] |
||||
}, { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: this.sliderTwo, |
||||
top: 0, |
||||
left: "100%" |
||||
}] |
||||
}], |
||||
hgap: c.SLIDER_WIDTH_HALF, |
||||
height: c.SLIDER_HEIGHT |
||||
}, |
||||
top: 30, |
||||
left: 0, |
||||
width: "100%" |
||||
} |
||||
}, |
||||
|
||||
_createTrackWrapper: function () { |
||||
return BI.createWidget({ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: this.backgroundTrack, |
||||
width: "100%" |
||||
}, { |
||||
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) |
||||
}, |
||||
|
||||
_checkOverlap: function () { |
||||
var labelOneLeft = this.labelOne.element[0].offsetLeft; |
||||
var labelTwoLeft = this.labelTwo.element[0].offsetLeft; |
||||
if (labelOneLeft <= labelTwoLeft) { |
||||
if ((labelTwoLeft - labelOneLeft) < 90) { |
||||
this.labelTwo.element.css({"top": 60}); |
||||
} else { |
||||
this.labelTwo.element.css({"top": 0}); |
||||
} |
||||
} else { |
||||
if ((labelOneLeft - labelTwoLeft) < 90) { |
||||
this.labelTwo.element.css({"top": 60}); |
||||
} else { |
||||
this.labelTwo.element.css({"top": 0}); |
||||
} |
||||
} |
||||
}, |
||||
|
||||
_setLabelOnePosition: function (percent) { |
||||
this.labelOne.element.css({"left": percent + "%"}); |
||||
this._checkOverlap(); |
||||
}, |
||||
|
||||
_setLabelTwoPosition: function (percent) { |
||||
this.labelTwo.element.css({"left": percent + "%"}); |
||||
this._checkOverlap(); |
||||
}, |
||||
|
||||
_setSliderOnePosition: function (percent) { |
||||
this.sliderOne.element.css({"left": percent + "%"}); |
||||
}, |
||||
|
||||
_setSliderTwoPosition: function (percent) { |
||||
this.sliderTwo.element.css({"left": percent + "%"}); |
||||
}, |
||||
|
||||
_setBlueTrackLeft: function (percent) { |
||||
this.blueTrack.element.css({"left": percent + "%"}); |
||||
}, |
||||
|
||||
_setBlueTrackWidth: function (percent) { |
||||
this.blueTrack.element.css({"width": percent + "%"}); |
||||
}, |
||||
|
||||
_setBlueTrack: function () { |
||||
var percentOne = this._getPercentByValue(this.labelOne.getValue()); |
||||
var percentTwo = this._getPercentByValue(this.labelTwo.getValue()); |
||||
if (percentOne <= percentTwo) { |
||||
this._setBlueTrackLeft(percentOne); |
||||
this._setBlueTrackWidth(percentTwo - percentOne); |
||||
} else { |
||||
this._setBlueTrackLeft(percentTwo); |
||||
this._setBlueTrackWidth(percentOne - percentTwo); |
||||
} |
||||
}, |
||||
|
||||
_setAllPosition: function (one, two) { |
||||
this._setSliderOnePosition(one); |
||||
this._setLabelOnePosition(one); |
||||
this._setSliderTwoPosition(two); |
||||
this._setLabelTwoPosition(two); |
||||
this._setBlueTrack(); |
||||
}, |
||||
|
||||
_setVisible: function (visible) { |
||||
this.sliderOne.setVisible(visible); |
||||
this.sliderTwo.setVisible(visible); |
||||
this.labelOne.setVisible(visible); |
||||
this.labelTwo.setVisible(visible); |
||||
}, |
||||
|
||||
_setErrorText: function () { |
||||
var errorText = BI.i18nText("BI-Please_Enter") + this.min + "-" + this.max + BI.i18nText("BI-Basic_De") + BI.i18nText("BI-Basic_Number"); |
||||
this.labelOne.setErrorText(errorText); |
||||
this.labelTwo.setErrorText(errorText); |
||||
}, |
||||
|
||||
_getGrayTrackLength: function () { |
||||
return this.grayTrack.element[0].scrollWidth |
||||
}, |
||||
|
||||
//其中取max-min后保留4为有效数字后的值的小数位数为最终value的精度
|
||||
_getValueByPercent: function (percent) {//return (((max-min)*percent)/100+min)
|
||||
var sub = this.calculation.accurateSubtraction(this.max, this.min); |
||||
var mul = this.calculation.accurateMultiplication(sub, percent); |
||||
var div = this.calculation.accurateDivisionTenExponent(mul, 2); |
||||
return BI.parseFloat(this.calculation.accurateAddition(div, this.min).toFixed(this.precision)); |
||||
}, |
||||
|
||||
_getPercentByValue: function (v) { |
||||
return (v - this.min) * 100 / (this.max - this.min); |
||||
}, |
||||
|
||||
_setDraggableEnable: function (enable) { |
||||
if (enable) { |
||||
this.sliderOne.element.draggable("enable"); |
||||
this.sliderTwo.element.draggable("enable") |
||||
} else { |
||||
this.sliderOne.element.draggable("disable"); |
||||
this.sliderTwo.element.draggable("disable") |
||||
} |
||||
}, |
||||
|
||||
getValue: function () { |
||||
if (this.valueOne <= this.valueTwo) { |
||||
return {min: this.valueOne, max: this.valueTwo} |
||||
} else { |
||||
return {min: this.valueTwo, max: this.valueOne} |
||||
} |
||||
}, |
||||
|
||||
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; |
||||
this.valueOne = minNumber; |
||||
this.valueTwo = maxNumber; |
||||
//计算每一份值的精度(最大值和最小值的差值保留4为有效数字后的精度)
|
||||
//如果差值的整数位数大于4,toPrecision得到的是科学计数法1234 => 1.2e+3
|
||||
var sub = this.calculation.accurateSubtraction(this.max, this.min); |
||||
var pre = sub.toPrecision(4); |
||||
var precisionString = pre.indexOf("e") > -1 ? (BI.parseFloat(sub.toPrecision(4)) + "") : pre; |
||||
var arr = precisionString.split("."); |
||||
this.precision = arr.length > 1 ? arr[1] : 0; |
||||
this._setDraggableEnable(true); |
||||
} |
||||
if (maxNumber === minNumber) { |
||||
this._setDraggableEnable(false); |
||||
} |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
var valueOne = BI.parseFloat(v.min); |
||||
var valueTwo = BI.parseFloat(v.max); |
||||
if (!isNaN(valueOne) && !isNaN(valueTwo)) { |
||||
if (this._checkValidation(valueOne)) { |
||||
this.valueOne = valueOne; |
||||
} |
||||
if (this._checkValidation(valueTwo)) { |
||||
this.valueTwo = valueTwo; |
||||
} |
||||
if (valueOne < this.min) { |
||||
this.valueOne = this.min; |
||||
} |
||||
if (valueTwo > this.max) { |
||||
this.valueTwo = this.max; |
||||
} |
||||
} |
||||
}, |
||||
|
||||
reset: function () { |
||||
this._setVisible(false); |
||||
this.enable = false; |
||||
this.valueOne = ""; |
||||
this.valueTwo = ""; |
||||
this.min = NaN; |
||||
this.max = NaN; |
||||
this._setBlueTrackWidth(0); |
||||
}, |
||||
|
||||
populate: function () { |
||||
if (!isNaN(this.min) && !isNaN(this.max)) { |
||||
this.enable = true; |
||||
this._setVisible(true); |
||||
this._setErrorText(); |
||||
if ((BI.isNumeric(this.valueOne) || BI.isNotEmptyString(this.valueOne)) && (BI.isNumeric(this.valueTwo) || BI.isNotEmptyString(this.valueTwo))) { |
||||
this.labelOne.setValue(this.valueOne); |
||||
this.labelTwo.setValue(this.valueTwo); |
||||
this._setAllPosition(this._getPercentByValue(this.valueOne), this._getPercentByValue(this.valueTwo)); |
||||
} else { |
||||
this.labelOne.setValue(this.min); |
||||
this.labelTwo.setValue(this.max); |
||||
this._setAllPosition(0, 100) |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
BI.IntervalSlider.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.shortcut("bi.interval_slider", BI.IntervalSlider); |
||||
@ -0,0 +1,222 @@
|
||||
/** |
||||
* Created by zcf on 2017/3/1. |
||||
* 万恶的IEEE-754 |
||||
* 使用字符串精确计算含小数加法、减法、乘法和10的指数倍除法，支持负数 |
||||
*/ |
||||
BI.AccurateCalculationModel = BI.inherit(BI.Widget, { |
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.AccurateCalculationModel.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "" |
||||
}) |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.AccurateCalculationModel.superclass._init.apply(this, arguments); |
||||
}, |
||||
|
||||
_getMagnitude: function (n) { |
||||
var magnitude = "1"; |
||||
for (var i = 0; i < n; i++) { |
||||
magnitude += "0"; |
||||
} |
||||
return BI.parseInt(magnitude); |
||||
}, |
||||
|
||||
_formatDecimal: function (stringNumber1, stringNumber2) { |
||||
if (stringNumber1.numDecimalLength === stringNumber2.numDecimalLength) { |
||||
return; |
||||
} |
||||
var magnitudeDiff = stringNumber1.numDecimalLength - stringNumber2.numDecimalLength; |
||||
if (magnitudeDiff > 0) { |
||||
var needAddZero = stringNumber2 |
||||
} else { |
||||
var needAddZero = stringNumber1; |
||||
magnitudeDiff = (0 - magnitudeDiff); |
||||
} |
||||
for (var i = 0; i < magnitudeDiff; i++) { |
||||
if (needAddZero.numDecimal === "0" && i === 0) { |
||||
continue |
||||
} |
||||
needAddZero.numDecimal += "0" |
||||
} |
||||
}, |
||||
|
||||
_stringNumberFactory: function (num) { |
||||
var strNum = num.toString(); |
||||
var numStrArray = strNum.split("."); |
||||
var numInteger = numStrArray[0]; |
||||
if (numStrArray.length === 1) { |
||||
var numDecimal = "0"; |
||||
var numDecimalLength = 0; |
||||
} else { |
||||
var numDecimal = numStrArray[1]; |
||||
var numDecimalLength = numStrArray[1].length; |
||||
} |
||||
return { |
||||
"numInteger": numInteger, |
||||
"numDecimal": numDecimal, |
||||
"numDecimalLength": numDecimalLength |
||||
} |
||||
}, |
||||
|
||||
_accurateSubtraction: function (num1, num2) {//num1-num2 && num1>num2
|
||||
var stringNumber1 = this._stringNumberFactory(num1); |
||||
var stringNumber2 = this._stringNumberFactory(num2); |
||||
//整数部分计算
|
||||
var integerResult = BI.parseInt(stringNumber1.numInteger) - BI.parseInt(stringNumber2.numInteger); |
||||
//小数部分
|
||||
this._formatDecimal(stringNumber1, stringNumber2); |
||||
var decimalMaxLength = getDecimalMaxLength(stringNumber1, stringNumber2); |
||||
|
||||
if (BI.parseInt(stringNumber1.numDecimal) >= BI.parseInt(stringNumber2.numDecimal)) { |
||||
var decimalResultTemp = (BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString(); |
||||
var decimalResult = addZero(decimalResultTemp, decimalMaxLength); |
||||
} else {//否则借位
|
||||
integerResult--; |
||||
var borrow = this._getMagnitude(decimalMaxLength); |
||||
var decimalResultTemp = (borrow + BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString(); |
||||
var decimalResult = addZero(decimalResultTemp, decimalMaxLength); |
||||
} |
||||
var result = integerResult + "." + decimalResult; |
||||
return BI.parseFloat(result); |
||||
|
||||
function getDecimalMaxLength(num1, num2) { |
||||
if (num1.numDecimal.length >= num2.numDecimal.length) { |
||||
return num1.numDecimal.length |
||||
} |
||||
return num2.numDecimal.length |
||||
} |
||||
|
||||
function addZero(resultTemp, length) { |
||||
var diff = length - resultTemp.length; |
||||
for (var i = 0; i < diff; i++) { |
||||
resultTemp = "0" + resultTemp; |
||||
} |
||||
return resultTemp |
||||
} |
||||
}, |
||||
|
||||
_accurateAddition: function (num1, num2) {//加法结合律
|
||||
var stringNumber1 = this._stringNumberFactory(num1); |
||||
var stringNumber2 = this._stringNumberFactory(num2); |
||||
//整数部分计算
|
||||
var integerResult = BI.parseInt(stringNumber1.numInteger) + BI.parseInt(stringNumber2.numInteger); |
||||
//小数部分
|
||||
this._formatDecimal(stringNumber1, stringNumber2); |
||||
|
||||
var decimalResult = (BI.parseInt(stringNumber1.numDecimal) + BI.parseInt(stringNumber2.numDecimal)).toString(); |
||||
|
||||
if (decimalResult !== "0") { |
||||
if (decimalResult.length <= stringNumber1.numDecimal.length) { |
||||
decimalResult = addZero(decimalResult, stringNumber1.numDecimal.length) |
||||
} else { |
||||
integerResult++;//进一
|
||||
decimalResult = decimalResult.slice(1); |
||||
} |
||||
} |
||||
var result = integerResult + "." + decimalResult; |
||||
return BI.parseFloat(result); |
||||
|
||||
function addZero(resultTemp, length) { |
||||
var diff = length - resultTemp.length; |
||||
for (var i = 0; i < diff; i++) { |
||||
resultTemp = "0" + resultTemp; |
||||
} |
||||
return resultTemp |
||||
} |
||||
}, |
||||
|
||||
_accurateMultiplication: function (num1, num2) {//乘法分配律
|
||||
var stringNumber1 = this._stringNumberFactory(num1); |
||||
var stringNumber2 = this._stringNumberFactory(num2); |
||||
//整数部分计算
|
||||
var integerResult = BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numInteger); |
||||
//num1的小数和num2的整数
|
||||
var dec1Int2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numInteger), stringNumber1.numDecimalLength); |
||||
//num1的整数和num2的小数
|
||||
var int1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numDecimal), stringNumber2.numDecimalLength); |
||||
//小数*小数
|
||||
var dec1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numDecimal), (stringNumber1.numDecimalLength + stringNumber2.numDecimalLength)); |
||||
|
||||
return this._accurateAddition(this._accurateAddition(this._accurateAddition(integerResult, dec1Int2), int1dec2), dec1dec2); |
||||
}, |
||||
|
||||
_accurateDivisionTenExponent: function (num, n) {// num/10^n && n>0
|
||||
var stringNumber = this._stringNumberFactory(num); |
||||
if (stringNumber.numInteger.length > n) { |
||||
var integerResult = stringNumber.numInteger.slice(0, (stringNumber.numInteger.length - n)); |
||||
var partDecimalResult = stringNumber.numInteger.slice(-n); |
||||
} else { |
||||
var integerResult = "0"; |
||||
var partDecimalResult = addZero(stringNumber.numInteger, n); |
||||
} |
||||
var result = integerResult + "." + partDecimalResult + stringNumber.numDecimal; |
||||
return BI.parseFloat(result); |
||||
|
||||
function addZero(resultTemp, length) { |
||||
var diff = length - resultTemp.length; |
||||
for (var i = 0; i < diff; i++) { |
||||
resultTemp = "0" + resultTemp; |
||||
} |
||||
return resultTemp |
||||
} |
||||
}, |
||||
|
||||
accurateSubtraction: function (num1, num2) { |
||||
if (num1 >= 0 && num2 >= 0) { |
||||
if (num1 >= num2) { |
||||
return this._accurateSubtraction(num1, num2) |
||||
} |
||||
return -this._accurateSubtraction(num2, num1) |
||||
} |
||||
if (num1 >= 0 && num2 < 0) { |
||||
return this._accurateAddition(num1, -num2) |
||||
} |
||||
if (num1 < 0 && num2 >= 0) { |
||||
return -this._accurateAddition(-num1, num2) |
||||
} |
||||
if (num1 < 0 && num2 < 0) { |
||||
if (num1 >= num2) { |
||||
return this._accurateSubtraction(-num2, -num1) |
||||
} |
||||
return this._accurateSubtraction(-num1, -num2) |
||||
} |
||||
}, |
||||
|
||||
accurateAddition: function (num1, num2) { |
||||
if (num1 >= 0 && num2 >= 0) { |
||||
return this._accurateAddition(num1, num2) |
||||
} |
||||
if (num1 >= 0 && num2 < 0) { |
||||
return this.accurateSubtraction(num1, -num2) |
||||
} |
||||
if (num1 < 0 && num2 >= 0) { |
||||
return this.accurateSubtraction(num2, -num1) |
||||
} |
||||
if (num1 < 0 && num2 < 0) { |
||||
return -this._accurateAddition(-num1, -num2) |
||||
} |
||||
}, |
||||
|
||||
accurateMultiplication: function (num1, num2) { |
||||
if (num1 >= 0 && num2 >= 0) { |
||||
return this._accurateMultiplication(num1, num2) |
||||
} |
||||
if (num1 >= 0 && num2 < 0) { |
||||
return -this._accurateMultiplication(num1, -num2) |
||||
} |
||||
if (num1 < 0 && num2 >= 0) { |
||||
return -this._accurateMultiplication(-num1, num2) |
||||
} |
||||
if (num1 < 0 && num2 < 0) { |
||||
return this._accurateMultiplication(-num1, -num2) |
||||
} |
||||
}, |
||||
|
||||
accurateDivisionTenExponent: function (num1, n) { |
||||
if (num1 >= 0) { |
||||
return this._accurateDivisionTenExponent(num1, n); |
||||
} |
||||
return -this._accurateDivisionTenExponent(-num1, n); |
||||
} |
||||
}); |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,287 @@
|
||||
/** |
||||
* Created by zcf on 2016/9/22. |
||||
*/ |
||||
BI.SingleSlider = BI.inherit(BI.Widget, { |
||||
_constant: { |
||||
EDITOR_WIDTH: 60, |
||||
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.backgroundTrack = BI.createWidget({ |
||||
type: "bi.layout", |
||||
cls: "background-track bi-background", |
||||
height: c.TRACK_HEIGHT |
||||
}); |
||||
this.grayTrack = BI.createWidget({ |
||||
type: "bi.layout", |
||||
cls: "gray-track", |
||||
height: 8 |
||||
}); |
||||
this.blueTrack = BI.createWidget({ |
||||
type: "bi.layout", |
||||
cls: "blue-track bi-high-light-background", |
||||
height: 8 |
||||
}); |
||||
this.track = this._createTrackWrapper(); |
||||
|
||||
this.slider = BI.createWidget({ |
||||
type: "bi.single_slider_slider" |
||||
}); |
||||
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 percent = self._getPercentByValue(this.getValue()); |
||||
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/2, |
||||
height: c.EDITOR_HEIGHT |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
width: "100%" |
||||
}] |
||||
}) |
||||
}, |
||||
|
||||
_createTrackWrapper: function () { |
||||
return BI.createWidget({ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: this.backgroundTrack, |
||||
width: "100%" |
||||
}, { |
||||
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.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); |
||||
@ -0,0 +1,33 @@
|
||||
/** |
||||
* Created by zcf on 2016/9/22. |
||||
*/ |
||||
BI.Slider = BI.inherit(BI.Widget, { |
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.Slider.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-single-slider-slider" |
||||
}); |
||||
}, |
||||
_init: function () { |
||||
BI.extend(BI.Slider.superclass._init.apply(this, arguments)); |
||||
this.slider = BI.createWidget({ |
||||
type: "bi.icon_button", |
||||
cls: "widget-slider-icon", |
||||
iconWidth: 30, |
||||
iconHeight: 30, |
||||
height: 30, |
||||
width: 30 |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: this.slider, |
||||
top: 0, |
||||
left: -15 |
||||
}], |
||||
width: 0, |
||||
height: 30 |
||||
}); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.single_slider_slider", BI.Slider); |
||||
Loading…
Reference in new issue