Dojo水平滑块 - 具有当前滑块值的滑块手柄上的工具提示

Question

我刚从Dojo小部件开始。最近，我进行了此Dijit水平滑块样品，我一直在想如何使工具提示按照当前滑块值作为工具提示内容。

。

我尝试过同样的事情，但面临两个问题：

一个，工具提示出现在滑块的末端，而不是不断悬停在滑块上。

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

如何克服这些？

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
            });
        });

编辑：对于您的第二个问题，您可以使用Slider属性OnChange（）每次更改滑块的价值时都会执行某些操作。您必须设置InterMediatiateChanges = true，因此在滑动时调用了Onchange。在您的情况下，在OnChange（）中，如果您可以获取对工具提示的引用，请为滑块的每个值更改而更改工具提示对象的值。