Question

我希望能够在单击应用程序中的链接时启动弹出窗口或对话框 - 我想在此窗口中添加一个水平滑块，以便用户可以调整显示的数据。我一直在研究各种dijit小部件，但我不确定什么会起作用，我试图测试一些小部件，如dialog，TooltipDialog，但没有得到任何结果。我也是javascript的新手，所以我的编码不是最好的。如果有人有建议，我正在寻找一些有用的样品。我试着从dojo网站上的示例代码开始，但是还没有能够让它工作，我知道我错过了什么。

下面是一个示例，我在尝试使用链接进行测试之前尝试在按钮（从dojo网站获取的代码）上创建一个对话框。我一直收到错误myDialog is not defined。即使我把var放在myDialog之前，我仍然会得到同样的错误。

<!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.7.1/dojo/dojo.js"></script>

    <script>
require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){
    var myDialog = new Dialog({
        title: "My Dialog",
        content: "Test content.",
        style: "width: 300px"
    });
});
    </script>
</head>
<body class="claro">
    <button onclick="myDialog.show();">show</button>
</body>
</html>

Answer 1

您可以使用kendo-ui。在谷歌上查找kendo-ui文档

Answer 2

您的代码中存在几个错误。

1）使用错误的样式正文标记具有claro样式，您可以在链接标记中请求tundra。

<body class="claro">

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

需要更改其中一个。
将链接标记更改为claro样式表。 e.g

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

myDialog是本地范围的。

在函数内使用var关键字声明的任何变量仅在函数内可用。

function(Dialog){
    var myDialog = new Dialog({...
}

变量myDialog在函数外部不可见。要将myDialog设为全局，您需要删除var keyword.e.g

myDialog = new Dialog({....

在链接点击，javascript上创建一个对话框

2 个答案: