Fatal编程技术网
  • javascript/
  • 创建链接点击对话框，javascript第2部分

创建链接点击对话框，javascript第2部分

javascript hyperlink dojo

创建链接点击对话框，javascript第2部分,javascript,hyperlink,dojo,dialog,Javascript,Hyperlink,Dojo,Dialog,感谢Frank对我的原始帖子的回答，我得到了从按钮启动对话框的示例代码。现在我想通过点击链接启动一个对话框。我曾尝试向在单击链接时运行的代码中添加一个函数，但它只是启动了一个带有服务器错误的空白页。怎么了 <!DOCTYPE html> <html > <head> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/

感谢Frank对我的原始帖子的回答，我得到了从按钮启动对话框的示例代码。现在我想通过点击链接启动一个对话框。我曾尝试向在单击链接时运行的代码中添加一个函数，但它只是启动了一个带有服务器错误的空白页。怎么了

<!DOCTYPE html>
<html >
<head>

    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/tundra/tundra.css"/>

    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js"></script>

    <script type="text/javascript"> 

require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){

var myDialog2;

     myDialog = new Dialog({
        id: "MyDialog",
        title: "Adjust Transparency",
        content: "Test content.",
        style: "width: 300px"
    });


function showDialog() {
        myDialog2 = new Dialog({
        id: "MyDialog2",
        title: "Adjust Transparency",
        content: "Test content.",
        style: "width: 300px"
    });
    myDialog2.show();

}

});

    </script>
</head>
<body class="tundra">
    <button onclick="myDialog.show();">show</button>
    <a href="javascript:void();"onclick="showDialog();">show</a>
</body>
</html>
您的错误在于您使用的javascript:void0错误，而不是

 <a href="javascript.void();"onclick="showDialog();">show</a>
添加此函数，则不会引发错误，此时将出现id为MyDialog的对话框

更新3

正如frank所说，您需要将showDialog放在require上下文之外的函数中，并且需要调用正确的方法来显示对话框

你的新代码应该是这样的我在本地测试它，它100%工作

<!DOCTYPE html>
<html >
<head>

    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/tundra/tundra.css"/>

    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js"></script>

    <script type="text/javascript">
//这是您将showDialog函数置于要求之外的地方。 var显示对话框

require(["dijit/Dialog", "dijit/form/HorizontalSlider", "dijit/registry","dojo/domReady!"], function(Dialog, HorizontalSlider, registry){

        var imageSlider = new HorizontalSlider({
                value: 7,
                minimum: 0,
                maximum: 10,
                intermediateChanges: true,
                discreteValues: 11,
                showButtons: true,
                style: "width:200px;",
                //onChange: lang.hitch(this, function(value) {
                    //imageServiceLayer.setOpacity(value / 10); 
                //})
            }, "imageSlider");
            imageSlider.startup();

     myDialog = new Dialog({
        id: "MyDialog",
        title: "Image Opacity",
        content: imageSlider,
        style: "width: 225px"
    });
//here you create the function
      showDialog = function(){

//and this is how you call the dialog to show, you did it right in the button but not inside the function
         myDialog.show();
    }
});

    </script>
</head>
<body class="tundra">
    <button onclick="myDialog.show();">show</button>
    <a href="javascript:void(0)"onclick="showDialog();">show</a>
</body>
</html>
正如sixtyfootersdude所说的，您不需要使用registry.byId，我在这里插入它是为了让您理解，如果您知道该ID，您可以在上下文之外显示对话框，但无论如何，情况并非如此

这会起作用。

如果我是你，我会删除你对dijit注册表的依赖。这是一种管理小部件的糟糕方法。我想更新一下：

require(["dijit/Dialog", "dijit/form/HorizontalSlider", "dojo/domReady!"], function(Dialog, HorizontalSlider) {

    var imageSlider = new HorizontalSlider({
            ...
    }, "imageSlider");
    imageSlider.startup();

    myDialog = new Dialog({
            ...
    });

    function showDialog() {
        console.log("You already have a reference to dialog.  It is in the same closure as this.  Dialog", myDialog);
        myDialog.showDialog();
    }
});
现在您报告得到：

未捕获引用错误：未定义showDialog'：

这是在您定义的showDialog函数上还是在myDialog.showDialog上？

谢谢，我刚才注意到链接中javascript后面没有冒号。我确实按照你的建议加了零，那是什么意思？仍然有相同的错误，showDialog未定义这是一个不同的错误，您不能调用showDialog；从锚定标记创建小部件，而不指定要打开的对话框。我将更新第二个问题的答案我尝试了更新中的代码2，但仍然得到相同的错误？我将发布我的更新代码above@KLD你犯的错误和你上一个问题一样吗？您正在另一个函数中定义showdialog函数。因此，它有一个局部范围，对锚定标记不可见。您需要将其设置为全局函数或将其分配给全局变量。如何将其设置为全局函数-在函数外部声明var myFunction，然后将其设置为与函数相等？ 
<!DOCTYPE html>
<html >
<head>

    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/tundra/tundra.css"/>

    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js"></script>

    <script type="text/javascript"> 

require(["dijit/Dialog", "dijit/form/HorizontalSlider", "dijit/registry","dojo/domReady!"], function(Dialog, HorizontalSlider, registry){

        var imageSlider = new HorizontalSlider({
                value: 7,
                minimum: 0,
                maximum: 10,
                intermediateChanges: true,
                discreteValues: 11,
                showButtons: true,
                style: "width:200px;",
                //onChange: lang.hitch(this, function(value) {
                    //imageServiceLayer.setOpacity(value / 10); 
                //})
            }, "imageSlider");
            imageSlider.startup();

     myDialog = new Dialog({
        id: "MyDialog",
        title: "Image Opacity",
        content: imageSlider,
        style: "width: 225px"
    });
//here you create the function
      showDialog = function(){

//and this is how you call the dialog to show, you did it right in the button but not inside the function
         myDialog.show();
    }
});

    </script>
</head>
<body class="tundra">
    <button onclick="myDialog.show();">show</button>
    <a href="javascript:void(0)"onclick="showDialog();">show</a>
</body>
</html>

require(["dijit/Dialog", "dijit/form/HorizontalSlider", "dojo/domReady!"], function(Dialog, HorizontalSlider) {

    var imageSlider = new HorizontalSlider({
            ...
    }, "imageSlider");
    imageSlider.startup();

    myDialog = new Dialog({
            ...
    });

    function showDialog() {
        console.log("You already have a reference to dialog.  It is in the same closure as this.  Dialog", myDialog);
        myDialog.showDialog();
    }
});