在Dojo中单击链接打开一个弹出窗口或工具提示

Open a Popup or tooltip onclick of link in Dojo

本文关键字：一个 窗口 工具提示 单击 Dojo 链接      更新时间：2023-09-26

我在网上到处跟随教程来弄清楚这一点，因为我是dojo新手，我知道jquery但dojo，没有办法

我正在跟踪stackoverflow本身的链接，但无法找出代码:

http://stackoverflow.com/questions/18476084/dojo-and-javascript-lightweight-tooltip-in-onclick-on-anchor-tab

我试着写一些代码，但它显示为

showDialog是未定义的。

同时，要求是:

  1. 点击链接，打开链接后面的对话框或工具提示，定位在它附近。

  2. 有一个链接在弹出窗口或工具提示关闭它，所以它实际上应该关闭提示或弹出窗口，

这是我到目前为止的尝试:

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.js"></script>
<script>
dojo.require("dijit.Dialog");
        dojo.addOnLoad(showDialog);
        elliotDialog = new dijit.Dialog({
          title: "My Dialog",
          content: "test content",
          style: "width: 450px"
        });
        showDialog = function(){
            // set the content of the dialog:
            elliotDialog.set("title");
            elliotDialog.set("content");
            elliotDialog.show();
        };
</script>   
<a href="javascript:void(0);" onclick="showDialog();" class="moreLink">More pricing...</a></p>
        <div dojoType="dijit.Dialog" id="elliotDialog" title="More Pricing Option">
        </div>

你的代码中有几个错误:

您声明了一个声明式样式的小部件和一个以编程方式创建的具有相同名称的小部件。删除代码的以下部分:

<div dojoType="dijit.Dialog" id="elliotDialog" title="More Pricing Option">
</div>

你用错了dojo.addOnLoad()。当您想要等待模块和DOM加载时，应该调用dojo.addOnLoad()函数。没有理由在这里调用showDialog()函数。
更糟糕的是，在调用它的那一刻，showDialog()函数甚至不存在，因为您稍后在代码中声明了它。这就是你得到错误的原因:

Uncaught ReferenceError: showDialog is not defined

应该发生的是，你包装你的对话框创建代码和一切依赖于它，在dojo.addOnLoad()函数，例如:

dojo.addOnLoad(function() {
    elliotDialog = new dijit.Dialog({
        title: "My Dialog",
        content: "test content",
        style: "width: 450px"
    });
    showDialog = function(){
        // set the content of the dialog:
        console.log(elliotDialog);
        elliotDialog.set("title");
        elliotDialog.set("content");
        elliotDialog.show();
    };
});

你错误地使用了对话框的setter。在使用dijit/Dialog::set()函数时，应该提供两个参数，一个用于定义要设置的属性，另一个用于定义要使用的值，因此在本例中是要显示的标题和内容。

例如:

elliotDialog.set("title", "My title");
elliotDialog.set("content", "My content");

如果您完成了所有这些操作，那么您的代码应该可以正常工作，如下所示:http://jsfiddle.net/4jnHk/

相关文章：