0

次のように、スクロールバー/スライダーにジョグダイヤルのような動作を実装したいと思います。

最初は、ハンドルは「スクロールバー/スライダー」領域の中央に配置されています。ハンドルをクリックして (クリックしたまま) 左または右にドラッグすると、他のアクション (ページ上の別の領域の更新) が実行されます。スライダーを左端または右端にドラッグするほど、もっと早く。マウス ボタンを放すとすぐに、ハンドルがスライダー領域の中央に戻ります。

基本的に、この動作のために利用および拡張できる jquery/ui プラグイン/コンポーネント/スクリプトとして利用できるものはありますか?

明確にするために更新します：

私はすでにhttp://jqueryui.com/demos/slider/のようなスライダーを持っています

このスライダーを次のように動作させたい:

  • スライダーのハンドルは、
  • スライダーをクリックすると、ハンドルを左または右にドラッグできます（マウスボタンを押したままにする限り）
  • マウス ボタンを放すと、スライダーのハンドルが開始位置 (中央/中央) に戻ります。
  • ハンドルが現在どちら側にあるかに応じて、他のコンテンツをスクロールしたいと思います（他のコンテンツはこの質問の一部ではありません）

これが私の意図と質問の説明に役立つことを願っています。

4

2 に答える 2

1

停止イベント ハンドラーでスライダーの値をゼロに戻すと、必要なスナップが返されます。作成したばかりのズーム速度コントロールのコードは次のとおりです。

$('#zoomslider').slider({
    slide: function(event,ui){
            setzoomspeed(ui.value)
        },

    stop: function(event,ui) {
        $('#zoomslider').slider("value",0);
        setzoomspeed(0);
    },  
    min:-20,
    max:20,
    value:0
});
于 2013-09-20T19:56:49.027 に答える
0

jQuery UI Sliderを試す必要があります

changeイベントタブでは、ハンドラーを設定できることがわかります。

次に、ハンドラーでスライダーの現在の値を取得できます。

$( ".selector" ).slider({
   change: function(event, ui) {
       var current_value = ui.value;
       //do something
   }
});
于 2012-08-29T13:25:30.090 に答える