MooTools Slider控件，TypeError:Object#<HTMLDivElement>没有方
MooTools Slider control, TypeError: Object #<HTMLDivElement> has no method 'measure'
我正在尝试让MooTools滑块工作，这是我的index.html
<script src="mootools.js"></script>
<script src="slider.js"></script>
<style type="text/css">
.slider {
background: #CCC;
height: 16px;
width: 200px;
}
.slider .knob {
background: #000;
width: 16px;
height: 16px;
}
</style>
<html>
<body>
<center>
<div id="slider" class="slider">
<div id="knob" class="knob"></div>
</div>
<script>
//Adjustment
window.addEvent('domready',function() {
var mySlider = new Slider(document.getElementById('slider'), document.getElementById('knob'), {
range: [-90, 90],
initialStep: 0,
snap: true,
});
});
</script>
</center>
</body>
</html>
然而，我得到了错误"Uncaught TypeError:Object#没有方法'measure'"。有人能帮忙吗？
谢谢Joe
更新滑块JS如下：
var Slider = new Class({
Implements: [Events, Options],
Binds: ['clickedElement', 'draggedKnob', 'scrolledElement'],
options: {/*
onTick: function(intPosition){},
onChange: function(intStep){},
onComplete: function(strStep){},*/
onTick: function(position){
this.setKnobPosition(position);
},
initialStep: 0,
snap: false,
offset: 0,
range: false,
wheel: false,
steps: 100,
mode: 'horizontal'
},
initialize: function(element, knob, options){
this.setOptions(options);
options = this.options;
this.element = document.id(element);
knob = this.knob = document.id(knob);
this.previousChange = this.previousEnd = this.step = -1;
var limit = {},
modifiers = {x: false, y: false};
switch (options.mode){
case 'vertical':
this.axis = 'y';
this.property = 'top';
this.offset = 'offsetHeight';
break;
case 'horizontal':
this.axis = 'x';
this.property = 'left';
this.offset = 'offsetWidth';
}
this.setSliderDimensions();
this.setRange(options.range);
if (knob.getStyle('position') == 'static') knob.setStyle('position', 'relative');
knob.setStyle(this.property, -options.offset);
modifiers[this.axis] = this.property;
limit[this.axis] = [-options.offset, this.full - options.offset];
var dragOptions = {
snap: 0,
limit: limit,
modifiers: modifiers,
onDrag: this.draggedKnob,
onStart: this.draggedKnob,
onBeforeStart: (function(){
this.isDragging = true;
}).bind(this),
onCancel: function(){
this.isDragging = false;
}.bind(this),
onComplete: function(){
this.isDragging = false;
this.draggedKnob();
this.end();
}.bind(this)
};
if (options.snap) this.setSnap(dragOptions);
this.drag = new Drag(knob, dragOptions);
this.attach();
if (options.initialStep != null) this.set(options.initialStep);
},
attach: function(){
this.element.addEvent('mousedown', this.clickedElement);
if (this.options.wheel) this.element.addEvent('mousewheel', this.scrolledElement);
this.drag.attach();
return this;
},
detach: function(){
this.element.removeEvent('mousedown', this.clickedElement)
.removeEvent('mousewheel', this.scrolledElement);
this.drag.detach();
return this;
},
autosize: function(){
this.setSliderDimensions()
.setKnobPosition(this.toPosition(this.step));
this.drag.options.limit[this.axis] = [-this.options.offset, this.full - this.options.offset];
if (this.options.snap) this.setSnap();
return this;
},
setSnap: function(options){
if (!options) options = this.drag.options;
options.grid = Math.ceil(this.stepWidth);
options.limit[this.axis][1] = this.full;
return this;
},
setKnobPosition: function(position){
if (this.options.snap) position = this.toPosition(this.step);
this.knob.setStyle(this.property, position);
return this;
},
setSliderDimensions: function(){
this.full = this.element.measure(function(){
this.half = this.knob[this.offset] / 2;
return this.element[this.offset] - this.knob[this.offset] + (this.options.offset * 2);
}.bind(this));
return this;
},
set: function(step){
if (!((this.range > 0) ^ (step < this.min))) step = this.min;
if (!((this.range > 0) ^ (step > this.max))) step = this.max;
this.step = Math.round(step);
return this.checkStep()
.fireEvent('tick', this.toPosition(this.step))
.end();
},
setRange: function(range, pos){
this.min = Array.pick([range[0], 0]);
this.max = Array.pick([range[1], this.options.steps]);
this.range = this.max - this.min;
this.steps = this.options.steps || this.full;
this.stepSize = Math.abs(this.range) / this.steps;
this.stepWidth = this.stepSize * this.full / Math.abs(this.range);
if (range) this.set(Array.pick([pos, this.step]).floor(this.min).max(this.max));
return this;
},
clickedElement: function(event){
if (this.isDragging || event.target == this.knob) return;
var dir = this.range < 0 ? -1 : 1,
position = event.page[this.axis] - this.element.getPosition()[this.axis] - this.half;
position = position.limit(-this.options.offset, this.full - this.options.offset);
this.step = Math.round(this.min + dir * this.toStep(position));
this.checkStep()
.fireEvent('tick', position)
.end();
},
scrolledElement: function(event){
var mode = (this.options.mode == 'horizontal') ? (event.wheel < 0) : (event.wheel > 0);
this.set(this.step + (mode ? -1 : 1) * this.stepSize);
event.stop();
},
draggedKnob: function(){
var dir = this.range < 0 ? -1 : 1,
position = this.drag.value.now[this.axis];
position = position.limit(-this.options.offset, this.full -this.options.offset);
this.step = Math.round(this.min + dir * this.toStep(position));
this.checkStep();
},
checkStep: function(){
var step = this.step;
if (this.previousChange != step){
this.previousChange = step;
this.fireEvent('change', step);
}
return this;
},
end: function(){
var step = this.step;
if (this.previousEnd !== step){
this.previousEnd = step;
this.fireEvent('complete', step + '');
}
return this;
},
toStep: function(position){
var step = (position + this.options.offset) * this.stepSize / this.full * this.steps;
return this.options.steps ? Math.round(step -= step % this.stepSize) : step;
},
toPosition: function(step){
return (this.full * Math.abs(this.min - step)) / (this.steps * this.stepSize) - this.options.offset;
}
});
我使用的是mootools 1.4.1版本。它似乎在jsfiddlehttp://jsfiddle.net/VqnN8/
感谢
您似乎忘记了包含mootools的"more"库-元素度量在more下：http://mootools.net/docs/more/Element/Element.Measure
在jsfiddle中，你包含了它，我想在你未经测试的例子中，你没有。
相关文章：
- 在<页眉>标签
- 如何更改<svg>标记为<img>用js标记
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- Ajax文件加载和<输入>文件加载
- 为什么要使用0>javascript中的0
- 检测电话窃听，即:<a href="电话:xxx">在UIWebview上
- 链接所有<a>Meteor
- 在<输入类型＝“;文件“/>
- Div根据<选择>菜单
- 可以<脚本类型＝“;text/javascript”>window.location=“/"</
- 如何首先设置样式<td>表中包含在窗体中的元素
- 通过点击<李>在jQuery中
- 正在检测导航到<a name＝“;最新主题”></a>
- 将所选类别循环到ul>李用加载更多按钮
- 如何更改<选择>使用angularJS从控制器获得的值
- 使用下拉列表筛选列表(ul>li）
- 未捕获的类型错误:对象#<HTMLDivElement>没有方法'偏移'
- 未捕获的类型错误:对象#<HTMLDivElement>没有方法'addPanel'
- MooTools Slider控件，TypeError:Object#<HTMLDivElement>没有方
- 未捕获的类型错误:对象#<HTMLDivElement>没有方法'绑定'
