Question

我正在尝试构建一个可重用的滑块。

我遇到了让它正常工作的问题。

    function BasicSlider($cont) {
       this.$cont = $cont;
       this.$handle = null;
       this.isMouseDown = false;
       this.width = this.$cont.width();

       this.init();
       }

       BasicSlider.prototype.init = function () {
         this.buildMarkUp();
         this.bindHandlers();
       }

      BasicSlider.prototype.buildMarkUp = function () {
         var markUp = '<div class="basic-slider"><div class="basic-slider-trail"></div><div class="basic-slider-handle"></div></div>';

        this.$cont.html(markUp);
        this.$handle = $('.basic-slider-handle', this.$cont);
     }

       BasicSlider.prototype.bindHandlers = function () {
    var prxDoDrag = $.proxy(function (evt) {
        if (this.isMouseDown) {
            this.$handle.css({'left' : evt.offsetX + 'px'});
        }
    }, this);

    var prxDoMouseDown = $.proxy(function (evt) {
        this.isMouseDown = true;
    }, this);

    var prxDoMouseUp = $.proxy(function (evt) {
        this.isMouseDown = false;
    }, this);

    this.$handle.on('mousedown', prxDoMouseDown);
    this.$handle.on('mouseup', prxDoMouseUp);
    this.$cont.on('mousemove', prxDoDrag);
}

这是小提琴：http://jsfiddle.net/8uTVJ/

我无法使用输入[type = range]。我不能使用jqueryUi。

为什么我的鼠标没有开火？

Answer 1

非常简单的滑块：

我使这个vor成为一个自定义视频元素。但它很简单，你可以把它改成你想要的任何东西。

function pos(e){
 var x=e.pageX-r.offsetLeft;
 p.style.width=x+'px';
}

var  vc=document.getElementById('vc'),
     r=document.createElement('div'),
     p=document.createElement('div'),
     mu=true;// mouseup?

r.addEventListener('mousedown',function(e){
 mu=false;
 pos(e);
 e.preventDefault();
 e.stopPropagation()
},false);

r.addEventListener('mousemove',function(e){
 mu||pos(e)
},false);

document.addEventListener('mouseup',function(e){
 mu=true
},false);

vc.appendChild(r).appendChild(p);

<强>演示

http://jsfiddle.net/LxX34/1/

如果您有任何问题，请询问。

多个滑块插件

包含数据值

使用webkitTransform

http://jsfiddle.net/LxX34/7/

＆安培;有趣的初始化动画

http://jsfiddle.net/LxX34/8/

＆安培;默认值

http://jsfiddle.net/LxX34/9/

创建可拖动的滑块，事件问题

1 个答案: