dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
80 lines (68 loc) • 2.34 kB
HTML
<html>
<head>
<title>Dojox ColorPicker Test</title>
<!-- required: a default theme file, and ColorPicker css -->
<link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="../ColorPicker/ColorPicker.css">
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
#absolutey {
position:absolute;
top: 62px;
left: 362px;
}
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad:1,isDebug:1,async:1"></script>
<script type="text/javascript">
require([
"dojo",
"dijit",
"dijit/form/Button",
"dojox/widget/ColorPicker",
"dojo/parser"], function(dojo,dijit){
dojo.ready(function(){
dojo.connect(dijit.byId("testFocusButton"), "onClick", function(){
dijit.byId("picker").focus();
});
});
});
var handler = function(val,id){
dojo.byId(id).value = val;
};
</script>
</head>
<body class="tundra">
<h1 class="testTitle">Dojox ColorPicker test</h1>
<h3>defaults:</h3>
<div id="picker" dojoType="dojox.widget.ColorPicker"
value="#9ebf6c"
onChange="handler(arguments[0],'onchangeOne')"
></div>
<p>Current value: <input readonly="true" id="onchangeOne" value="???" /></p>
<h3>no animation, no hsv, no rgb, no webSafe info:</h3>
<div id="pickerToo" dojoType="dojox.widget.ColorPicker"
animatePoint="false"
showHsv="false"
showRgb="false"
webSafe="false"
onChange="handler(arguments[0],'onchangeTwo')"
></div>
<p>Current value: <input readonly="true" id="onchangeTwo" value="???" /></p>
<h3>Fires onChange a lot:</h3>
<div id="pickerLive" dojoType="dojox.widget.ColorPicker"
webSafe="false"
liveUpdate="true"
onChange="handler(arguments[0],'onchangeThree')"
></div>
<p>Current value: <input readonly="true" id="onchangeThree" value="???" /></p>
<div id="absolutey">
<h3>To See how it positions in an absolute node (editor plugin, input popup)</h3>
<input dojoType="dojox.widget.ColorPicker" value="#ededed">
</div>
<button id="testFocusButton" type="button" dojoType="dijit.form.Button">Click to focus first widget</button>
<p>that's all folks!</p>
</body>
</html>