79 lines
2.1 KiB
HTML
79 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html >
|
|
<head>
|
|
|
|
<link rel="stylesheet" href="libs/dijit/themes/tundra/tundra.css">
|
|
<link rel="stylesheet" href="libs/dojox/widget/ColorPicker/ColorPicker.css" />
|
|
|
|
<!-- load Dojo -->
|
|
<script src="libs/dojo/dojo.js"
|
|
data-dojo-config="async: true"></script>
|
|
<script>dojoConfig = {async: true, parseOnLoad: false}</script>
|
|
|
|
<script>
|
|
|
|
var greeting;
|
|
var _fx;
|
|
require([
|
|
"dojo/dom", // for inserting value in TextBox example
|
|
"dojo/parser", // parser because of TextBox decoration
|
|
'dojo/fx',
|
|
"dojo/ready",
|
|
"dijit/form/HorizontalSlider",
|
|
'dojo/domReady!',
|
|
"dijit/form/TextBox", // this we only include to make an example with TextBox
|
|
'dojox/widget/ColorPicker',
|
|
'dijit/form/ToggleButton'
|
|
], function(dom, parser, fx, ready, HorizontalSlider, TextBox, ColorPicker, ToggleButton){
|
|
|
|
parser.parse();
|
|
|
|
// The piece we had before...
|
|
greeting = dom.byId('greeting');
|
|
greeting.innerHTML += ' from <em>Dojo<em>!';
|
|
|
|
var switch1 = new dijit.form.ToggleButton({
|
|
id: 'bla',
|
|
showLabel: true,
|
|
checked: true,
|
|
onChange: function(val){this.set('label',val);},
|
|
label: "on",
|
|
iconClass:'dijitCheckBoxIcon'
|
|
}, "switch1").startup();
|
|
|
|
var slider = new HorizontalSlider({
|
|
name: "slider",
|
|
value: 5,
|
|
minimum: -10,
|
|
maximum: 10,
|
|
intermediateChanges: true,
|
|
style: "width:300px;",
|
|
onChange: function(value){
|
|
dom.byId("sliderValue").value = value;
|
|
}
|
|
}, "slider").startup();
|
|
var c = new dojox.widget.ColorPicker({});
|
|
c.placeAt(document.body); // e.g add the switch to body
|
|
c.startup();
|
|
_fx=fx;
|
|
setTimeout(timeoutFunc, 3000);
|
|
|
|
});
|
|
|
|
function timeoutFunc(fx) {
|
|
// ...but now, with an animation!
|
|
_fx.slideTo({
|
|
node: greeting,
|
|
top: 100,
|
|
left: 400
|
|
}).play();
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="tundra">
|
|
<h1 id="greeting">Hello</h1>
|
|
<div id="slider"></div>
|
|
<p><input type="text" id="sliderValue" data-dojo-type="dijit/form/TextBox" /></p>
|
|
<button id="switch1"></button>
|
|
</body>
|
|
</html> |