: javascript

Prototype - Onglets

Le but de cet exercice est de réaliser un système d'affichage d'onglets en se basant sur une ancre de l'url et en mettant celle-ci à jours lors du changement d'onglet. Voici un code HTML accessible si javascript est désactivé.

Créer le code javascript nécessaire à la gestion de l'affichage des onglets en utilisant la librairie prototype.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemple - Liens</title>
<style type='text/css'>
* { padding: 0; margin: 0; }
ul { list-style: none; float: left; }
ul li { float: left; padding: 0.2em; }
div.onglet { clear: both; border: 1px solid black; padding: 1em; }
</style>
</head>
<body>
  <ul class='onglet_buttons'>
    <li><a href='#onglet_1'>Onglet 1</a></li>
    <li><a href='#onglet_2'>Onglet 2</a></li>
    <li><a href='#onglet_3'>Onglet 3</a></li>
  </ul>
  <div id='onglet_1' class='onglet'>
    <p>Je suis l'onglet 1</p>
  </div>
  <div id='onglet_2' class='onglet'>
    <p>Je suis l'onglet 2</p>
  </div>
  <div id='onglet_3' class='onglet'>
    <p>Je suis l'onglet 3</p>
  </div>
</body>
</html>

Voir l'exemple

Solution

Afficher
function setOnglet(id) {
  $$('div.onglet').each( function(e) { e.hide(); } );
  $(id).show();
  document.location.replace('#'+id);
}

function handleButton(event) {
  var e = Event.element(event);
  Event.stop(event);
  var current = e.href.split('#')[1];
  setOnglet(current);
}

var current = document.location.href.split('#')[1] || 'onglet_1';
setOnglet(current);

$$('.onglet_buttons a').each( function(e) {
  Event.observe(e, 'click', handleButton.bindAsEventListener(this));
});
Editer