Document original

le 17 février 2009

La source des codes est disponible sur le site "jquery idTabs"

Pour fonctionner, il faut :

La bibliothèque jquery :

     <script type="text/javascript" src="jquery-1.3.min.js"></script>

La bibliothèque spécifique pour les tabulations

     <script type="text/javascript" src="../../jquery/jquery.idTabs.min.js"></script>

Et aussi il faut le script

     <script type="text/javascript"> 
     $("#usual1 ul").idTabs(); 
     </script> 

La mise en forme est faite avec les codes CSS.

This is tab 1.

Dans les réalisations qui vont suivre, ce sont ces codes CSS qui ont été modifiés uniquement.

Tabulation et contenu en textes et images

le 17 février 2009

Dans le modèle ci-dessous nous avons incorporé des textes, des images, des listes et des liens.

Attention compte tenu de la structure imposée pour les appels à jquery nous ne pouvons ici pas utiliser les balises "ul", "li" et "div".

mini000 burren

Dans cet onglet nous avons mis une image. Pour la centrer, nous ne pouvons pas utiliser la balise "div" alors nous avons utilisé la balise "span" que nous avons forcée avec "display: block" pour avoir l'équivalent d'une balise "div".

Autre problème, pour réaliser avec du texte en forme de liste. Ici nous avons utiliser des balises "dl" et "dd" que nous avons formatées. Le remplacement des styles de la liste a été réalisé avec un caractère spécial.

 Voici la première ligne de ma liste. Je l'ai faite volontairement la plus longue possible pour vérifier le retrait de la première ligne.
 Voici ma deuxième ligne

Pour centrer une image, nous utiliserons :

<span style="display: block; width: 180px; margin: 10px auto;">
<img alt="Le Burren" src="images/mini000%20burren.jpg" height="144" width="180" />

Et pour réaliser, une liste nous aurons :

<dl>
 <dd><span style="margin-left: -10px;">♦</span> Votre texte</dd>
 <dd><span style="margin-left: -10px;">♦</span> Votre texte</dd>
</dl>
Code à insérer dans la partie head
Code à insérer dans la partie body

© Copyright 2007, André Willemijns WebSite

Valid XHTML 1.0 Strict