Dojo水平滑塊 - 提示將鼠標懸停在當前滑塊值的滑塊手柄上的工具提示？

我剛剛開始使用Dojo小部件。最近，我做了這個Dijit Horizontal Slider Sample，我一直想知道如何使用當前滑動條值作爲工具提示內容來創建工具提示。Dojo水平滑塊 - 提示將鼠標懸停在當前滑塊值的滑塊手柄上的工具提示？

我已經試過相同的，但現在面臨兩個問題：

一，工具提示出現在滑塊的結束，而不是不斷地徘徊在滑塊手柄。

二，只有當我停止滑動而不是無縫地改變時，工具提示纔會顯示一個值。

如何克服這些？

來源

2016-12-15 ShyProgrammer

如果您希望工具提示隨滑塊一起移動，您必須找到一種方法來從滑塊手柄中打開它，而不是從整個水平滑塊控件中打開它。我不知道用鼠標移動的實際滑塊是否是自己的小部件。從聲明樣品在線手柄的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 
      }); 

     });

編輯：關於第二個問題，你可以使用滑塊屬性的onChange（）每當滑塊的值發生變化時執行一些操作。您必須設置intermediateChanges = true，以便在滑動時調用onChange。在你的情況下，在onChange（）中，如果你可以得到對工具提示的引用，那麼改變滑塊每次改變值的工具提示對象的值。

來源

2016-12-15 16:10:16 erotavlas

謝謝...我會試試看。 – ShyProgrammer

如果你不介意的話，一個簡單的問題是，通過只設置沒有Stateful的值來不斷更新文本框的值。爲什麼這樣？ – ShyProgrammer

@ShyProgrammer對不起，沒有看到這個例子，看到我的文章中的編輯。 – erotavlas

Dojo水平滑塊 - 提示將鼠標懸停在當前滑塊值的滑塊手柄上的工具提示？

回答

相關問題