3

我目前正在使用http://www.eyecon.ro/bootstrap-slider/并且想知道如何禁用/锁定滑块。

<th>    <b>0%</b> <input type="text" class="spiders" value="" data-slider-min="0" data-slider-max="100" data-slider-step="0.1" 

      data-slider-value="43.7" 
         id="sldid7" > <b> 100%</b>  </th>

通过动态检索滑块名称，尝试锁定滑块。试图以这样的方式锁定它，但它不起作用。

$( '#'+$(this).prop('id') ).slider().Disable()
4

1 回答 1

2

我认为您需要自己开发此功能。它不应该那么困难。查看源代码，您可以添加一个名为 disabled 的额外属性，它是一个布尔值。

在构造函数中，我将添加以下内容（示例中的最后一行是我的添加）：

this.min = this.element.data('slider-min')||options.min;
this.max = this.element.data('slider-max')||options.max;
this.step = this.element.data('slider-step')||options.step;
this.value = this.element.data('slider-value')||options.value;

this.disabled = this.element.data('slider-value')||options.disabled; // My addition

然后在 Slider.prototype 中添加新的禁用布尔值：

over: false,
inDrag: false,
disabled: false, // our new property

在此之下，您可以添加几个可以处理控件启用/禁用的方法：

enable: function(){
    this.disabled = false;
},

disable: function(){
    this.disabled = true;
},

现在，在每个处理移动滑块中旋钮的事件的方法中，我们希望他们知道，他们应该什么都不做。因此在方法中：

mousedown: function(ev) {
...
mousemove: function(ev) {
...
mouseup: function(ev) {

我将在方法的顶部包含以下内容：

if (this.disabled){
    return false;
}

这在理论上应该足以提供您想要的功能。不过我还没有测试过。我只是在这里列出它来为您提供一些关于如何自己提供该功能的指示和一些想法。

我希望它可以帮助你更接近你的目标。

于 2013-09-19T11:19:15.790 回答