Browse Source

Merge pull request #151 in ~GUY/fineui from ~IMP/fineui_guy:master to master

* commit 'efc8221cfa97d4df8a8d32c9af05d2da35b0a2ee':
  update
  update
  update
es6
imp 7 years ago
parent
commit
c59f08ea20
  1. 4
      Gruntfile.js
  2. 263
      bi/slider.js
  3. 69
      demo/js/widget/slider/demo.slider.js
  4. 285
      dist/demo.js
  5. 263
      dist/slider.js
  6. 12
      src/addons/slider/singleslider/button/iconbutton.slider.js
  7. 4
      src/addons/slider/singleslider/singleslider.js
  8. 2
      src/addons/slider/singleslider/singleslider.normal.js
  9. 44
      src/addons/slider/slider/slider.button.js
  10. 201
      src/addons/slider/slider/slider.js

4
Gruntfile.js

@ -83,7 +83,7 @@ module.exports = function (grunt) {
},
sliderJs: {
src: [
'src/addons/slider/slider/**/*.js'
'src/addons/slider/singleslider/**/*.js'
],
dest: 'dist/slider.js'
},
@ -226,7 +226,7 @@ module.exports = function (grunt) {
},
bi_sliderJs: {
src: [
'src/addons/slider/slider/**/*.js'
'src/addons/slider/singleslider/**/*.js'
],
dest: 'bi/slider.js'
},

263
bi/slider.js

@ -1,17 +1,17 @@
/**
* Created by zcf on 2016/9/22.
*/
BI.Slider = BI.inherit(BI.Widget, {
BI.SliderIconButton = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.Slider.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-single-button-button"
return BI.extend(BI.SliderIconButton.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-single-slider-button"
});
},
_init: function () {
BI.extend(BI.Slider.superclass._init.apply(this, arguments));
BI.extend(BI.SliderIconButton.superclass._init.apply(this, arguments));
this.slider = BI.createWidget({
type: "bi.icon_button",
cls: "widget-button-icon button-button",
cls: "widget-slider-icon slider-button",
iconWidth: 14,
iconHeight: 14,
height: 14,
@ -30,7 +30,7 @@ BI.Slider = BI.inherit(BI.Widget, {
});
}
});
BI.shortcut("bi.single_slider_slider", BI.Slider);/**
BI.shortcut("bi.single_slider_button", BI.SliderIconButton);/**
* Created by zcf on 2016/9/22.
*/
BI.SingleSlider = BI.inherit(BI.Widget, {
@ -69,7 +69,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
this.track = this._createTrackWrapper();
this.slider = BI.createWidget({
type: "bi.single_slider_slider"
type: "bi.single_slider_button"
});
this.slider.element.draggable({
axis: "x",
@ -127,7 +127,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
cls: "slider-editor-button bi-border",
errorText: "",
height: c.HEIGHT,
width: c.EDITOR_WIDTH,
width: c.EDITOR_WIDTH - 2,
allowBlank: false,
validationChecker: function (v) {
return self._checkValidation(v);
@ -340,7 +340,7 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
var c = this._constant;
var track = this._createTrack();
this.slider = BI.createWidget({
type: "bi.single_slider_slider"
type: "bi.single_slider_button"
});
this.slider.element.draggable({
axis: "x",
@ -553,247 +553,4 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
}
});
BI.SingleSliderNormal.EVENT_DRAG = "EVENT_DRAG";
BI.shortcut("bi.single_slider_normal", BI.SingleSliderNormal);/**
* 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);
BI.shortcut("bi.single_slider_normal", BI.SingleSliderNormal);

69
demo/js/widget/slider/demo.slider.js

@ -11,32 +11,57 @@ Demo.Slider = BI.inherit(BI.Widget, {
},
_init: function () {
Demo.Slider.superclass._init.apply(this, arguments);
var self = this;
var singleSlider = BI.createWidget({
type: "bi.single_slider",
width: 300,
height: 50
});
singleSlider.setMinAndMax({
min: 10,
max: 100
});
singleSlider.populate();
var normalSingleSlider = BI.createWidget({
type: "bi.single_slider_normal",
height: 30,
width: 300
});
normalSingleSlider.setMinAndMax({
min: 0,
max: 100
});
normalSingleSlider.setValue(10);
normalSingleSlider.populate();
BI.createWidget({
type: "bi.vertical_adapt",
type: "bi.vtape",
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
}]
el: {
type: "bi.center_adapt",
items: [{
el: singleSlider
}]
},
height: 200
}, {
el: {
type: "bi.center_adapt",
items: [{
el: normalSingleSlider
}]
},
height: 200
}],
hgap: 20
});
this.slider.setValue("30");
this.slider.on(BI.SliderNormal.EVENT_CHANGE, function () {
console.log(this.getValue());
})
}
});
BI.shortcut("demo.slider", Demo.Slider);

285
dist/demo.js vendored

@ -4487,7 +4487,41 @@ Demo.BorderLayout = BI.inherit(BI.Widget, {
}
}
});
BI.shortcut("demo.border", Demo.BorderLayout);Demo.CenterAdapt = BI.inherit(BI.Widget, {
BI.shortcut("demo.border", Demo.BorderLayout);/**
* Created by User on 2017/3/22.
*/
Demo.CenterLayout = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-center"
},
render: function () {
return {
type: "bi.center",
items: [{
type: "bi.label",
text: "Center 1,这里虽然设置label的高度30,但是最终影响高度的是center布局",
cls: "layout-bg1",
whiteSpace: "normal"
},{
type: "bi.label",
text: "Center 2,为了演示label是占满整个的,用了一个whiteSpace:normal",
cls: "layout-bg2",
whiteSpace: "normal"
},{
type: "bi.label",
text: "Center 3",
cls: "layout-bg3"
},{
type: "bi.label",
text: "Center 4",
cls: "layout-bg5"
}],
hgap: 20,
vgap: 20
}
}
});
BI.shortcut("demo.center_layout", Demo.CenterLayout);Demo.CenterAdapt = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-absolute"
},
@ -4570,40 +4604,6 @@ BI.shortcut("demo.border", Demo.BorderLayout);Demo.CenterAdapt = BI.inherit(BI.W
BI.shortcut("demo.center_adapt", Demo.CenterAdapt);/**
* Created by User on 2017/3/22.
*/
Demo.CenterLayout = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-center"
},
render: function () {
return {
type: "bi.center",
items: [{
type: "bi.label",
text: "Center 1,这里虽然设置label的高度30,但是最终影响高度的是center布局",
cls: "layout-bg1",
whiteSpace: "normal"
},{
type: "bi.label",
text: "Center 2,为了演示label是占满整个的,用了一个whiteSpace:normal",
cls: "layout-bg2",
whiteSpace: "normal"
},{
type: "bi.label",
text: "Center 3",
cls: "layout-bg3"
},{
type: "bi.label",
text: "Center 4",
cls: "layout-bg5"
}],
hgap: 20,
vgap: 20
}
}
});
BI.shortcut("demo.center_layout", Demo.CenterLayout);/**
* Created by User on 2017/3/22.
*/
Demo.FloatCenterLayout = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-float-center"
@ -4848,6 +4848,55 @@ Demo.GridLayout = BI.inherit(BI.Widget, {
}
});
BI.shortcut("demo.grid", Demo.GridLayout);/**
* Created by User on 2017/3/21.
*/
Demo.Horizontal = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-horizontal"
},
render: function () {
return {
type: "bi.vertical",
items: [{
type: "bi.horizontal",
items: [{
type: "bi.absolute",
items: [{
el: {
type: "bi.text_button",
cls: "layout-bg1",
text: "这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)",
height: 30
},
left: 0,
right: 0
}],
width: 100,
height: 30
}, {
type: "bi.absolute",
items: [{
el: {
type: "bi.text_button",
cls: "layout-bg2",
text: "这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)",
height: 30
},
left: 0,
right: 0
}],
width: 200,
height: 30
}]
}],
lgap: 20,
rgap: 80,
tgap: 80,
bgap: 50
}
}
});
BI.shortcut("demo.horizontal", Demo.Horizontal);/**
* Created by User on 2017/3/22.
*/
Demo.HorizontalAdapt = BI.inherit(BI.Widget, {
@ -4964,55 +5013,6 @@ Demo.HorizontalFloat = BI.inherit(BI.Widget, {
}
});
BI.shortcut("demo.horizontal_float", Demo.HorizontalFloat);/**
* Created by User on 2017/3/21.
*/
Demo.Horizontal = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-horizontal"
},
render: function () {
return {
type: "bi.vertical",
items: [{
type: "bi.horizontal",
items: [{
type: "bi.absolute",
items: [{
el: {
type: "bi.text_button",
cls: "layout-bg1",
text: "这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)",
height: 30
},
left: 0,
right: 0
}],
width: 100,
height: 30
}, {
type: "bi.absolute",
items: [{
el: {
type: "bi.text_button",
cls: "layout-bg2",
text: "这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)",
height: 30
},
left: 0,
right: 0
}],
width: 200,
height: 30
}]
}],
lgap: 20,
rgap: 80,
tgap: 80,
bgap: 50
}
}
});
BI.shortcut("demo.horizontal", Demo.Horizontal);/**
* Created by User on 2017/3/22.
*/
Demo.HtapeLayout = BI.inherit(BI.Widget, {
@ -5358,6 +5358,30 @@ Demo.TdLayout = BI.inherit(BI.Widget, {
}
});
BI.shortcut("demo.td", Demo.TdLayout);/**
* Created by User on 2017/3/21.
*/
Demo.VerticalLayout = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-vertical"
},
render: function () {
return {
type: "bi.vertical",
items: [{
type: "bi.label",
cls: "layout-bg1",
text: "这里设置了hgap(水平间距),vgap(垂直间距)",
height: 30
}, {
type: "bi.label",
cls: "layout-bg2",
text: "这里设置了hgap(水平间距),vgap(垂直间距)",
height: 30
}]
}
}
});
BI.shortcut("demo.vertical", Demo.VerticalLayout);/**
* Created by User on 2017/3/22.
*/
Demo.VerticalAdaptLayout = BI.inherit(BI.Widget, {
@ -5399,30 +5423,6 @@ Demo.VerticalAdaptLayout = BI.inherit(BI.Widget, {
}
});
BI.shortcut("demo.vertical_adapt", Demo.VerticalAdaptLayout);/**
* Created by User on 2017/3/21.
*/
Demo.VerticalLayout = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-vertical"
},
render: function () {
return {
type: "bi.vertical",
items: [{
type: "bi.label",
cls: "layout-bg1",
text: "这里设置了hgap(水平间距),vgap(垂直间距)",
height: 30
}, {
type: "bi.label",
cls: "layout-bg2",
text: "这里设置了hgap(水平间距),vgap(垂直间距)",
height: 30
}]
}
}
});
BI.shortcut("demo.vertical", Demo.VerticalLayout);/**
* Created by User on 2017/3/22.
*/
Demo.VtapeLayout = BI.inherit(BI.Widget, {
@ -8445,32 +8445,57 @@ Demo.Slider = BI.inherit(BI.Widget, {
},
_init: function () {
Demo.Slider.superclass._init.apply(this, arguments);
var self = this;
var singleSlider = BI.createWidget({
type: "bi.single_slider",
width: 300,
height: 50
});
singleSlider.setMinAndMax({
min: 10,
max: 100
});
singleSlider.populate();
var normalSingleSlider = BI.createWidget({
type: "bi.single_slider_normal",
height: 30,
width: 300
});
normalSingleSlider.setMinAndMax({
min: 0,
max: 100
});
normalSingleSlider.setValue(10);
normalSingleSlider.populate();
BI.createWidget({
type: "bi.vertical_adapt",
type: "bi.vtape",
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
}]
el: {
type: "bi.center_adapt",
items: [{
el: singleSlider
}]
},
height: 200
}, {
el: {
type: "bi.center_adapt",
items: [{
el: normalSingleSlider
}]
},
height: 200
}],
hgap: 20
});
this.slider.setValue("30");
this.slider.on(BI.SliderNormal.EVENT_CHANGE, function () {
console.log(this.getValue());
})
}
});
BI.shortcut("demo.slider", Demo.Slider);/**

263
dist/slider.js vendored

@ -1,17 +1,17 @@
/**
* Created by zcf on 2016/9/22.
*/
BI.Slider = BI.inherit(BI.Widget, {
BI.SliderIconButton = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.Slider.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-single-button-button"
return BI.extend(BI.SliderIconButton.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-single-slider-button"
});
},
_init: function () {
BI.extend(BI.Slider.superclass._init.apply(this, arguments));
BI.extend(BI.SliderIconButton.superclass._init.apply(this, arguments));
this.slider = BI.createWidget({
type: "bi.icon_button",
cls: "widget-button-icon button-button",
cls: "widget-slider-icon slider-button",
iconWidth: 14,
iconHeight: 14,
height: 14,
@ -30,7 +30,7 @@ BI.Slider = BI.inherit(BI.Widget, {
});
}
});
BI.shortcut("bi.single_slider_slider", BI.Slider);/**
BI.shortcut("bi.single_slider_button", BI.SliderIconButton);/**
* Created by zcf on 2016/9/22.
*/
BI.SingleSlider = BI.inherit(BI.Widget, {
@ -69,7 +69,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
this.track = this._createTrackWrapper();
this.slider = BI.createWidget({
type: "bi.single_slider_slider"
type: "bi.single_slider_button"
});
this.slider.element.draggable({
axis: "x",
@ -127,7 +127,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
cls: "slider-editor-button bi-border",
errorText: "",
height: c.HEIGHT,
width: c.EDITOR_WIDTH,
width: c.EDITOR_WIDTH - 2,
allowBlank: false,
validationChecker: function (v) {
return self._checkValidation(v);
@ -340,7 +340,7 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
var c = this._constant;
var track = this._createTrack();
this.slider = BI.createWidget({
type: "bi.single_slider_slider"
type: "bi.single_slider_button"
});
this.slider.element.draggable({
axis: "x",
@ -553,247 +553,4 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
}
});
BI.SingleSliderNormal.EVENT_DRAG = "EVENT_DRAG";
BI.shortcut("bi.single_slider_normal", BI.SingleSliderNormal);/**
* 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);
BI.shortcut("bi.single_slider_normal", BI.SingleSliderNormal);

12
src/addons/slider/slider/singleslider/button/iconbutton.slider.js → src/addons/slider/singleslider/button/iconbutton.slider.js

@ -1,17 +1,17 @@
/**
* Created by zcf on 2016/9/22.
*/
BI.Slider = BI.inherit(BI.Widget, {
BI.SliderIconButton = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.Slider.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-single-button-button"
return BI.extend(BI.SliderIconButton.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-single-slider-button"
});
},
_init: function () {
BI.extend(BI.Slider.superclass._init.apply(this, arguments));
BI.extend(BI.SliderIconButton.superclass._init.apply(this, arguments));
this.slider = BI.createWidget({
type: "bi.icon_button",
cls: "widget-button-icon button-button",
cls: "widget-slider-icon slider-button",
iconWidth: 14,
iconHeight: 14,
height: 14,
@ -30,4 +30,4 @@ BI.Slider = BI.inherit(BI.Widget, {
});
}
});
BI.shortcut("bi.single_slider_slider", BI.Slider);
BI.shortcut("bi.single_slider_button", BI.SliderIconButton);

4
src/addons/slider/slider/singleslider/singleslider.js → src/addons/slider/singleslider/singleslider.js

@ -37,7 +37,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
this.track = this._createTrackWrapper();
this.slider = BI.createWidget({
type: "bi.single_slider_slider"
type: "bi.single_slider_button"
});
this.slider.element.draggable({
axis: "x",
@ -95,7 +95,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
cls: "slider-editor-button bi-border",
errorText: "",
height: c.HEIGHT,
width: c.EDITOR_WIDTH,
width: c.EDITOR_WIDTH - 2,
allowBlank: false,
validationChecker: function (v) {
return self._checkValidation(v);

2
src/addons/slider/slider/singleslider/singleslider.normal.js → src/addons/slider/singleslider/singleslider.normal.js

@ -28,7 +28,7 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
var c = this._constant;
var track = this._createTrack();
this.slider = BI.createWidget({
type: "bi.single_slider_slider"
type: "bi.single_slider_button"
});
this.slider.element.draggable({
axis: "x",

44
src/addons/slider/slider/slider.button.js

@ -1,44 +0,0 @@
/**
* 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/addons/slider/slider/slider.js

@ -1,201 +0,0 @@
/**
* 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