dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
53 lines (40 loc) • 2.29 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>ColorPalette Test</title>
<script src="boilerplate.js" data-dojo-config="extraLocale: ['en-us', 'es-mx']"></script>
<script type="text/javascript">
require(["dojo/dom", "dojo/parser", "dijit/ColorPalette", "dojo/domReady!"],
function(dom, parser, ColorPalette){
setColor = function(color){
var theSpan = dom.byId("outputSpan");
theSpan.style.color = color;
theSpan.innerHTML = color;
};
parser.parse();
var date0 = new Date();
var palette = new ColorPalette({palette: "7x10", id: "prog", "aria-label": "programatic label"}, "programPalette");
console.log("creation time for 7x10 palette: " + (new Date() - date0) );
});
</script>
</head>
<body class="claro" role="main">
<h1 class="testTitle">dijit.ColorPalette test:</h1>
<p>Large color palette (7x10), English tooltips:</p>
<label for="beforeBig">label:</label><input id="beforeBig" value="for tabIndex testing"/>
<div id="big" data-dojo-type="dijit/ColorPalette" data-dojo-props='onChange:function(){ setColor(this.value); }, lang:"en-us", "aria-label":"This is the palette label"'></div>
<label for="afterBig">Test color is:</label> <span id="outputSpan"></span>.
<input id="afterBig" value="for tabIndex testing"/>
<p>Small color palette (3x4), Spanish tooltips:</p>
<label for="beforeSmall">label:</label><input id="beforeSmall" value="for tabIndex testing"/>
<div id="small" data-dojo-type="dijit/ColorPalette" data-dojo-props='palette:"3x4", lang:"es-mx","aria-label":"Small color palette"'></div>
<label for="afterSmall">label:</label><input id="afterSmall" value="for tabIndex testing"/>
<p>Default color palette (7x10) created programatically:</p>
<div id="programPalette"></div>
<p>ColorPalette with value pre-selected, using old style parser parameters:</p>
<label for="beforeValuePreselected">label:"</label><input id="beforeValuePreselected" value="for tabIndex testing"/>
<label for="valuePreselected">label for color palette</label><div id="valuePreselected" dojoType="dijit.ColorPalette" value="#0000ff"></div>
<label for="afterValuePreselected">label:</label><input id="afterValuePreselected" value="for tabIndex testing"/>
</body>
</html>