Pratique
15/06/2007
Créer une liste déroulante personnalisée
La technique expliquée ci-après est à base de JavaScript, mais le formulaire n'est pas inaccessible pour autant. En effet, sémantiquement la liste est identique à une liste déroulante usuelle : Code HTML: <select name="ma_liste" class="turnintodropdown"> <option value="1">Option 1</option> <option value="2">Option 2</option> </select>Le Javascript s'occupera de remplacer ceci par un champ de formulaire caché et une liste à puces (balise <ul> ) mise en forme grâce à une feuille de style. Le fonctionnement de la liste est reproduit en JavaScript également. La méthode existe déjà, elle a simplement été modifiée afin qu'elle permette l'utilisation d'une longue liste d'options impliquant un ascenseur vertical (par exemple une liste complète des pays). Le code suivant sert à ajouter une deuxième image d'arrière-plan (en l'occurrence la flèche indiquant que c'est une liste déroulante). Code: var arrow=document.createElement('div'); arrow.className = "arrow"; trigger.appendChild(arrow); trigger.appendChild(document.createTextNode(sels[i]. options[0].text)); sels[i].parentNode.insertBefore(trigger,sels[i]); Voici le JavaScript complet (modifié) : tamingselect.js Et un exemple d'utilisation. La feuille de style est inclue dans ce document exemple, elle est nécessaire au fonctionnement de la liste lorsque le JavaScript est activé ! Avantages : » Accessibilité conservée : navigation au clavier possible, les utilisateurs n'utilisant pas JavaScript ont accès à la liste simple (sans mise en forme). » Mise en forme flexible depuis la feuille de style. Inconvénients : » Les utilisateurs sans JavaScript n'ont pas accès à une présentation identique. Compatibilité :Internet Explorer 5.5 et 6.0, Internet Explorer 5.2 Mac, Firefox 1.x, Opera 7.5 et 8.0, Safari 1.3.x .
Cet article a été réalisé par Patrick Haederli
sous licence creative Commons
|
Par Thomas Thelliez, (RocketBootstrapper.com) Lire
Par Thomas Arnaud, (Nudge) Lire