結合「limitslider」和「jQuery-ui-Slider-Pips」jQuery UI擴展

Question

我想將Limitslider和jQuery-ui-Slider-Pips（jQuery UI slider widget的兩個擴展）組合到一個滑塊中。

不幸的是，兩個擴展都採用不同的方法來擴展基礎庫。 jQuery-ui-Slider-Pips使用$.extend()向$.ui.slider.prototype添加其他方法，而Limitslider定義了一個新的jQuery UI小部件並重新使用原始滑塊的一部分。這使得兩者結合起來很困難。

我嘗試了幾種辦法讓它工作，但他們都至今沒...

---

1日的嘗試，「我不知道這是否正常工作」

$('#slider').limitslider().slider('pips'); 

這一個可以理解的是沒有工作，因爲在極限滑道原型中沒有「點子」功能。

---

第2次嘗試， 「我應該能夠做到這一點，對不對？」

var extensionMethods = { 
    pips: $.ui.slider.prototype.pips, 
    float: $.ui.slider.prototype.float 
}; 
$.extend(true, $.vanderlee.limitslider.prototype, extensionMethods); 
$('#slider').limitslider().limitslider('pips'); 

與jQuery的UI的滑塊點子提供不利於擴展方法Limitslider，因爲這些方法在內部使用原來的「滑塊（）」方法和「滑蓋」的命名空間。 （我甚至嘗試重構了jQuery UI的滑塊，點子代碼，改變「滑蓋」引用「limitslider」，但我不能使它工作。）

---

第三嘗試，「爲什麼沒」我以前想過這個嗎？「

var extensionMethods = { 
    pips: $.ui.slider.prototype.pips, 
    float: $.ui.slider.prototype.float 
}; 
$.widget('ui.slider', $.extend({}, $.vanderlee.limitslider.prototype, extensionMethods)); 
$('#slider').slider().slider('pips'); 

重新定義了原有ui.slider作爲jQuery的UI的滑塊基本點和Limitslider的合併，結果似乎是這樣一個好主意。不幸的是，它只返回錯誤（Chrome：「Uncaught RangeError：最大調用堆棧大小超出」，Firefox：「遞歸太多」）。我想它會觸發一個無限循環。

---

問題：什麼是這樣的，如果有的話，使這兩個擴展一起工作？

Answer 1

我不相信這兩個人能夠很好地一起工作，但是我已經快速地看了一眼，很明顯看到你走在正確的軌道上！

Limit Slider是一個instanceof $.ui.slider，這意味着它應該繼承原型鏈（包括pips/floats）。在檢查限制滑塊實例的數據後，我可以確認這是真實的。

您可以通過使用$(".myslider").data()來訪問滑塊的實例。

你需要（而且是半工作）的代碼是：

var $slider = $(".myslider").limitslider({ 
    min: 0, 
    max: 30, 
    gap: 2, 
    values: [10, 15] 
}); 

var sliderInstance = $slider.data().vanderleeLimitslider; 
sliderInstance.pips(); 
sliderInstance.float(); 

https://jsfiddle.net/64n6u20q/1
^^^ Working Fiddle.

買者;這隻對Pips有視覺效果，我不確定它會繼續使用Limit Slider中的更復雜設置。你必須嘗試。

更多注意事項;由於處理事件，我可以看到一堆錯誤。這應該是由於Limit Slider未實現相同的事件接口，或者它正在刪除該事件。無論哪種方式，我建議你找出一種方法來禁用這些事件（$.off()應該是足夠的）。