Dojo Horizo​​ntal Slider - 使用当前滑块值悬停在滑块手柄上的工具提示？

Question

我刚开始使用Dojo小部件。最近，我做了这个Dijit Horizontal Slider Sample，我一直想知道如何使用当前滑块值作为工具提示内容，使用滑块手柄制作工具提示。

我尝试过相同但面临两个问题：

其一，工具提示出现在滑块的末尾，而不是一直悬停在滑块手柄上。

二，工具提示仅在我停止滑动而不是无缝更改时显示一个值。

如何克服这些？

Answer 1

如果您希望工具提示随滑块移动，您必须找到一种方法从滑块手柄而不是整个水平滑块小部件中打开它。我不知道你用鼠标移动的实际滑块是否是它自己的小部件。从在线声明性示例中，句柄的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（）中，如果您可以获得对工具提示的引用，则为滑块的每个值更改更改其中一个工具提示对象的值。