source: Dev/trunk/src/client/dojox/form/tests/test_TriStateCheckbox.html

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

Added Dojo 1.9.3 release.
File size: 7.3 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3        <head>
4                <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5                <title>TriStateCheckBox Widget Demo</title>
6                <style type="text/css">
7                        @import "../../../dijit/themes/claro/document.css";
8                        @import "../../../dijit/tests/css/dijitTests.css";
9                        @import "../resources/TriStateCheckBox.css";
10                        label {
11                                margin-right: 0.80em;
12                                line-height: 25px;
13                                vertical-align: middle;
14                        }
15                </style>
16                <!-- required: the default dijit theme: -->
17                <link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
18                <!-- required: dojo.js -->
19                <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true">
20                </script>
21                <!-- only needed for alternate theme testing: -->
22                <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
23                <script type="text/javascript">
24                        require(["dojo/_base/kernel", "dojo/parser", "dojo/ready", "dojo/dom", "dojo/json", "dijit/registry",
25                                 "dojox/form/TriStateCheckBox", "dijit/form/Button", "dijit/form/Form"],
26                        function(kernel, parser, ready, dom, JSON, registry, TriStateCheckBox){
27                                kernel.global["registry"] = registry;
28                                reportChecked = function(checked){
29                                        dom.byId("oncheckedoutput").innerHTML = checked;
30                                }
31                                reportValueChanged = function(value){
32                                        dom.byId("onvaluechangedoutput").innerHTML = registry.byId("cb7").get("value");
33                                }
34                                reportValueChanged2 = function(value){
35                                        dom.byId("onvaluechangedoutput2").innerHTML = registry.byId("cb8").get("value");
36                                }
37                                defaultSubmitHandler = function(values){
38                                        console.debug('actual submitted values: ' + JSON.stringify(values));
39                                        dom.byId("submitoutput").innerHTML = JSON.stringify(values);
40                                }
41                                submittedValues = defaultSubmitHandler;
42                               
43                                ready(function(){
44                                        parser.parse();
45                                        var params = {id: "cb6", name: "cb6", checked: true };
46                                        new TriStateCheckBox(params, "cb6");
47                                        new TriStateCheckBox({
48                                                id: "cb11",
49                                                checked: "mixed"
50                                        }, "cb11");
51                                });
52                        });
53                </script>
54        </head>
55        <body class="claro" role="main">
56                <h1 class="testTitle">Dojox TriStateCheckBoxes Test</h1>
57                <p>
58                        Here are some TriStateCheckBoxes.  Try clicking, and hovering, tabbing, and using the space bar to select:
59                </p>
60                <!--    to test form submission, you'll need to create an action handler similar to
61                http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
62                <form id="myForm" data-dojo-type="dijit/form/Form" data-dojo-props='action:"../../../dijit/tests/formAction.html", method:"", target:"formSubmitIframe"'>
63                        <input type="checkbox" id="cb0" checked/>
64                        <label for="cb0" style="vertical-align: top; line-height: 1em;">
65                                cb0: Vanilla (non-dojo) checkbox (for comparison purposes)
66                        </label>
67                        <br/>
68                        <h2>Standard TriStateCheckbox</h2>
69                        <input id="cb1" data-dojo-id="cb1" data-dojo-type="dojox/form/TriStateCheckBox" value="foo" name="cb1" data-dojo-props='onClick:function(){ console.log("clicked cb1") }'/>
70                        <label for="cb1">
71                                cb1: Standard TriStateCheckbox, with value=foo, clicking generates console log messages
72                        </label>
73                        <button data-dojo-type="dijit/form/Button" onclick="alert(dijit.byId('cb1').get('value'));">
74                                get('value')
75                        </button>
76                        <br/>
77                        <input type="checkbox" id="cb2" data-dojo-type="dojox/form/TriStateCheckBox" name="cb2" data-dojo-props='onChange:reportChecked, checked:true'/>
78                        <label for="cb2">
79                                cb2: Standard TriStateCheckbox, with default value, initially turned on.
80                        </label>
81                        <span>"onChange" handler displays attribute 'checked': [<span id="oncheckedoutput"></span>]</span>
82                        <button data-dojo-type="dijit/form/Button" onclick="alert(dijit.byId('cb2').get('value'));">
83                                get('value')
84                        </button>
85                        <br/>
86                        <input type="checkbox" id="cb3" data-dojo-type="dojox/form/TriStateCheckBox" disabled="disabled" name="cb3" />
87                        <label for="cb3">
88                                cb3: Disabled TriStateCheckbox
89                        </label>
90                        <br/>
91                        <input type="checkbox" id="cb4" data-dojo-type="dojox/form/TriStateCheckBox" name="cb4" data-dojo-props='readOnly:true, checked:true'/>
92                        <label for="cb4">
93                                cb4: ReadOnly TriStateCheckbox, turned on
94                        </label>
95                        <br/>
96                        <input type="checkbox" id="cb5" data-dojo-type="dojox/form/TriStateCheckBox" name="cb5" value="" data-dojo-props='onClick:function(){ console.log("clicked cb5"); }'/>
97                        <label for="cb5">
98                                cb5: Standard TriStateCheckbox, with specified value="", clicking generates console log messages
99                        </label>
100                        <button data-dojo-type="dijit/form/Button" onclick="alert(dijit.byId('cb5').get('value'));">
101                                get('value')
102                        </button>
103                        <br/>
104                        <input type="checkbox" id="cb6" type="text"/>
105                        <label for="cb6">
106                                cb6: Instantiated from script
107                        </label>
108                        <br/>
109                        <input type="checkbox" id="cb7" data-dojo-type="dojox/form/TriStateCheckBox" name="cb7" data-dojo-props="onChange:reportValueChanged"/>
110                        <label for="cb7">
111                                cb7: Standard TriStateCheckbox.
112                        </label>
113                        <button type="button" data-dojo-type="dijit/form/Button">
114                                <span>disable</span>
115                                <script type="dojo/on" data-dojo-event="click">
116                                        registry.byId("cb7").set("disabled", true);
117                                </script>
118                        </button>
119                        <button type="button" data-dojo-type="dijit/form/Button">
120                                <span>enable</span>
121                                <script type="dojo/on" data-dojo-event="click">
122                                        registry.byId("cb7").set("disabled",false);
123                                </script>
124                        </button>
125                        <button type="button" data-dojo-type="dijit/form/Button">
126                                <span>set value to "fish"</span>
127                                <script type="dojo/on" data-dojo-event="click">
128                                        registry.byId("cb7").set("value", "fish");
129                                </script>
130                        </button>
131                        <button type="button" data-dojo-type="dijit/form/Button">
132                                <span>Reset value+checked</span>
133                                <script type="dojo/on" data-dojo-event="click">
134                                        registry.byId("cb7").reset();
135                                        regisrty.byId("cb7").set("checked", true);
136                                </script>
137                        </button>
138                        <span>"onChange" handler displays 'value': [<span id="onvaluechangedoutput"></span>]</span>
139                        <br/>
140                        <h2>Customized TriStateCheckbox</h2>
141                        <input type="checkbox" id="cb8" data-dojo-type="dojox/form/TriStateCheckBox" name="cb8" data-dojo-props='onChange:reportValueChanged2, values:["Done", "Half done"]'/>
142                        <label for="cb8">
143                                cb8: TriStateCheckbox with specified values=["Done", "Half done"].
144                        </label>
145                        <span>"onChange" handler displays 'value': [<span id="onvaluechangedoutput2"></span>]</span>
146                        <br/>
147                        <input type="checkbox" id="cb9" data-dojo-id="cb9" data-dojo-type="dojox/form/TriStateCheckBox" name="cb9" data-dojo-props='states:["mixed", true, false]'/>
148                        <label for="cb9">
149                                cb9: TriStateCheckbox with customized states cycle: ["mixed", true, false]
150                        </label>
151                        <br/>
152                        <input type="checkbox" id="cb10" data-dojo-id="cb10" data-dojo-type="dojox/form/TriStateCheckBox" name="cb10" data-dojo-props="states:[true, false]"/>
153                        <label for="cb10">
154                                cb10: TriStateCheckbox with customized states cycle: [true, false]
155                        </label>
156                        <br/>
157                        <input type="checkbox" id="cb11" name="cb11" />
158                        <label for="cb11">
159                                cb11: TriStateCheckBox created programatically with a value of "mixed"
160                        </label>
161                        <br/>
162                        <button type="submit" data-dojo-type="dijit/form/Button" value="Submit">
163                                Submit
164                        </button>
165                        <button type="reset" data-dojo-type="dijit/form/Button">
166                                HTML Reset
167                        </button>
168                </form>
169                <br/>
170                <span>Actual submitted values: <span id="submitoutput"></span></span>
171                <iframe name="formSubmitIframe" src="about:blank" onload="if(this.values)submittedValues(this.values)" style="display:none;"></iframe>
172        </body>
173</html>
Note: See TracBrowser for help on using the repository browser.