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.
99 lines
2.5 KiB
99 lines
2.5 KiB
<!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>
|
|
|