root / trunk / tests / widget / test_Checkbox.html

Revision 6838, 3.3 kB (checked in by bill, 2 years ago)

RadioButton? widget (it's a subclass of the Checkbox widget).
Icons are placeholders until Torrey makes some real ones.
Fixes #862.

  • Property svn:eol-style set to native
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4
5<title>Checkbox Widget Demo</title>
6
7<script type="text/javascript">
8
9        var djConfig = {isDebug: true};
10
11</script>
12<script type="text/javascript" src="../../dojo.js"></script>
13<script language="JavaScript" type="text/javascript">
14
15        dojo.require("dojo.widget.Checkbox");
16
17</script>
18<script>
19function outputValues(form){
20        var str = "";
21        for(var i=0;i<form.elements.length;i++){
22                var e = form.elements[i];
23                if(e.type=="submit") break;
24                if(e.checked){
25                        str += "submit: name="+e.name+" id="+e.id+" value="+e.value+ "<br>";
26                }
27        }
28        dojo.byId("result").innerHTML = str;
29        return false;
30}
31
32dojo.addOnLoad(function(){
33        var params = {id: "cb6", widgetId: "cb6", name: "cb6"};
34        var widget = dojo.widget.createWidget("Checkbox", params, document.getElementById("checkboxContainer"));
35});
36</script>
37</head>
38<body style="padding: 50px;">
39
40<p>
41Here are some checkboxes.  Try clicking, and hovering:
42</p>
43
44<form onSubmit="return outputValues(this);">
45        <input type="checkbox" name="cb0" id="cb0" />
46                <label for="cb0">cb0: Vanilla (non-dojo) checkbox (for comparison purposes)</label>
47        <br>
48        <input type="checkbox" name="cb1" widgetId="cb1" value="foo" dojoType="Checkbox">
49                <label for="cb1">cb1: normal checkbox, with value=foo</label>
50        <br>
51        <input type="checkbox" name="cb2" id="cb2" dojoType="Checkbox" checked="checked"/>
52                <label for="cb2">cb2: normal checkbox, initially turned on</label>
53        <br>
54        <input type="checkbox" name="cb3" id="cb3" dojoType="Checkbox" disabled="disabled">
55                <label for="cb3">cb3: disabled checkbox</label>
56        <br>
57        <input type="checkbox" name="cb4" id="cb4" dojoType="Checkbox" disabled="disabled" checked="checked"/>
58                <label for="cb4">cb4: disabled checkbox, turned on</label>
59        <br>
60        <input type="checkbox" name="cb5" id="cb5" />
61                <label for="cb5">cb5: Vanilla (non-dojo) checkbox (for comparison purposes)</label>
62        <br>
63        <div id="checkboxContainer"></div>
64                <label for="checkboxContainer">cb6: instantiated from script</label>
65        <br>
66        <p>
67                <span>Radio group #1:</span>
68                <input type="radio" name="g1" id="g1rb1" value="news" dojoType="RadioButton">
69                <label for="g1rb1">news</label>
70                <input type="radio" name="g1" id="g1rb2" value="talk" dojoType="RadioButton" checked="checked"/>
71                <label for="g1rb2">talk</label>
72                <input type="radio" name="g1" id="g1rb3" value="weather" dojoType="RadioButton" disabled="disabled"/>
73                <label for="g1rb3">weather</label>
74        </p>
75        <p>
76                <span>Radio group #2:</span>
77                <input type="radio" name="g2" id="g2rb1" value="top40" dojoType="RadioButton"/>
78                <label for="g2rb1">top 40</label>
79                <input type="radio" name="g2" id="g2rb2" value="oldies" dojoType="RadioButton"/>
80                <label for="g2rb2">oldies</label>
81                <input type="radio" name="g2" id="g2rb3" value="country" dojoType="RadioButton" disabled="disabled"  checked="checked"/>
82                <label for="g2rb3">country</label>
83        </p>
84        <p>
85                <span>Radio group #3 (native radio buttons):</span>
86                <input type="radio" name="g3" id="g3rb1" value="rock"/>
87                <label for="g3rb1">rock</label>
88                <input type="radio" name="g3" id="g3rb2" value="jazz"/>
89                <label for="g3rb2">jazz</label>
90                <input type="radio" name="g3" id="g3rb3" value="classical" disabled="disabled"  checked="checked"/>
91                <label for="g3rb3">classical</label>
92        </p>
93        <input type="submit" />
94</form>
95
96<p>Submitted data:</p>
97<div id="result"></div>
98
99</body>
100</html>
Note: See TracBrowser for help on using the browser.