Browse Source

Merge pull request #132 in ~GUY/fineui from ~URTHUR/fineui:master to master

* commit '9011f41d79ad21f8733033659d34fe6b691b085c':
  BI.Slider已被注册
  BI-8895 slider控件
es6
guy 7 years ago
parent
commit
a35fe9305a
  1. 7
      bi/widget.css
  2. 243
      bi/widget.js
  3. 8
      demo/js/config/widget.js
  4. 42
      demo/js/widget/slider/demo.slider.js
  5. 7
      dist/bundle.css
  6. 243
      dist/bundle.js
  7. 49
      dist/demo.js
  8. 7
      dist/widget.css
  9. 243
      dist/widget.js
  10. 7
      src/css/widget/slider/slider.css
  11. 8
      src/less/widget/slider/slider.less
  12. 44
      src/widget/slider/slider.button.js
  13. 201
      src/widget/slider/slider.js

7
bi/widget.css

@ -392,6 +392,13 @@
}
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.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;
}
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.bi-year-popup .year-popup-navigation {

243
bi/widget.js

@ -14941,6 +14941,249 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
});
BI.shortcut("bi.single_tree_trigger", BI.SingleTreeTrigger);/**
* 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);/**
* 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);/**
* 可以单选多选切换的树
*
* Created by GUY on 2015/12/21.

8
demo/js/config/widget.js

@ -252,5 +252,13 @@ Demo.WIDGET_CONFIG = [{
pId: 419,
text: "bi.file_manager",
value: "demo.file_manager"
}, {
pId: 4,
id: 421,
text: "滚动调节"
}, {
pId: 421,
text: "bi.slider",
value: "demo.slider"
}
];

42
demo/js/widget/slider/demo.slider.js

@ -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);

7
dist/bundle.css vendored

@ -3161,6 +3161,13 @@ li.CodeMirror-hint-active {
}
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.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;
}
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.bi-year-popup .year-popup-navigation {

243
dist/bundle.js vendored

@ -91998,6 +91998,249 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
});
BI.shortcut("bi.single_tree_trigger", BI.SingleTreeTrigger);/**
* 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);/**
* 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);/**
* 可以单选多选切换的树
*
* Created by GUY on 2015/12/21.

49
dist/demo.js vendored

@ -3729,6 +3729,14 @@ Demo.COMPONENT_CONFIG = [{
pId: 419,
text: "bi.file_manager",
value: "demo.file_manager"
}, {
pId: 4,
id: 421,
text: "滚动调节"
}, {
pId: 421,
text: "bi.slider",
value: "demo.slider"
}
];Demo.Func = BI.inherit(BI.Widget, {
props: {
@ -8392,6 +8400,47 @@ Demo.SingleTreeCombo = BI.inherit(BI.Widget, {
})
BI.shortcut("demo.single_tree_combo", Demo.SingleTreeCombo);/**
* 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);/**
* Created by Dailer on 2017/7/12.
*/
Demo.ExcelTable = BI.inherit(BI.Widget, {

7
dist/widget.css vendored

@ -392,6 +392,13 @@
}
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.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;
}
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.bi-year-popup .year-popup-navigation {

243
dist/widget.js vendored

@ -14941,6 +14941,249 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
});
BI.shortcut("bi.single_tree_trigger", BI.SingleTreeTrigger);/**
* 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);/**
* 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);/**
* 可以单选多选切换的树
*
* Created by GUY on 2015/12/21.

7
src/css/widget/slider/slider.css

@ -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;
}

8
src/less/widget/slider/slider.less

@ -0,0 +1,8 @@
@import "../../bibase";
.bi-slider {
.bi-slider-track {
.background-color(@color-bi-background-gray, 30%);
.border-radius(3px);
}
}

44
src/widget/slider/slider.button.js

@ -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);

201
src/widget/slider/slider.js

@ -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…
Cancel
Save