jQuery UI - 滑塊 - 如何添加值

fiddle - 我有一組值。是否有可能添加新的句柄或刪除其中的一些而不破壞和重建幻燈片實例？jQuery UI - 滑塊 - 如何添加值

類似$('#slider').slider('addValueAt',5);或刪除。

新值不能等於任何實際值，因此可能不會超過12個值。

其自定義代碼我已經得到了許可。

$(function() { 
    var handlers = [0, 2, 4 , 9, 12]; 
    $("#slider").slider({ 
     min: 0, 
     max: 12, 
     values: handlers, 
     slide: function (evt, ui) { 
      for (var i = 0, l = ui.values.length; i < l; i++) { 
       if (i !== l - 1 && ui.values[i] + 1 > ui.values[i + 1]) { 
        return false; 
       } 
       else if (i === 0 && ui.values[i] + 1 < ui.values[i - 1]) { 
        return false; 
       } 
      } 
     } 
    }); 
});

我已經試過

$("#slider").slider('option','values', newArrayOfValues);

但它只是移動的實際值，而不是刪除或添加新的

來源

2013-10-13 pie6k

我沒有看到任何方式來實現這個使用jQuery UI滑塊中的當前功能。已經有一張票（http://bugs.jqueryui.com/ticket/4779）在他們的網站上提出這個問題。還有一種替代方法。看到這個問題：http://stackoverflow.com/questions/9590929/how-to-add-multiple-handles-to-a-jquery-slider-on-the-fly – Foreever

如果你可以升級到jQuery用戶界面的1.10.x版本，你」 d能夠做到以下幾點：

(function ($) { 
    $.widget('my-namespace.customSlider', $.ui.slider, { 
     addValue: function(val) { 
      //Add your code here for testing that the value is not in the list 
      this.options.values.push(val); 
      this._refresh(); 
     }, 
     removeValue: function() { 
      this.options.values.pop(); 
      this._refresh(); 
     } 
    }); 
})(jQuery);

之後，你可以像這樣使用它：

個

$("#slider").customSlider({/* options */});

並添加值：

$("#slider").customSlider('addValue', 5);

在這段代碼中，我們正在創建一個從現有的jQuery UI的滑塊繼承了一個新的滑塊控件。在addValue方法中，它手動更新小部件的內部值數組，然後調用原始jQuery-ui滑塊的private _refresh（）方法，這是創建小部件時滑塊首先生成控點的方式。 _refresh（）方法被添加到jQuery ui的更新版本之一中。如果你不能升級，這種技術仍然是可能的，但你必須編寫代碼來注入標記並綁定拖拽事件。

這裏是顯示這個動作http://jsfiddle.net/ac2A3/5/

你的代碼來處理幻燈片事件會有，因爲它依賴於widget的值，以便爲改變一點點小提琴。

來源

2014-04-01 21:55:07 Brett

jQuery UI - 滑塊 - 如何添加值

回答

相關問題