Dojo - 如何在链接单击时以编程方式创建工具提示对话框

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 对其进行调整，直到它看起来像您的常规链接。财报， link to DropDownButton reference guide .