MooTools Slider控件,TypeError:Object#<htmldivelement>没有方法'measure'</htmldivelement>

时间:2013-07-11 16:36:01

标签: javascript html mootools jsfiddle

我试图让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>

但是我收到错误“未捕获的TypeError:对象#没有方法'措施'”任何人都可以帮忙吗?

由于 乔

更新 Slider 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中起作用

由于

1 个答案:

答案 0 :(得分:1)

似乎你忘了包含&#34;更多&#34; mootools库 - 元素测量更多:http://mootools.net/docs/more/Element/Element.Measure

在jsfiddle中你包括它我想你在没有发表的例子中你没有。