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.
149 lines (133 loc) • 4.11 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Dojo MVC Node Widget Test</title>
<style type="text/css">
@import "../../../dijit/themes/claro/document.css";
@import "../../../dijit/tests/css/dijitTests.css";
.bgRed {
background-color: red;
}
.bgGreen {
background-color: green;
}
.bgBlue {
background-color: blue;
}
.boldText {
font-weight: Bold;
}
</style>
<!-- required: a default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
<script type="text/javascript">
require = {
isDebug: 1,
async: 1,
mvc: {debugBindings: 1}
};
</script>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
<script type="text/javascript">
require([
"dojox",
"dojo/Stateful",
"dojo/parser",
"dojo/date/stamp",
"dojo/date/locale",
"dojox/mvc/parserExtension",
"dojo/domReady!"
], function(dojox, Stateful, parser, stamp){
progressModel = new Stateful({value: 0});
datetimeModel = new Stateful({value: new Date});
colorModel = new Stateful({value: "#000000"});
utcISODateTimeConverter = {
format: function(value){
return stamp.toISOString(value, {zulu: 1});
},
parse: function(value){
return stamp.fromISOString(value);
}
};
localISODateTimeConverter = {
format: function(value){
return stamp.toISOString(value).replace(/[\+\-]\d{2}:\d{2}$/, "");
},
parse: function(value){
return stamp.fromISOString(value);
}
};
isoDateConverter = {
format: function(value){
return stamp.toISOString(value, {selector: "date"});
},
parse: function(value){
var utcDate = stamp.fromISOString(value + "T00:00:00Z"),
current = this.source.value;
return new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate(), current.getHours(), current.getMinutes(), current.getSeconds(), current.getMilliseconds());
}
};
isoTimeConverter = {
format: function(value){
return stamp.toISOString(value, {selector: "time"}).substr(1);
},
parse: function(value){
var utcTime = stamp.fromISOString("1970-01-01T" + value + "Z"),
current = this.source.value;
return new Date(current.getFullYear(), current.getMonth(), current.getDate(), utcTime.getUTCHours(), utcTime.getUTCMinutes(), utcTime.getUTCSeconds(), utcTime.getUTCMilliseconds());
}
};
parser.parse();
});
</script>
</head>
<body class="claro">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<h1>Progress elements</h1>
<div>
Progress:
<progress max="100" data-mvc-bindings="value: at(progressModel, 'value')">Hoge</progress>
</div>
<div>
Meter:
<meter min="0" max="100" low="20" high="80" optimum="50" data-mvc-bindings="value: at(progressModel, 'value')"></meter>
</div>
<div>
Range:
<input type="range" data-mvc-bindings="value: at(progressModel, 'value')">
</div>
<h1>Date/time elements</h1>
<div>
Date/time (UTC):
<input type="datetime" data-mvc-bindings="value: at(datetimeModel, 'value').transform(utcISODateTimeConverter)">
</div>
<div>
Date:
<input type="date" data-mvc-bindings="value: at(datetimeModel, 'value').transform(isoDateConverter)">
</div>
<div>
Time:
<input type="time" data-mvc-bindings="value: at(datetimeModel, 'value').transform(isoTimeConverter)">
</div>
<div>
Date/time (Local):
<input type="datetime-local" data-mvc-bindings="value: at(datetimeModel, 'value').transform(localISODateTimeConverter)">
</div>
<h1>Others</h1>
<div>
Color:
<input type="color" data-mvc-bindings="value: at(colorModel, 'value')">
<output data-mvc-bindings="value: at(colorModel, 'value')"></output>
</div>
<div>
Output (for above progress):
<output data-mvc-bindings="value: at(progressModel, 'value')"></output>
</div>
<div>
Output (for above date):
<output data-mvc-bindings="value: at(datetimeModel, 'value').direction(at.from).transform(dojo.date.locale)"></output>
</div>
</body>
</html>