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

最新推荐文章于 2018-04-20 22:32:05 发布

qingqingzijinxin

最新推荐文章于 2018-04-20 22:32:05 发布

阅读量1k

点赞数

分类专栏： dojo学习文章标签： dojo dijit

dojo学习专栏收录该内容

29 篇文章 1 订阅

订阅专栏

调色板出现在标题窗格组件中，如果您折叠标题窗格，则不会显示调色板。现在，让我们通过两种方法为调色板添加一个事件处理程序。首先，使用内置的 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>