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
Dans cet onglet l'image est à droite.
Pour réaliser avec du texte en forme de liste, 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
| Incorporer un lien | Pour en savoir plus : Le site d'andré |
|---|---|
| Pour en savoir plus : Le site d'andré |
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
<script type="text/javascript" src="jquery-1.3.min.js"></script>
<script type="text/javascript" src="jquery/jquery.idTabs.min.js"></script>
<style type="text/css">
/* Style for Usual tabs avec bordure */
.usualbd {
padding:15px 20px;
width:600px;
margin:8px auto;
}
.usualbd li { list-style:none; float:left; }
.usualbd ul a {
display:block;
padding:6px 10px;
text-decoration:none!important;
margin:1px;
margin-left:0;
font:10px Verdana;
color:#FFF;
background:#444;
font-weight: bold;
}
.usualbd ul a:hover {
color:#FFF;
background:#111;
}
.usualbd ul a.selected {
margin-bottom:0;
color:#fff;
background:#0066ff;
border-bottom:1px solid #0066ff;
cursor:default;
font-weight: bold;
}
.usualbd div {
padding:10px 10px 8px 10px;
*padding-top:3px;
*margin-top:-15px;
clear:left;
background:#fff;
font:10pt Georgia;
border: 3px solid #0066ff;
height: 400px;
overflow: auto;
}
.usualbd div a { color:#000; font-weight:bold; }
</style>
Code à insérer dans la partie body
<div id="usual1bd" class="usualbd">
<ul>
<li><a class="selected" href="#tab1bd">Code à mettre dans head</a></li>
<li><a href="#tab2bd">Code à mettre dans body</a></li>
<li><a href="#tab3bd">Images</a></li>
</ul>
<div id="tab1bd">
Contenu du 1er onglet
</div>
<div id="tab2bd">
Contenu du 2ème onglet
</div>
<div id="tab3bd">
Contenu du 3ème onglet
</div>
</div>
<script type="text/javascript">
$("#usual1bd ul").idTabs();
</script>