1

我正在尝试编写一个 Dojo 对话框的简单示例。我在这里复制了 Dojo 参考中显示的示例 => http://dojotoolkit.org/reference-guide/1.7/dijit/Dialog.html

我的代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Dialog Test</title>
        <script language="JavaScript" type="text/javascript">
                dojo.require("dojo.parser");
                dojo.require("dojox.widget.Dialog");
                dojo.require("dijit.form.Button");
                dojo.require("dijit.layout.TabContainer")
                dojo.require("dijit.layout.ContentPane")
        </script>
    </head>
    <body>
        <div id="dialogOne" dojoType="dojox.widget.Dialog" title="My Dialog Title">
            <div dojoType="dijit.layout.TabContainer" style="width: 200px; height: 300px;">
                <div dojoType="dijit.layout.ContentPane" title="foo">Content of Tab "foo"</div>
                <div dojoType="dijit.layout.ContentPane" title="boo">Hi, I'm Tab "boo"</div>
            </div>
        </div>
        <p>When pressing this button the dialog will popup:</p>
        <button id="buttonOne" dojoType="dijit.form.Button">Show me!
            <script type="dojo/method" event="onClick" args="evt">
                // Show the Dialog:
                dijit.byId("dialogOne").show();
            </script>
        </button>
    </body>
</html>

当页面在浏览器中加载时，对话框不起作用。我只是看到选项卡式窗格中的文本出现在浏览器中。

我已经完全复制了参考指南中的代码，所以我很困惑。有什么建议么？

谢谢。

詹姆士。

4

1 回答 1

0

不幸的是，Dojo 样本往往不能完全“按原样”工作，而是需要用各种标准的仪式来包装的一些骨架代码。

您至少有三件事导致它无法正常工作和渲染。上面可能还有其他问题，但这些肯定会导致它无法渲染：

  1. 您需要链接到核心 Dojo 脚本的一个版本。链接到 CDN 版本是一种简单的方法。例如<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>。详细信息在这里：http ://dojotoolkit.org/download/ 。请务必将其放在您的require脚本之前。
  2. 在页面中添加指向 Dijit 主题样式表（CSS 文件）的链接，否则任何小部件都无法正确显示。例如<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css‌​"/>
  3. 在 body 元素上添加一个class属性，描述您要使用的主题。例如<body class="claro">。

只有当你完成了所有这三件事时，它才有机会工作。可能还有其他问题，但它们是基本的三个。

于 2013-01-24T16:53:52.900 回答