繁体   English   中英

jQuery Simple Slider的mouseUp不起作用

mouseUp For Jquery Simple Slider is not working

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在使用jquery简单滑块( https://github.com/loopj/jquery-simple-slider ),它具有滑块的onchange事件。 但是没有mouseup事件。 当滑块移动时,我正在调用ajax请求。 这是我目前的代码。

  $("#MyId").bind("slider:changed", function (event, data) {
 // The currently selected value of the slider
 alert(data.value);

 // The value as a ratio of the slider (between 0 and 1)
 alert(data.ratio);
 });

当我移动滑块时,会多次触发Onchange事件。 我是jquery新手,所以无法弄清楚如何更改mouseup事件的源代码。 我也对此进行了研究,并在以下链接中发现了一个问题。 https://github.com/loopj/jquery-simple-slider/pull/19/files但这似乎不起作用。 提前致谢。

这是我的html代码。

<input  type="text" id="MyId" name="Myname" value=""/>" perdata-slider="true" data-slider-range="0,100" data-slider-highlight="true" data-slider-step="1" ><span></span><span class="output">0</span>

这是我的javascript:

<script>
        $(function () {
            $("[data-slider]")
                    .each(function () {
                        var input = $(this);
                        $("<span>")
                                .insertAfter($(this));
                    })
                    .bind("slider:ready slider:changed", function (event, data) {
                        $(this)
                                .nextAll(".output:first")
                                .html(data.value.toFixed(1));
        });
         });
    </script>

    <script>
        $(function () {
            $("[perdata-slider]")
                    .each(function () {
                        var input = $(this);
                        $("<span>")
                                .insertAfter($(this));
                    })
                    .bind("slider:ready slider:changed", function (event, data) {
                        $(this)
                                .nextAll(".output:first")
                                .html(data.value.toFixed(0));
                    });
        });
    </script>
1 个回复

从我从jquery-simple-slider下载的文件中的第91行有一个mouseup事件:

.mouseup(function(e, data) {

只需添加此值即可触发mouseup时返回值:

}).mouseup(function(e) {
   if (_this.dragging) {
      alert(_this.value) //Added line
      _this.dragging = false;
      _this.dragger.removeClass("dragging");
      return $("body").css({
        cursor: "auto"
      });
   }
});

编辑1:

您可以调用一个发送值的函数:

}).mouseup(function(e, data) {
    if (_this.dragging) {
      myAjaxFunction(_this.value)//Added line
      _this.dragging = false;
      _this.dragger.removeClass("dragging");
      return $("body").css({
        cursor: "auto"
      });
    }
});

并创建您自己的ajax函数,该函数将在mouseup事件时触发:

function myAjaxFunction(returnedValue){
    alert("I just release the plot, and the value is: "+returnedValue);
    //your Ajax stuffs
}

编辑2:

好的,因此您的HTML似乎是错误的。 这是我的理解:

HTML(将perdata-slider替换为data-slider,以使其起作用):

<input  type="text" id="MyId" name="Myname" value="" data-slider="true" data-slider-range="0,100" data-slider-highlight="true" data-slider-step="1" /><span></span><span class="output">0</span>

JS(我删除了perdata-slider部分变得毫无用处):

$(function () {
    $("[data-slider]")
            .each(function () {
                var input = $(this);
                $("<span>")
                        .insertAfter($(this));
            })
            .bind("slider:ready slider:changed", function (event, data) {
                $(this)
                        .nextAll(".output:first")
                        .html(data.value.toFixed(1));
    });
});

现在,源插件文件的JS位于js/simple-slider.js (请确保您未在​​页面中调用插件的缩小版本: <script src="js/simple-slider.js"></script>而不是<script src="js/simple-slider.min.js"></script> ):

/*
 jQuery Simple Slider

 Copyright (c) 2012 James Smith (http://loopj.com)

 Licensed under the MIT license (http://mit-license.org/)
*/

var __slice = [].slice,
  __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };

(function($, window) {
  var SimpleSlider;
  SimpleSlider = (function() {

    function SimpleSlider(input, options) {
      var ratio,
        _this = this;
      this.input = input;
      this.defaultOptions = {
        animate: true,
        snapMid: false,
        classPrefix: null,
        classSuffix: null,
        theme: null,
        highlight: false
      };
      this.settings = $.extend({}, this.defaultOptions, options);
      if (this.settings.theme) {
        this.settings.classSuffix = "-" + this.settings.theme;
      }
      this.input.hide();
      this.slider = $("<div>").addClass("slider" + (this.settings.classSuffix || "")).css({
        position: "relative",
        userSelect: "none",
        boxSizing: "border-box"
      }).insertBefore(this.input);
      if (this.input.attr("id")) {
        this.slider.attr("id", this.input.attr("id") + "-slider");
      }
      this.track = this.createDivElement("track").css({
        width: "100%"
      });
      if (this.settings.highlight) {
        this.highlightTrack = this.createDivElement("highlight-track").css({
          width: "0"
        });
      }
      this.dragger = this.createDivElement("dragger");
      this.slider.css({
        minHeight: this.dragger.outerHeight(),
        marginLeft: this.dragger.outerWidth() / 2,
        marginRight: this.dragger.outerWidth() / 2
      });
      this.track.css({
        marginTop: this.track.outerHeight() / -2
      });
      if (this.settings.highlight) {
        this.highlightTrack.css({
          marginTop: this.track.outerHeight() / -2
        });
      }
      this.dragger.css({
        marginTop: this.dragger.outerHeight() / -2,
        marginLeft: this.dragger.outerWidth() / -2
      });
      this.track.mousedown(function(e) {
        return _this.trackEvent(e);
      });
      if (this.settings.highlight) {
        this.highlightTrack.mousedown(function(e) {
          return _this.trackEvent(e);
        });
      }
      this.dragger.mousedown(function(e) {
        if (e.which !== 1) {
          return;
        }
        _this.dragging = true;
        _this.dragger.addClass("dragging");
        _this.domDrag(e.pageX, e.pageY);
        return false;
      });
      $("body").mousemove(function(e) {
        if (_this.dragging) {
          _this.domDrag(e.pageX, e.pageY);
          return $("body").css({
            cursor: "pointer"
          });
        }
      }).mouseup(function(e, data) {
        if (_this.dragging) {
          alert(_this.value)
          _this.dragging = false;
          _this.dragger.removeClass("dragging");
          return $("body").css({
            cursor: "auto"
          });
        }
      });
      this.pagePos = 0;
      if (this.input.val() === "") {
        this.value = this.getRange().min;
        this.input.val(this.value);
      } else {
        this.value = this.nearestValidValue(this.input.val());
      }
      this.setSliderPositionFromValue(this.value);
      ratio = this.valueToRatio(this.value);
      this.input.trigger("slider:ready", {
        value: this.value,
        ratio: ratio,
        position: ratio * this.slider.outerWidth(),
        el: this.slider
      });
    }

    SimpleSlider.prototype.createDivElement = function(classname) {
      var item;
      item = $("<div>").addClass(classname).css({
        position: "absolute",
        top: "50%",
        userSelect: "none",
        cursor: "pointer"
      }).appendTo(this.slider);
      return item;
    };

    SimpleSlider.prototype.setRatio = function(ratio) {
      var value;
      ratio = Math.min(1, ratio);
      ratio = Math.max(0, ratio);
      value = this.ratioToValue(ratio);
      this.setSliderPositionFromValue(value);
      return this.valueChanged(value, ratio, "setRatio");
    };

    SimpleSlider.prototype.setValue = function(value) {
      var ratio;
      value = this.nearestValidValue(value);
      ratio = this.valueToRatio(value);
      this.setSliderPositionFromValue(value);
      return this.valueChanged(value, ratio, "setValue");
    };

    SimpleSlider.prototype.trackEvent = function(e) {
      if (e.which !== 1) {
        return;
      }
      this.domDrag(e.pageX, e.pageY, true);
      this.dragging = true;
      return false;
    };

    SimpleSlider.prototype.domDrag = function(pageX, pageY, animate) {
      var pagePos, ratio, value;
      if (animate == null) {
        animate = false;
      }
      pagePos = pageX - this.slider.offset().left;
      pagePos = Math.min(this.slider.outerWidth(), pagePos);
      pagePos = Math.max(0, pagePos);
      if (this.pagePos !== pagePos) {
        this.pagePos = pagePos;
        ratio = pagePos / this.slider.outerWidth();
        value = this.ratioToValue(ratio);
        this.valueChanged(value, ratio, "domDrag");
        if (this.settings.snap) {
          return this.setSliderPositionFromValue(value, animate);
        } else {
          return this.setSliderPosition(pagePos, animate);
        }
      }
    };

    SimpleSlider.prototype.setSliderPosition = function(position, animate) {
      if (animate == null) {
        animate = false;
      }
      if (animate && this.settings.animate) {
        this.dragger.animate({
          left: position
        }, 200);
        if (this.settings.highlight) {
          return this.highlightTrack.animate({
            width: position
          }, 200);
        }
      } else {
        this.dragger.css({
          left: position
        });
        if (this.settings.highlight) {
          return this.highlightTrack.css({
            width: position
          });
        }
      }
    };

    SimpleSlider.prototype.setSliderPositionFromValue = function(value, animate) {
      var ratio;
      if (animate == null) {
        animate = false;
      }
      ratio = this.valueToRatio(value);
      return this.setSliderPosition(ratio * this.slider.outerWidth(), animate);
    };

    SimpleSlider.prototype.getRange = function() {
      if (this.settings.allowedValues) {
        return {
          min: Math.min.apply(Math, this.settings.allowedValues),
          max: Math.max.apply(Math, this.settings.allowedValues)
        };
      } else if (this.settings.range) {
        return {
          min: parseFloat(this.settings.range[0]),
          max: parseFloat(this.settings.range[1])
        };
      } else {
        return {
          min: 0,
          max: 1
        };
      }
    };

    SimpleSlider.prototype.nearestValidValue = function(rawValue) {
      var closest, maxSteps, range, steps;
      range = this.getRange();
      rawValue = Math.min(range.max, rawValue);
      rawValue = Math.max(range.min, rawValue);
      if (this.settings.allowedValues) {
        closest = null;
        $.each(this.settings.allowedValues, function() {
          if (closest === null || Math.abs(this - rawValue) < Math.abs(closest - rawValue)) {
            return closest = this;
          }
        });
        return closest;
      } else if (this.settings.step) {
        maxSteps = (range.max - range.min) / this.settings.step;
        steps = Math.floor((rawValue - range.min) / this.settings.step);
        if ((rawValue - range.min) % this.settings.step > this.settings.step / 2 && steps < maxSteps) {
          steps += 1;
        }
        return steps * this.settings.step + range.min;
      } else {
        return rawValue;
      }
    };

    SimpleSlider.prototype.valueToRatio = function(value) {
      var allowedVal, closest, closestIdx, idx, range, _i, _len, _ref;
      if (this.settings.equalSteps) {
        _ref = this.settings.allowedValues;
        for (idx = _i = 0, _len = _ref.length; _i < _len; idx = ++_i) {
          allowedVal = _ref[idx];
          if (!(typeof closest !== "undefined" && closest !== null) || Math.abs(allowedVal - value) < Math.abs(closest - value)) {
            closest = allowedVal;
            closestIdx = idx;
          }
        }
        if (this.settings.snapMid) {
          return (closestIdx + 0.5) / this.settings.allowedValues.length;
        } else {
          return closestIdx / (this.settings.allowedValues.length - 1);
        }
      } else {
        range = this.getRange();
        return (value - range.min) / (range.max - range.min);
      }
    };

    SimpleSlider.prototype.ratioToValue = function(ratio) {
      var idx, range, rawValue, step, steps;
      if (this.settings.equalSteps) {
        steps = this.settings.allowedValues.length;
        step = Math.round(ratio * steps - 0.5);
        idx = Math.min(step, this.settings.allowedValues.length - 1);
        return this.settings.allowedValues[idx];
      } else {
        range = this.getRange();
        rawValue = ratio * (range.max - range.min) + range.min;
        return this.nearestValidValue(rawValue);
      }
    };

    SimpleSlider.prototype.valueChanged = function(value, ratio, trigger) {
      var eventData;
      if (value.toString() === this.value.toString()) {
        return;
      }
      this.value = value;
      eventData = {
        value: value,
        ratio: ratio,
        position: ratio * this.slider.outerWidth(),
        trigger: trigger,
        el: this.slider
      };
      return this.input.val(value).trigger($.Event("change", eventData)).trigger("slider:changed", eventData);
    };

    return SimpleSlider;

  })();
  $.extend($.fn, {
    simpleSlider: function() {
      var params, publicMethods, settingsOrMethod;
      settingsOrMethod = arguments[0], params = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
      publicMethods = ["setRatio", "setValue"];
      return $(this).each(function() {
        var obj, settings;
        if (settingsOrMethod && __indexOf.call(publicMethods, settingsOrMethod) >= 0) {
          obj = $(this).data("slider-object");
          return obj[settingsOrMethod].apply(obj, params);
        } else {
          settings = settingsOrMethod;
          return $(this).data("slider-object", new SimpleSlider($(this), settings));
        }
      });
    }
  });
  return $(function() {
    return $("[data-slider]").each(function() {
      var $el, allowedValues, settings, x;
      $el = $(this);
      settings = {};
      allowedValues = $el.data("slider-values");
      if (allowedValues) {
        settings.allowedValues = (function() {
          var _i, _len, _ref, _results;
          _ref = allowedValues.split(",");
          _results = [];
          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            x = _ref[_i];
            _results.push(parseFloat(x));
          }
          return _results;
        })();
      }
      if ($el.data("slider-range")) {
        settings.range = $el.data("slider-range").split(",");
      }
      if ($el.data("slider-step")) {
        settings.step = $el.data("slider-step");
      }
      settings.snap = $el.data("slider-snap");
      settings.equalSteps = $el.data("slider-equal-steps");
      if ($el.data("slider-theme")) {
        settings.theme = $el.data("slider-theme");
      }
      if ($el.attr("data-slider-highlight")) {
        settings.highlight = $el.data("slider-highlight");
      }
      if ($el.data("slider-animate") != null) {
        settings.animate = $el.data("slider-animate");
      }
      return $el.simpleSlider(settings);
    });
  });
})(this.jQuery || this.Zepto, this);

Alert()在第93行。

1 flutter 中的 simple_slider 小部件不起作用

我将 simple_slider 的依赖项添加到依赖项下的 pubspec.yaml 文件( simple_slider simple_slider: "^0.0.1" )。 我安装了它(应用程序运行没有错误)。 但是当我添加以下代码时出现错误。 错误是, 我做的错误在哪里? 谢谢你。 ...

2 mouseup 上的 clearTimeout 不起作用

我想点击一个点并删除它,但是当我按下鼠标按钮 3 秒钟时,我想用这个点做其他事情。 我的问题是,该代码不会清除计时器,它只会在 3 秒后删除该点,无论我在该点上单击多长时间。 我正在使用 setTimeout 和 clearTimeout。 ...

3 MouseDown,然后MouseUp不起作用

我试图将Windows 7应用程序上的鼠标输入重定向到其他窗口。 如果我在获得WM_LBUTTONUP时执行此操作,则它可以正常工作(其中MouseDown和MouseUp是Win api中的SendInput函数): 但是我不想只释放鼠标,我希望能够捕获所有鼠标内容,包括移动和拖动。 ...

4 JQUERY .slider()不起作用-不显示任何内容

我写了这段代码,jQuery没有显示任何内容。 我找不到问题所在。 需要两个带一个手柄的滑块,并设置最小值,最大值和起始值。 没用 jQuery什么都不显示 HTML块 在“ jsfiddle.net”中,我也看不到任何东西。 哪里有错误,但是哪里呢? 编辑 ...

8 Mouseup 事件在 Swiper 中不起作用

我正在使用 Swiper 来显示一些幻灯片,并且我有一些在mouseup上运行的事件,但它们不适用于 Swiper。 当我单击 swiper 容器时,什么也没有发生。 您可以在此示例中看到,警报不起作用: document.body.addEventListener('mouseu ...

10 Mouseup和mousedown在iOS上不起作用

因此,我需要类似以下内容的东西,它基本上是一个2-dir触摸板,用户可以用手指触摸(并保持触摸)以某种方式移动字符。 在我的PC上可以正常运行,但是在iOS上测试时似乎无法正常工作。 原因是,可能是因为没有鼠标,所以mousedown和mouseup不起作用。 还有其他选择吗? 我曾尝试 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM