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

时间:2014-07-18 14:48:17

标签: javascript dojo

我正在网上随处可见教程,因为我是dojo的新手,我知道jquery但是Dojo,没办法

我正在关注stackoverflow本身的链接,但无法完成代码:

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

我试过拧一些代码,但是它说是

showDialog未定义..

此外,要求是:

  1. 点击链接,在链接后面打开对话框或工具提示,靠近它。

  2. 在关闭它的弹出窗口或工具提示中有一个链接,所以它应该实际关闭toltip或popup,

  3. 这是我的尝试直到现在:

    <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>
    

1 个答案:

答案 0 :(得分:1)

您的代码中存在多个错误:

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

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

您未正确使用对话框的设置者。使用dijit/Dialog::set()函数时,您应该提供两个参数,一个用于定义要设置的属性,另一个用于您要使用的值,因此在这种情况下,您要显示标题和内容。 / p>

例如:

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

如果你做了所有这些,你的代码应该可以正常工作,正如你在下面的小提琴中看到的那样:http://jsfiddle.net/4jnHk/