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 # has no method 'measure'」というエラーが表示されます。
ありがとうジョー
UPDATE スライダー 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 を使用しています。http://jsfiddle.net/VqnN8/の jsfiddle で動作するようです
ありがとう