2017-05-14 15 views
1

jQuery UI slider widgetの2つの拡張子を1つのスライダに組み合わせるといいですか?LimitsliderjQuery-ui-Slider-Pipsを結合します。"limitslider"と "jQuery-ui-Slider-Pips" jQuery UI拡張を組み合わせる

残念ながら、どちらの拡張も、基本ライブラリを拡張するために異なるアプローチを採用しています。 jQuery-ui-Slider-Pipsは$.extend()を使用して$.ui.slider.prototypeにメソッドを追加しますが、Limitsliderは新しいjQuery UIウィジェットを定義し、元のスライダの一部を再利用します。これにより、2つを組み合わせることが困難になります。

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

この1を「これが動作するかどうか、私は疑問に思う」、


第一の試み...私はそれを動作させるには、いくつかの方法を試してみましたが、それらはすべて、これまでに失敗しましたlimitliderプロトタイプに「ピップ」機能がないので、理解できないほどうまく機能しませんでした。


第二の試みは、 "私は右、これを行うことができるでしょうか?"これらのメソッドは、内部的に、元の「スライダー()」メソッドと「スライダー」の名前空間を使用するので、助けにならないのjQuery-UI-スライダー-ピップによって提供された方法でLimitsliderの拡張

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

。 (私も「limitslider」と「スライダー」の参照を変更し、jQueryの-UI-スライダー・ピップコードをリファクタリングしようとしたが、私はそれを動作させることができませんでした。)


第三の試みを、「なぜ」didnの私はこれを前に考えていますか? " jQueryの-UI-スライダー-ピップとLimitsliderのマージ結果として、元ui.sliderを再定義

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

は、このような良いアイデアのように思えました。残念ながら、エラー(Chrome: "Uncaught RangeError:最大呼び出しスタックサイズを超えました"、Firefox: "再帰が多すぎます")だけが返されます。私はそれが無限ループを引き起こすと思う。


質問:これら2つの拡張が一緒に動作させるための方法は、もしあれば、何ですか?

答えて

1

私はこれらの2つがうまく一緒に動作するとは確信していませんが、私はすばやく見てきました。

リミットスライダは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でのみ視覚的に機能し、リミットスライダーからさらに複雑な設定で引き続き動作するかどうかはわかりません。実験する必要があります。

その他の警告;私はイベントの処理のためにエラーの束を見ることができます。これは、制限スライダーが同じイベントインターフェイスを実装していないか、そのイベントを削除しているためです。いずれにしても、これらのイベントを無効にする方法を見つけることをお勧めします($.off()で十分です)。

+0

ありがとうございます!細部の作業を続けていくつもりです。私はあなたのフィドルで問題に気付いた...フロートは、ハンドルをスライドさせるとその値を更新しません。コンソールに「originalMousedown is not function」と表示されます。 2回目の試みで遭遇した問題のように見えます。 – marcvangend

+0

フォローアップ:私は2つの拡張を結合しないで終わった、私はどちらか一方の方法でエラーに走り続けた。私は現在、jQuery-ui-Slider-Pipsを使用しており、カスタムコードでいくつかのLimitslider-ish機能を実装しています(例:http://stackoverflow.com/a/44102147/241546)。 – marcvangend

関連する問題