slider.js
来自「Hippo CMS是一个以信息为中心的开源内容管理系统。Hippo CMS目标是」· JavaScript 代码 · 共 476 行 · 第 1/2 页
JS
476 行
this._clipRight = x + this._clipXdelta;
}
this.progressBackgroundNode.style.clip = "rect(" + this._clipTop + "px," + this._clipRight + "px," + this._clipBottom + "px," + this._clipLeft + "px)";
}, _calc_valueSizeX:function () {
var constrainingCtrBox = dojo.html.getContentBox(this.constrainingContainerNode);
var sliderHandleBox = dojo.html.getContentBox(this.sliderHandleNode);
if (isNaN(constrainingCtrBox.width) || isNaN(sliderHandleBox.width) || constrainingCtrBox.width <= 0 || sliderHandleBox.width <= 0) {
return false;
}
this._constraintWidth = constrainingCtrBox.width + dojo.html.getPadding(this.constrainingContainerNode).width - sliderHandleBox.width;
if (this.flipX) {
this._clipLeft = this._clipRight = constrainingCtrBox.width;
} else {
this._clipLeft = this._clipRight = 0;
}
this._clipXdelta = sliderHandleBox.width >> 1;
if (!this.isEnableY) {
this._clipTop = 0;
this._clipBottom = constrainingCtrBox.height;
}
if (this._constraintWidth <= 0) {
return false;
}
if (this.snapValuesX == 0) {
this.snapValuesX = this._constraintWidth + 1;
}
this._valueSizeX = this._constraintWidth / (this.snapValuesX - 1);
return true;
}, setValueX:function (value) {
if (0 == this._valueSizeX) {
if (this._calc_valueSizeX() == false) {
dojo.lang.setTimeout(this, "setValueX", 100, value);
return;
}
}
if (isNaN(value)) {
value = 0;
}
if (value > this.maximumX) {
value = this.maximumX;
} else {
if (value < this.minimumX) {
value = this.minimumX;
}
}
var pixelPercent = (value - this.minimumX) / (this.maximumX - this.minimumX);
if (this.flipX) {
pixelPercent = 1 - pixelPercent;
}
this._snapX(pixelPercent * this._constraintWidth);
this.notifyListeners();
}, getValueX:function () {
var pixelPercent = dojo.html.getPixelValue(this.sliderHandleNode, "left") / this._constraintWidth;
if (this.flipX) {
pixelPercent = 1 - pixelPercent;
}
return Math.round(pixelPercent * (this.snapValuesX - 1)) * ((this.maximumX - this.minimumX) / (this.snapValuesX - 1)) + this.minimumX;
}, _snapY:function (y) {
if (y < 0) {
y = 0;
} else {
if (y > this._constraintHeight) {
y = this._constraintHeight;
} else {
var selectedValue = Math.round(y / this._valueSizeY);
y = Math.round(selectedValue * this._valueSizeY);
}
}
this.sliderHandleNode.style.top = y + "px";
if (this.flipY) {
this._clipTop = y + this._clipYdelta;
} else {
this._clipBottom = y + this._clipYdelta;
}
this.progressBackgroundNode.style.clip = "rect(" + this._clipTop + "px," + this._clipRight + "px," + this._clipBottom + "px," + this._clipLeft + "px)";
}, _calc_valueSizeY:function () {
var constrainingCtrBox = dojo.html.getContentBox(this.constrainingContainerNode);
var sliderHandleBox = dojo.html.getContentBox(this.sliderHandleNode);
if (isNaN(constrainingCtrBox.height) || isNaN(sliderHandleBox.height) || constrainingCtrBox.height <= 0 || sliderHandleBox.height <= 0) {
return false;
}
this._constraintHeight = constrainingCtrBox.height + dojo.html.getPadding(this.constrainingContainerNode).height - sliderHandleBox.height;
if (this.flipY) {
this._clipTop = this._clipBottom = constrainingCtrBox.height;
} else {
this._clipTop = this._clipBottom = 0;
}
this._clipYdelta = sliderHandleBox.height >> 1;
if (!this.isEnableX) {
this._clipLeft = 0;
this._clipRight = constrainingCtrBox.width;
}
if (this._constraintHeight <= 0) {
return false;
}
if (this.snapValuesY == 0) {
this.snapValuesY = this._constraintHeight + 1;
}
this._valueSizeY = this._constraintHeight / (this.snapValuesY - 1);
return true;
}, setValueY:function (value) {
if (0 == this._valueSizeY) {
if (this._calc_valueSizeY() == false) {
dojo.lang.setTimeout(this, "setValueY", 100, value);
return;
}
}
if (isNaN(value)) {
value = 0;
}
if (value > this.maximumY) {
value = this.maximumY;
} else {
if (value < this.minimumY) {
value = this.minimumY;
}
}
var pixelPercent = (value - this.minimumY) / (this.maximumY - this.minimumY);
if (this.flipY) {
pixelPercent = 1 - pixelPercent;
}
this._snapY(pixelPercent * this._constraintHeight);
this.notifyListeners();
}, getValueY:function () {
var pixelPercent = dojo.html.getPixelValue(this.sliderHandleNode, "top") / this._constraintHeight;
if (this.flipY) {
pixelPercent = 1 - pixelPercent;
}
return Math.round(pixelPercent * (this.snapValuesY - 1)) * ((this.maximumY - this.minimumY) / (this.snapValuesY - 1)) + this.minimumY;
}, _onClick:function (evt) {
if (this._isDragInProgress) {
return;
}
var parent = dojo.html.getAbsolutePosition(this.constrainingContainerNode, true, dojo.html.boxSizing.MARGIN_BOX);
var content = dojo.html.getContentBox(this._handleMove.domNode);
if (this.isEnableX) {
var x = evt.pageX - parent.x - (content.width >> 1);
this._snapX(x);
}
if (this.isEnableY) {
var y = evt.pageY - parent.y - (content.height >> 1);
this._snapY(y);
}
this.notifyListeners();
}, notifyListeners:function () {
this.onValueChanged(this.getValueX(), this.getValueY());
}, onValueChanged:function (x, y) {
}});
dojo.widget.defineWidget("dojo.widget.SliderHorizontal", dojo.widget.Slider, {isEnableX:true, isEnableY:false, initialValue:"", snapValues:"", minimum:"", maximum:"", buttonStyle:"", backgroundSize:"height:10px;width:200px;", backgroundSrc:dojo.uri.moduleUri("dojo.widget", "templates/images/slider-bg.gif"), flip:false, postMixInProperties:function () {
dojo.widget.SliderHorizontal.superclass.postMixInProperties.apply(this, arguments);
if (!isNaN(parseFloat(this.initialValue))) {
this.initialValueX = parseFloat(this.initialValue);
}
if (!isNaN(parseFloat(this.minimum))) {
this.minimumX = parseFloat(this.minimum);
}
if (!isNaN(parseFloat(this.maximum))) {
this.maximumX = parseFloat(this.maximum);
}
if (!isNaN(parseInt(this.snapValues))) {
this.snapValuesX = parseInt(this.snapValues);
}
if (dojo.lang.isString(this.buttonStyle) && this.buttonStyle != "") {
this.buttonStyleX = this.buttonStyle;
}
if (dojo.lang.isBoolean(this.flip)) {
this.flipX = this.flip;
}
}, notifyListeners:function () {
this.onValueChanged(this.getValueX());
}, getValue:function () {
return this.getValueX();
}, setValue:function (value) {
this.setValueX(value);
}, onValueChanged:function (value) {
}});
dojo.widget.defineWidget("dojo.widget.SliderVertical", dojo.widget.Slider, {isEnableX:false, isEnableY:true, initialValue:"", snapValues:"", minimum:"", maximum:"", buttonStyle:"", backgroundSize:"width:10px;height:200px;", backgroundSrc:dojo.uri.moduleUri("dojo.widget", "templates/images/slider-bg-vert.gif"), flip:false, postMixInProperties:function () {
dojo.widget.SliderVertical.superclass.postMixInProperties.apply(this, arguments);
if (!isNaN(parseFloat(this.initialValue))) {
this.initialValueY = parseFloat(this.initialValue);
}
if (!isNaN(parseFloat(this.minimum))) {
this.minimumY = parseFloat(this.minimum);
}
if (!isNaN(parseFloat(this.maximum))) {
this.maximumY = parseFloat(this.maximum);
}
if (!isNaN(parseInt(this.snapValues))) {
this.snapValuesY = parseInt(this.snapValues);
}
if (dojo.lang.isString(this.buttonStyle) && this.buttonStyle != "") {
this.buttonStyleY = this.buttonStyle;
}
if (dojo.lang.isBoolean(this.flip)) {
this.flipY = this.flip;
}
}, notifyListeners:function () {
this.onValueChanged(this.getValueY());
}, getValue:function () {
return this.getValueY();
}, setValue:function (value) {
this.setValueY(value);
}, onValueChanged:function (value) {
}});
dojo.declare("dojo.widget._SliderDragMoveSource", dojo.dnd.HtmlDragMoveSource, {slider:null, onDragStart:function (evt) {
this.slider._isDragInProgress = true;
var dragObj = this.createDragMoveObject();
this.slider.notifyListeners();
return dragObj;
}, onDragEnd:function (evt) {
this.slider._isDragInProgress = false;
this.slider.notifyListeners();
}, createDragMoveObject:function () {
var dragObj = new dojo.widget._SliderDragMoveObject(this.dragObject, this.type);
dragObj.slider = this.slider;
if (this.dragClass) {
dragObj.dragClass = this.dragClass;
}
return dragObj;
}, setParent:function (slider) {
this.slider = slider;
}});
dojo.declare("dojo.widget._SliderDragMoveObject", dojo.dnd.HtmlDragMoveObject, {slider:null, onDragMove:function (evt) {
this.updateDragOffset();
if (this.slider.isEnableX) {
var x = this.dragOffset.x + evt.pageX;
this.slider._snapX(x);
}
if (this.slider.isEnableY) {
var y = this.dragOffset.y + evt.pageY;
this.slider._snapY(y);
}
if (this.slider.activeDrag) {
this.slider.notifyListeners();
}
}});
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?