xoxo-compact-sample-fr
XOXO échantillon 'compact'
L'échantillon de CSS et JS qui démontre comment style et afficher dynamiquement les sous-arbres d'outlines XOXO.
Contributeurs
- Ecrit par Maciej Stachowiak.
- Validations mineures par Tantek Çelik.
- Traduction en cours par Christophe Ducamp
Vous pouvez redistribuer ce code librement sous la licence Simple BSD ou CC-by-2.0 tant que vous préservez la notice de copyright.
Notes
Ce code ne fonctionne actuellement que dans Safari et autres navigateurs basés sur le WebKit. Dans Firefox et les autres navigateurs basés sur Gecko, le comportement est bon mais le layout est faux parce que Gecko ne supporte pas proprement margin-top sur le contenu généré. Dans Opera, cela s'affiche proprement mais ne se comporte pas bien, parce qu'Opera ne semble pas supporter les sélecteurs d'attribut. Cela ne fonctionne pas du tout dans Internet Explorer (quelle que soit la plateforme) parce que IE ne supporte ni le contenu généré ni les sélecteurs d'attribut.
Les dérivés pour d'autres navigateurs sont les bienvenus.
Echantillon Balisage
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (C) 2006 Maciej Stachowiak. All rights reserved.
Vous pouvez redistributer ce code librement sous une licence Simple BSD
<http://microformats.org/wiki/simple-bsd-license> ou CC-by-2.0
<http://creativecommons.org/licenses/by/2.0/> tant que vous préservez la
notice de copyright.
<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>