xoxo-compact-sample
Jump to navigation
Jump to search
XOXO 'compact' sample
Sample CSS and JS that demonstrates how to style and dynamically show XOXO outlines subtrees.
Contributors
- Written by Maciej Stachowiak.
- Minor validation tweaks by Tantek Çelik.
Markup Sample
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
li {
list-style: none;
}
ul, ol {
padding-left: 20px;
}
ul[compact="compact"], ol[compact="compact"] {
top: 0px;
left: 0px;
line-height: 0px;
}
ul[compact="compact"] *, ol[compact="compact"] * {
display: none;
}
li ol:before, li ul:before {
content: url('http://homepage.mac.com/ctholland/thelab/outlines/img/triangle_down.gif');
float: left;;
height: 0px;
margin-top: -1em;
margin-left: -40px;
}
li ol[compact="compact"]:before, li ul[compact="compact"]:before {
content: url('http://homepage.mac.com/ctholland/thelab/outlines/img/triangle.gif');
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
function tickleStyle(e)
{
var parent = e.parentNode;
var after = e.nextSibling;
parent.removeChild(e);
parent.insertBefore(e, after);
}
function clickHandler(event)
{
if (event.target != this) {
return;
}
var list = this.firstChild.nextSibling;
if (list.getAttribute("compact") == "compact") {
list.removeAttribute("compact");
} else {
list.setAttribute("compact", "compact");
}
tickleStyle(list);
event.stopPropagation();
}
function attachClickHandlers()
{
var uls = document.getElementsByTagName("ul");
for (var i = 0; i < uls.length; i++) {
if (uls[i].parentNode.tagName == "LI") {
uls[i].parentNode.addEventListener("click", clickHandler, false);
}
}
var ols = document.getElementsByTagName("ol");
for (var i = 0; i < ols.length; i++) {
if (ols[i].parentNode.tagName == "LI") {
ols[i].parentNode.addEventListener("click", clickHandler, false);
}
}
}
window.addEventListener("load", attachClickHandlers, false);
/*]]>*/
</script>
</head>
<body>
<ul class="xoxo">
<li>First
<ul>
<li>Second</li>
<li>Nested
<ol compact="compact">
<li>Items</li>
<li>Rock</li>
</ol>
</li>
</ul>
</li>
</ul>
</body>
</html>