Browse Source

slider 没有输入框

es6
Urthur 7 years ago
parent
commit
e737b8a876
  1. 273
      bi/slider.js
  2. 25
      demo/js/widget/slider/demo.slider.js
  3. 273
      dist/slider.js
  4. 274
      src/addons/slider/singleslider/singleslider.label.js

273
bi/slider.js

@ -321,6 +321,279 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
}); });
BI.SingleSlider.EVENT_CHANGE = "EVENT_CHANGE"; BI.SingleSlider.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.single_slider", BI.SingleSlider);/** 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 * normal single slider
* Created by Young on 2017/6/21. * Created by Young on 2017/6/21.
*/ */

25
demo/js/widget/slider/demo.slider.js

@ -30,19 +30,30 @@ Demo.Slider = BI.inherit(BI.Widget, {
console.log(this.getValue()); console.log(this.getValue());
}); });
var singleSliderLabel = BI.createWidget({
type: "bi.single_slider_label",
height: 30,
width: 300,
digit: 0,
unit: "个"
});
singleSliderLabel.setMinAndMax({
min: 0,
max: 100
});
singleSliderLabel.setValue(10);
singleSliderLabel.populate();
var normalSingleSlider = BI.createWidget({ var normalSingleSlider = BI.createWidget({
type: "bi.single_slider_normal", type: "bi.single_slider_normal",
height: 30, height: 30,
width: 300 width: 300
}); });
normalSingleSlider.setMinAndMax({ normalSingleSlider.setMinAndMax({
min: 0, min: 0,
max: 100 max: 100
}); });
normalSingleSlider.setValue(10); normalSingleSlider.setValue(10);
normalSingleSlider.populate(); normalSingleSlider.populate();
BI.createWidget({ BI.createWidget({
@ -64,6 +75,14 @@ Demo.Slider = BI.inherit(BI.Widget, {
}] }]
}, },
height: 200 height: 200
}, {
el: {
type: "bi.center_adapt",
items: [{
el: singleSliderLabel
}]
},
height: 200
}], }],
hgap: 20 hgap: 20
}); });

273
dist/slider.js vendored

@ -321,6 +321,279 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
}); });
BI.SingleSlider.EVENT_CHANGE = "EVENT_CHANGE"; BI.SingleSlider.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.single_slider", BI.SingleSlider);/** 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 * normal single slider
* Created by Young on 2017/6/21. * Created by Young on 2017/6/21.
*/ */

274
src/addons/slider/singleslider/singleslider.label.js

@ -0,0 +1,274 @@
/**
* 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);
Loading…
Cancel
Save