<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>RadioGroup Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<script type="text/javascript">
var djConfig = { isDebug: true };
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.RadioGroup");
</script>
<style type="text/css">
body {
font-family : sans-serif;
}
ol, ul, li {
margin: 0px;
padding: 0px;
}
p {
margin-bottom: 2em;
border-left:3px solid #1F6BBA;
padding-left: 1em;
}
.radioGroup {
list-style: none;
border-left: 1px solid #efefef;
border-bottom: 1px solid #aaa;
}
.radioGroup li {
padding: 2px 10px 1px;
}
.radioGroup li.selected {
background: #efefef;
border: 1px solid #000;
}
</style>
</head>
<script type="text/javascript">
function initTest() {
dojo.event.connect(dojo.widget.byId("group1"), "onSelect", function(e) {
dojo.debug("RadioGroup selected");
});
dojo.event.connect(dojo.widget.byId("group1"), "onItemSelect", function(e) {
dojo.dom.removeChildren(dojo.byId("debugContainer"));
dojo.debug("RadioGroup item with value <"
+ dojo.dom.textContent(dojo.widget.byId("group1").selectedItem)
+ "> selected");
});
dojo.widget.createWidget("RadioGroup",{},dojo.byId("group4"));
}
dojo.addOnLoad(initTest);
</script>
<body>
<p>This test does various things with <code>ul</code> and <code>ol</code> lists to
test that the RadioGroup widget works correctly. The individual li's contained by these
lists should be exclusively selectable within their groups.
<ol id="group1" dojoType="RadioGroup">
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
</ol>
</p>
<p>This grouping should have "Contact Us" selected by default.
<ul id="group3" dojoType="RadioGroup" selected="contact">
<li id="home">Home</li>
<li id="news">News</li>
<li id="contact">Contact Us</li>
</ul>
</p>
<p>
This widget was created dynamically with dojo.widget.createWidget.
<ol id="group4">
<li>Lists</li>
<li>are</li>
<li>boring</li>
</ol>
</p>
</body>
</html>