source: Dev/trunk/src/client/dojox/mvc/tests/test_mvc_HTML5Element.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 4.0 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5        <title>Dojo MVC Node Widget Test</title>
6
7        <style type="text/css">
8                @import "../../../dijit/themes/claro/document.css";
9                @import "../../../dijit/tests/css/dijitTests.css";
10
11                .bgRed {
12                        background-color: red;
13                }
14
15                .bgGreen {
16                        background-color: green;
17                }
18
19                .bgBlue {
20                        background-color: blue;
21                }
22
23                .boldText {
24                        font-weight: Bold;
25                }
26        </style>
27
28        <!-- required: a default dijit theme: -->
29        <link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
30
31        <script type="text/javascript">
32                require = {
33                        isDebug: 1,
34                        async: 1,
35                        mvc: {debugBindings: 1}
36                };
37        </script>
38
39        <!-- required: dojo.js -->
40        <script type="text/javascript" src="../../../dojo/dojo.js"></script>
41
42        <script type="text/javascript">
43                require([
44                        "dojox",
45                        "dojo/Stateful",
46                        "dojo/parser",
47                        "dojo/date/stamp",
48                        "dojo/date/locale",
49                        "dojox/mvc/parserExtension",
50                        "dojo/domReady!"
51                ], function(dojox, Stateful, parser, stamp){
52
53                        progressModel = new Stateful({value: 0});
54                        datetimeModel = new Stateful({value: new Date});
55                        colorModel = new Stateful({value: "#000000"});
56
57                        utcISODateTimeConverter = {
58                                format: function(value){
59                                        return stamp.toISOString(value, {zulu: 1});
60                                },
61                                parse: function(value){
62                                        return stamp.fromISOString(value);
63                                }
64                        };
65
66                        localISODateTimeConverter = {
67                                format: function(value){
68                                        return stamp.toISOString(value).replace(/[\+\-]\d{2}:\d{2}$/, "");
69                                },
70                                parse: function(value){
71                                        return stamp.fromISOString(value);
72                                }
73                        };
74
75                        isoDateConverter = {
76                                format: function(value){
77                                        return stamp.toISOString(value, {selector: "date"});
78                                },
79                                parse: function(value){
80                                        var utcDate = stamp.fromISOString(value + "T00:00:00Z"),
81                                         current = this.source.value;
82                                        return new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate(), current.getHours(), current.getMinutes(), current.getSeconds(), current.getMilliseconds());
83                                }
84                        };
85
86                        isoTimeConverter = {
87                                format: function(value){
88                                        return stamp.toISOString(value, {selector: "time"}).substr(1);
89                                },
90                                parse: function(value){
91                                        var utcTime = stamp.fromISOString("1970-01-01T" + value + "Z"),
92                                         current = this.source.value;
93                                        return new Date(current.getFullYear(), current.getMonth(), current.getDate(), utcTime.getUTCHours(), utcTime.getUTCMinutes(), utcTime.getUTCSeconds(), utcTime.getUTCMilliseconds());
94                                }
95                        };
96
97                        parser.parse();
98                });
99        </script>
100</head>
101<body class="claro">
102        <script type="dojo/require">at: "dojox/mvc/at"</script>
103        <h1>Progress elements</h1>
104        <div>
105                Progress:
106                <progress max="100" data-mvc-bindings="value: at(progressModel, 'value')">Hoge</progress>
107        </div>
108        <div>
109                Meter:
110                <meter min="0" max="100" low="20" high="80" optimum="50" data-mvc-bindings="value: at(progressModel, 'value')"></meter>
111        </div>
112        <div>
113                Range:
114                <input type="range" data-mvc-bindings="value: at(progressModel, 'value')">
115        </div>
116        <h1>Date/time elements</h1>
117        <div>
118                Date/time (UTC):
119                <input type="datetime" data-mvc-bindings="value: at(datetimeModel, 'value').transform(utcISODateTimeConverter)">
120        </div>
121        <div>
122                Date:
123                <input type="date" data-mvc-bindings="value: at(datetimeModel, 'value').transform(isoDateConverter)">
124        </div>
125        <div>
126                Time:
127                <input type="time" data-mvc-bindings="value: at(datetimeModel, 'value').transform(isoTimeConverter)">
128        </div>
129        <div>
130                Date/time (Local):
131                <input type="datetime-local" data-mvc-bindings="value: at(datetimeModel, 'value').transform(localISODateTimeConverter)">
132        </div>
133        <h1>Others</h1>
134        <div>
135                Color:
136                <input type="color" data-mvc-bindings="value: at(colorModel, 'value')">
137                <output data-mvc-bindings="value: at(colorModel, 'value')"></output>
138        </div>
139        <div>
140                Output (for above progress):
141                <output data-mvc-bindings="value: at(progressModel, 'value')"></output>
142        </div>
143        <div>
144                Output (for above date):
145                <output data-mvc-bindings="value: at(datetimeModel, 'value').direction(at.from).transform(dojo.date.locale)"></output>
146        </div>
147  </body>
148</html>
Note: See TracBrowser for help on using the repository browser.