2016-12-15 1 views
0

私はDojoウィジェットから始めました。最近、私はこれをしたDijit Horizontal Slider Sample、と私は、ツールチップの内容として現在のスライダの値でスライダのハンドルに続くツールチップを作る方法が不思議に思っています。Dojo水平スライダ - 現在のスライダ値でスライダハンドルにカーソルを合わせるためのツールチップですか?

私は同じことを試してみましたが、2つの問題直面しています:

一つを、ツールチップは、スライダーの最後に表示されるのではなく、絶えずスライダーハンドルの上にホバリング。

2つのツールチップは、シームレスに切り替えるのではなく、スライドを止めるときにだけ値を表示します。

これを解決するにはどうすればよいですか?

答えて

0

スライダでツールチップを動かすには、水平スライダウィジェット全体ではなく、スライダハンドルからツールチップを開く方法を見つけなければなりません。あなたがマウスで動かす実際のスライダーがそれ自身のウィジェットかどうかはわかりません。オンライン宣言型のサンプルからハンドルのためのHTMLは、この

<div data-dojo-attach-point="sliderHandle,focusNode" class="dijitSliderImageHandle dijitSliderImageHandleH" data-dojo-attach-event="press:_onHandleClick" role="slider" aria-valuemin="-10" aria-valuemax="10" tabindex="0" aria-valuenow="4" style="position: absolute;"></div> 

のように見えますが、sliderHandleオブジェクトへの参照を取得することができればそれで、あなたは、次のようなものを試すことができます。

/* 
* Create the tooltip dialog that you want to show (I use tooltip dialog, 
* but you can do the same with basic tooltip) 
*/ 
var myTooltipDialogbase = new ttdialog({ 
    id: 'myTooltipDialogBase', 
    style: "width: 275px;" 
}); 

あなたのイベントハンドラ(この例では、マウスの右クリック)でポップアップ

 /** 
     * On right mouse click, opens the tooltip dialog 
     */ 
     on(sliderHandle, 'contextmenu', function (event) { 

      popup.open({ 
       parent: sliderHandle, 
       popup: myTooltipDialogbase, 
       around: sliderHandle.domNode 
      }); 

     }); 

EDIT開き:あなたの2番目の質問について を、あなたはスライダープロパティのonChangeを(使用することができます)スライダーの値が変わるたびに何かをする。スライドするときにonChangeが呼び出されるように、intermediateChanges = trueを設定する必要があります。あなたの場合は、onChange()で、ツールチップへの参照を取得できる場合は、スライダの値の変更ごとにツールチップオブジェクトの1つの値を変更します。

+0

ありがとう...私はそれを試してみるつもりです。 – ShyProgrammer

+0

あなたが気にしない限り、ステートフルなしで値を設定するだけで、テキストボックスの値は常に更新されます。なぜそうなのか? – ShyProgrammer

+0

@ShyProgrammerああ、申し訳ありませんでしたその例を参照して、私の記事の編集を参照してください。 – erotavlas

関連する問題