以编程方式使用dojo中调色板并获得调色板的颜色值

来源：互联网发布：java usb api 编辑：程序博客网时间：2024/05/29 16:30

调色板出现在标题窗格组件中，如果您折叠标题窗格，则不会显示调色板。现在，让我们通过两种方法为调色板添加一个事件处理程序。首先，使用内置的 onClick 属性，在用户选择一种颜色时显示包含选定值的警告窗口。为此，请将您的dojo.ColorPalette 对象的 HTML 元素更改为：<div dojoType="dijit.ColorPalette" onChange="alert(this.value);"></div>。

请保存文件，并将它载入浏览器，随后尝试单击一种颜色。此时应该看到一个警告窗口，其中显示了您选定的颜色的十六进制值。内嵌的事件处理程序非常适合单行操作，但如果您希望执行一些更为复杂的操作，那么这种方法就不太适用。幸运的是，您可以声明dojo/method<script> 块，将 JavaScript 代码添加到您的 Dijit 组件。

然而，这一次，您在 Dijit 组件的 HTML 元素内添加了一个 <script> 块。这里并没有采用传统的 “文本/Javascript” 类型值，而是为其提供了一个dojo/method 值，告知 Dojo 解析器来解析这个代码块。它利用事件属性，定义应将此代码绑定到哪个事件，并使用args 属性将所有参数传递给函数。

<!doctype html><html lang="en" dir="ltr"><head>    <title>Dijit Template</title><link rel="stylesheet" href="dijit/themes/claro/claro.css" /><style type="text/css">body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }</style></head><body class="claro"><div id="myTitlePane"><div id="myColorPalette"></div></div><script src="dojo/dojo.js" djConfig="parseOnLoad: true"></script><script>dojo.require("dijit.dijit");dojo.require("dijit.ColorPalette");dojo.require("dijit.TitlePane");dojo.addOnLoad(function() {var colorPalette = new dijit.ColorPalette({}, "myColorPalette");var titlePane = new dijit.TitlePane({title: "Color Picker",}, "myTitlePane");dojo.connect(colorPalette, "onChange", null, function(evt) {alert(this.value);});});</script></body></html>

0 0