Dojo - 如何在链接点击上以编程方式创建ToolTip对话框

Question

正如标题所说.在我单击链接并将自定义内容加载到该对话框后,我想创建TooltipDialog.工具提示正文是完整的占位符,我只是没有做任何服务器逻辑来处理这个问题.到目前为止,我到了这一步:

            PreviewThread: function (ThreadID) {

            var tooltip = new dijit.TooltipDialog({
                href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation
            });
        },

<a href="javascript:Jaxi.PreviewThread(@thread.ThreadID)" class="preview-thread" id="@tp.ToString()">Preview</a>

重点不在于如何将内容加载到对话框中,而是如何在第一时间打开它？

经过更多的谷歌搜索和反复试验,我终于得到了这个:

            PreviewThread: function (ThreadID) {

            var tooltip = new dijit.TooltipDialog({
                href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation,
                closable: true
            });
            dojo.query(".thread-preview").connect("onclick", function () {
                dijit.popup.open({ popup: tooltip, around: this });
            });            
        },

它以某种方式工作.ToolTipDialog打开,但是..我必须单击两次,并且在单击外部或鼠标移动后我无法关闭对话框.

好的,开始看起来像开发日志,但希望它会为其他人节省一些头条:

我终于设法弹出我想要的地方:

            PreviewThread: function (ThreadID) {

            var tooltip = new dijit.TooltipDialog({
                href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation,
                closable: true
            });

            dijit.popup.open({ popup: tooltip, around: dojo.byId("thread-preview-" + ThreadID) });
        },
<a href="javascript:Jaxi.PreviewThread(@thread.ThreadID)" id="@tp.ToString()" >Click Me</a>

请注意,我使用的是Asp .NET MVC.现在唯一剩下的就是以用户友好的方式关闭该死的东西..

Answer 1

有两种方法可以做到这一点，但是两种方法都不是很优雅：-P

第一个是使用dijit.popup.open()和close()显示和隐藏对话框。在这种情况下，您必须提供所需的坐标。我发现您只为PreviewThread函数提供了线程 ID，但假设您还添加了事件对象，您可以执行以下操作：

PreviewThread: function (ThreadID, event) {

    Jaxi.tooltip = new dijit.TooltipDialog({
        href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation
    });
    dijit.popup.open({
        popup: Jaxi.tooltip, 
        x: event.target.pageX, 
        y: event.target.pageY
    });  
}

当您使用此方法时，您还必须手动关闭弹出窗口，例如当单击外部的某些内容时。这意味着您需要在某个地方引用您的工具提示 dijit，例如Jaxi.tooltip像我上面所做的那样。（旁注：dijit.TooltipDialog 实际上是一个单例，因此页面周围不会有很多隐藏的工具提示）。我通常会得到这样的结果来隐藏我的工具提示对话框。

dojo.connect(dojo.body(), "click", function(event)
{
     if(!dojo.hasClass(event.target, "dijitTooltipContents"))
         dijit.popup.close(Jaxi.tooltip);
});

这当然可能不适合你，所以你必须找出适合你特定安排的东西。

第二种方法是使用 dijit.form.DropDownButton，但将其样式设置为链接。我不打算详细介绍这一点，只需在您的页面上实例化一个 DropDownButton 并使用 Firebug 对其进行调整，直到它看起来像您的常规链接为止。FYC，链接到 DropDownButton 参考指南。