You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
4.0 KiB
148 lines
4.0 KiB
<!DOCTYPE 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>
|
|
|