forked from fanruan/fineui
Browse Source
* commit '9011f41d79ad21f8733033659d34fe6b691b085c': BI.Slider已被注册 BI-8895 slider控件es6
guy
7 years ago
13 changed files with 1109 additions and 0 deletions
@ -0,0 +1,42 @@
|
||||
/** |
||||
* Created by Urthur on 2017/9/4. |
||||
*/ |
||||
Demo.Slider = BI.inherit(BI.Widget, { |
||||
_defaultConfig: function () { |
||||
return BI.extend(Demo.Slider.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "demo-slider", |
||||
min: 10, |
||||
max: 50 |
||||
}) |
||||
}, |
||||
_init: function () { |
||||
Demo.Slider.superclass._init.apply(this, arguments); |
||||
var self = this; |
||||
BI.createWidget({ |
||||
type: "bi.vertical_adapt", |
||||
element: this, |
||||
width: 100, |
||||
items: [{ |
||||
type: "bi.htape", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.slider", |
||||
min: 16, |
||||
max: 50, |
||||
ref: function (_ref) { |
||||
self.slider = _ref; |
||||
} |
||||
} |
||||
}], |
||||
height: 30, |
||||
width: 100 |
||||
}] |
||||
}); |
||||
this.slider.setValue("30"); |
||||
|
||||
this.slider.on(BI.SliderNormal.EVENT_CHANGE, function () { |
||||
console.log(this.getValue()); |
||||
}) |
||||
} |
||||
}); |
||||
BI.shortcut("demo.slider", Demo.Slider); |
||||
@ -0,0 +1,7 @@
|
||||
.bi-slider .bi-slider-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; |
||||
} |
||||
@ -0,0 +1,8 @@
|
||||
@import "../../bibase"; |
||||
|
||||
.bi-slider { |
||||
.bi-slider-track { |
||||
.background-color(@color-bi-background-gray, 30%); |
||||
.border-radius(3px); |
||||
} |
||||
} |
||||
@ -0,0 +1,44 @@
|
||||
/** |
||||
* Created by Urthur on 2017/9/4. |
||||
*/ |
||||
BI.SliderButton = BI.inherit(BI.Widget, { |
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.SliderButton.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-slider-button" |
||||
}); |
||||
}, |
||||
_init: function () { |
||||
BI.extend(BI.SliderButton.superclass._init.apply(this, arguments)); |
||||
var self = this; |
||||
var sliderButton = BI.createWidget({ |
||||
type: "bi.icon_button", |
||||
cls: "column-next-page-h-font", |
||||
iconWidth: 16, |
||||
iconHeight: 16, |
||||
height: 16, |
||||
width: 16 |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: sliderButton, |
||||
left: -8 |
||||
}, { |
||||
el: { |
||||
type: "bi.label", |
||||
ref: function (_ref) { |
||||
self.label = _ref; |
||||
} |
||||
}, |
||||
left: -8, |
||||
top: -10 |
||||
}] |
||||
}); |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
this.label.setText(v); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.slider_button", BI.SliderButton); |
||||
@ -0,0 +1,201 @@
|
||||
/** |
||||
* Created by Urthur on 2017/9/4. |
||||
*/ |
||||
BI.SliderNormal = BI.inherit(BI.Widget, { |
||||
_constant: { |
||||
HEIGHT: 28, |
||||
SLIDER_WIDTH_HALF: 10, |
||||
SLIDER_WIDTH: 25, |
||||
SLIDER_HEIGHT: 30, |
||||
TRACK_HEIGHT: 24 |
||||
}, |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.SliderNormal.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-slider", |
||||
min: 10, |
||||
max: 50 |
||||
}) |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.SliderNormal.superclass._init.apply(this, arguments); |
||||
var self = this; |
||||
var c = this._constant, o = this.options; |
||||
this.enable = false; |
||||
this.value = o.min; |
||||
this.min = o.min; |
||||
this.max = o.max; |
||||
|
||||
this.rightTrack = BI.createWidget({ |
||||
type: "bi.layout", |
||||
cls: "bi-slider-track", |
||||
height: 5 |
||||
}); |
||||
this.track = this._createTrack(); |
||||
|
||||
this.slider = BI.createWidget({ |
||||
type: "bi.slider_button" |
||||
}); |
||||
this.slider.setValue(this.getValue()); |
||||
this.slider.element.draggable({ |
||||
axis: "x", |
||||
containment: this.rightTrack.element, |
||||
scroll: false, |
||||
drag: function (e, ui) { |
||||
var percent = (ui.position.left) * 100 / (self._getRightTrackLength()); |
||||
var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
|
||||
var v = self._getValueByPercent(significantPercent); |
||||
self.value = BI.parseInt(v) + 1; |
||||
self.slider.setValue(self.getValue()); |
||||
self.fireEvent(BI.SliderNormal.EVENT_CHANGE); |
||||
}, |
||||
stop: function (e, ui) { |
||||
var percent = (ui.position.left) * 100 / (self._getRightTrackLength()); |
||||
var significantPercent = BI.parseFloat(percent.toFixed(1)); |
||||
self._setSliderPosition(significantPercent); |
||||
self.fireEvent(BI.SliderNormal.EVENT_CHANGE); |
||||
} |
||||
}); |
||||
var sliderVertical = BI.createWidget({ |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: this.slider, |
||||
top: 10 |
||||
}] |
||||
}], |
||||
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._getRightTrackLength(); |
||||
} |
||||
if (offset > (trackLength - c.SLIDER_WIDTH)) { |
||||
percent = 100 |
||||
} |
||||
var significantPercent = BI.parseFloat(percent.toFixed(1)); |
||||
self._setSliderPosition(significantPercent); |
||||
var v = self._getValueByPercent(significantPercent); |
||||
self.value = BI.parseInt(v); |
||||
self.slider.setValue(self.getValue()); |
||||
self.fireEvent(BI.SliderNormal.EVENT_CHANGE); |
||||
} |
||||
}); |
||||
|
||||
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 |
||||
}] |
||||
}], |
||||
height: c.TRACK_HEIGHT |
||||
}, |
||||
top: 33, |
||||
left: 0, |
||||
width: "100%" |
||||
}, { |
||||
el: sliderVertical, |
||||
top: 15, |
||||
left: 0, |
||||
width: "100%" |
||||
}] |
||||
}); |
||||
}, |
||||
|
||||
_createTrack: function () { |
||||
return BI.createWidget({ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: this.rightTrack, |
||||
top: 0, |
||||
left: 0, |
||||
width: "100%" |
||||
}] |
||||
}], |
||||
hgap: 8, |
||||
height: 5 |
||||
}, |
||||
top: 5, |
||||
left: 0, |
||||
width: "100%" |
||||
}] |
||||
}) |
||||
}, |
||||
|
||||
_checkValidation: function (v) { |
||||
return !(BI.isNull(v) || v < this.min || v > this.max) |
||||
}, |
||||
|
||||
_setSliderPosition: function (percent) { |
||||
this.slider.element.css({"left": percent + "%"}); |
||||
}, |
||||
|
||||
_getRightTrackLength: function () { |
||||
return this.rightTrack.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; |
||||
} |
||||
} |
||||
|
||||
if (!isNaN(this.min) && !isNaN(this.max)) { |
||||
this.enable = true; |
||||
if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) { |
||||
this.slider.setValue(BI.parseInt(this.value)); |
||||
this._setSliderPosition(this._getPercentByValue(this.value)); |
||||
} else { |
||||
this.slider.setValue(this.max); |
||||
this._setSliderPosition(100); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
BI.SliderNormal.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.shortcut("bi.slider", BI.SliderNormal); |
||||
Loading…
Reference in new issue