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>

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

经过更多的谷歌搜索和试用＆amp;错误我终于得到了这个：

            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打开，但是..我必须单击两次，并且在单击它之外或者在mouseleave之后我无法关闭对话框。

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

我终于设法在我想要的地方弹出它：

            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

有两种方法你可以做到这一点，而且都不是很优雅tbh :-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，link to DropDownButton reference guide。

Answer 2

您可以尝试：

PreviewThread: function (ThreadID) {

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

        dijit.popup.open({ popup: tooltip, around: dojo.byId("thread-preview-" + ThreadID) });
},

只要将鼠标移出对话框，就会关闭对话框。

检查所有可能事件的API： http://dojotoolkit.org/api/

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

2 个答案: