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.
100 lines
2.5 KiB
100 lines
2.5 KiB
2 years ago
|
<!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>
|