Controls.TabView

Le widget Controls.TabView permet de mettre en place un fonctionnement par onglet sur un ensemble d'éléments DOM container de contenu et d'une liste à puce faisant office pour le coup de barre de navigation affichée au dessus d'un cadre contrôlé de contenu.

Le widget assez bien fait permet de faire varier les différents styles CSS qui donnent toute sa force à ce widget (ndr : couleurs des liens, changement lors des survols souris etc...).

La syntaxe d'utilisation de cet widget est la suivante :
new YAHOO.widget.TabView( element_DOM_container );

Cette syntaxe semble démontrer une simplicité enfantine pour la mise en place de ce widget.
Il ne suffit néanmoins pas de préciser un élément DOM pour permettre un fonctionnement par onglets.
Le fonctionnement par onglets implique que vous ayez défini au préalable dans votre structure DOM les éléments DOM nécessaires à la mise en place du Controls.TabView .

Pour rentrer un peu dans le détail, vous pourrez voir que vous avez besoin d'une liste à puces pour présenter un Controls.TabView.
Vous allez également avoir besoin d'éléments DOM (ndr : 'div' par exemple) pour contenir vos informations et/ou formulaires à présenter en TabView ou "vue par onglets".
Les différents éléments DOM dont YUI se servira pour mettre en place le Controls.TabView devront être identifiés par DOM/CSS pour permettre le déploiement du contrôle TabView.

Des exemples d'utilisations sont présentés ci après dans cette page.
Ces exemples sont accessibles via la liste déroulante ci après :
Exemple d'utilisation #00 de Controls.TabView

!!! :: la liste déroulante d'accès ne fonctionne pas et les boutons de retour haut de page non plus.
Une solution avec YUI est en cours de mise en oeuvre par le rédacteur/concepteur de Webjax.

Exemple d'utilisation #00 de Controls.TabView

Cet exemple vous montre la mise en place simple d'un Controls.TreeView.
Cet exemple fonctionne à partir d'éléments DOM déjà inclus dans la page.

• toto président
• tata présidente
• webjax

toto président toto président toto président toto président toto président toto président

• tata présidente.
• tata présidente.

Lorem Ipsum

valeur foo : valeur yop : toto tatawebjax valeur yep :

Le code source de cet exemple est présenté ci après avec dans l'ordre :

• les inclusions CSS de la librairie YUI nécessaires
• les inclusions Javascript permettant la mise en place du Controls.TabView
• les styles CSS modifiés pour permettre les couleurs vertes et oranges (ndr : de base le tout est basé sur un gris light commun à pas mal d'interfaces Yahoo).
• le code Javascript permettant d'initialiser sur les éléments HTML présentés après le Controls.TabView.
• le code HTML des éléments DOM qui seront utilisés pour le déploiement du Controls.TabView.

Les inclusions CSS de YUI :
<!-- styles CSS de base de la librairie --> <link rel="stylesheet" type="text/css" href="http://www.webjax.eu/js/YUI_0_12_2/tabview/assets/tabview.css"> <link rel="stylesheet" type="text/css" href="http://www.webjax.eu/js/YUI_0_12_2/tabview/assets/border_tabs.css">
Les inclusions Javascript des fichiers de YUI :
<!-- contenu Javascript de la librairie YUI nécessaire --> <script type="text/javascript" src="http://www.webjax.eu/js/YUI_0_12_2/yahoo/yahoo.js"></script> <script type="text/javascript" src="http://www.webjax.eu/js/YUI_0_12_2/event/event.js"></script> <script type="text/javascript" src="http://www.webjax.eu/js/YUI_0_12_2/dom/dom.js"></script> <script type="text/javascript" src="http://www.webjax.eu/js/YUI_0_12_2/tabview/tabview.js"></script>
Le code Javascript initialisant le contrôle d'interface :
<script type="text/javascript"> YAHOO.example.init = function() { var tabView = new YAHOO.widget.TabView('demo'); }; YAHOO.example.init(); </script>


Le code HTML des éléments sur lesquels sera mise en place le contrôle Controls.TabView :
<div id="demo" class="yui-navset"> <!-- barre de navigation (onglets) --> <ul class="yui-nav"> <li class="selected"><a href="#toto"><em>toto président</em></a></li> <li><a href="#tata"><em>tata présidente</em></a></li> <li><a href="#webjax"><em>webjax</em></a></li> </ul> <!-- élément DOM container du contenu --> <div class="yui-content"> <!-- premier onglet --> <div id="toto"> <p> toto président toto président toto président toto président toto président toto président </p> </div> <!-- second onglet --> <div id="tata"> <ul> <li><a href="#">tata présidente.</a></li> <li><a href="#">tata présidente.</a></li> </ul> </div> <!-- troisième onglet --> <div id="webjax"> <form action="#"> <fieldset> <legend>Lorem Ipsum</legend> <label for="foo">valeur foo : <input id="foo" name="foo"></label> <label for="yop">valeur yop : <select id="yop"><option value="toto">toto</option> <option value="tata">tata</option><option value="webjax">webjax</option> </select></label> <label for="yep">valeur yep : <input type="radio" id="yep" checked="true"/></label> <input type="submit" value="submit"> </fieldset> </form> </div> </div> </div>

: 12/01/2007 19:03:42 | : YUI, Yahoo, User, Interface, Controls, TabView, tabview, container, event, yahoo, dom, DOM, onglets,

Aucun commentaire enregistré