Question

我正在尝试编写一个Dojo对话框的简单示例。我复制了Dojo引用中显示的示例here =＆gt; 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>

在浏览器中加载页面时，Dialog不起作用。我只是看到标签窗格中的文字出现在浏览器中。

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

感谢。

詹姆斯。

Answer 1

遗憾的是，Dojo样本往往不能完全“按原样”工作，但是需要在各种标准的仪式中包含一些骨架代码。

你至少有三件事情导致这种情况无法正常工作和渲染。顶部可能还有其他问题，但这些肯定会导致它不呈现：

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

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

Dojo对话框显示为静态网页

1 个答案: