André Willemijns WebSite
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.
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".
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>