Lire un extrait ( PDF 590 Ko)

Transcription

Sarion2012 titre
13/07/12
10:02
Page 1
Éric Sarrion
JQuery 1
.7
&JQuery UI
2e édition
© Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6
Sarrion_JQuery.book Page 317 Mercredi, 18. juillet 2012 8:20 08
14
Onglets
Les pages HTML comportant des onglets (tabs) sont devenues courantes dans les
sites web actuels. Elles permettent d’assurer une meilleure compréhension des informations affichées, en les regroupant par onglets.
Principe de base
Supposons qu’on veuille écrire le code HTML permettant d’afficher les onglets
représentés sur la figure 14-1. Nous avons une barre d’onglets (contenant ici trois
onglets), puis un contenu différent pour chacun des onglets.
Figure 14–1
Onglets dans une page HTML
318
jQuery UI : pour des fonctionnalités graphiques avancées
DEUXIÈME PARTIE
JQuery UI demande d’écrire ceci de la façon suivante :
• un bloc <div> global encadrant le tout ;
• une <ul> pour former la barre d’onglets ;
• autant de <li> que d’onglets ;
• autant de <div> que de fenêtres contenant les onglets.
Page HTML composée de trois onglets
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id=tabs>
<ul>
<li><a href=#tab1>Tab
</ul>
<div id=tab1>Contenu du
</div>
1</a></li>
2</a></li>
3</a></li>
premier onglet</div>
deuxième onglet</div>
troisième onglet</div>
<script>
</script>
Or, si nous affichons la page dans un navigateur (figure 14-2), cela ne s’affiche pas tout à
fait comme prévu... tout simplement car il ne faut pas oublier de signaler, dans la page
HTML, que cet affichage doit s’effectuer selon les conventions de jQuery UI.
Figure 14–2
Les onglets ne s’affichent pas
dans la page HTML.
Onglets
CHAPITRE 14
Cela s’effectue en indiquant que le <div> global est géré par la méthode tabs () de
jQuery UI. On ajoute donc la ligne suivante dans la partie <script> de la page
(jusqu’alors vide) :
Faire appel à la méthode tabs () de jQuery UI pour gérer un élément HTML avec des onglets
<script>
$("#tabs").tabs ();
</script>
La page s’affiche alors avec les onglets, comme sur la figure 14-1.
À SAVOIR Méthode tabs ()
La méthode tabs () est une des nombreuses méthodes de jQuery UI, qui s’utilise sur un objet de
classe jQuery retourné par la fonction jQuery (). Les éléments de la liste associée sont alors transformés en onglets, avec une gestion automatique des clics sur ceux-ci (pour passer d’un onglet à l’autre)
gérée de façon transparente par jQuery UI.
Mise en forme du contenu
L’utilisation de la méthode tabs () modifie de façon radicale l’aspect des éléments
HTML écrits dans la page. En effet, cette méthode parcourt (en interne dans
jQuery UI) le code HTML et ajoute aux éléments concernés (ici, les onglets) de
nouvelles classes CSS qui leur donnent le style adéquat.
La figure 14-3 (page suivante) représente un exemple de code HTML généré par
jQuery UI après avoir été modifié par l’instruction tabs () (ce code a été récupéré
au moyen de Firebug associé à Firefox).
Ensuite, il est possible d’utiliser les classes CSS des éléments afin de personnaliser
l’affichage. Par exemple, si nous modifions la classe CSS ui-state-default, associée
aux éléments <li>, nous devrions obtenir un nouvel aspect pour les onglets. De
même pour le contenu de ces onglets, si on modifie la classe CSS ui-tabs-panel,
associée aux éléments <div>.
319
320
DEUXIÈME PARTIE
Figure 14–3
Code HTML généré
par la méthode tabs ()
Modifions ces éléments dans le code HTML en ajoutant une balise <style> :
Modification du style des onglets
<script src=jquery.js></script>
<script src=jqueryui/development-bundle/ui/jquery-ui-1.8.16.custom.js></script>
href="jqueryui/development-bundle/themes/smoothness/jquery.ui.all.css" />
<style type=text/css>
li.ui-state-default {
font-size : 10px;
}
div.ui-tabs-panel {
font-size : 15px;
font-family : georgia;
font-style : italic;
}
</style>
<div id=tabs>
<ul>
</ul>
1</a></li>
2</a></li>
3</a></li>
Onglets
CHAPITRE 14
<div id=tab2>Contenu du deuxième onglet</div>
<div id=tab3>Contenu du troisième onglet</div>
</div>
<script>
$("#tabs").tabs ();
</script>
REMARQUE Emplacement de la balise <style>
Le code HTML est identique au précédent, sauf que nous avons ajouté la balise <style> après l’inclusion des styles de jQuery UI. Notez que l’ajout de nos propres styles doit se faire après ceux de jQuery UI,
sinon notre modification ne sera pas prise en compte.
Comme le montre la figure 14-4, l’apparence des onglets et de leur contenu a été
modifiée en fonction du nouveau style.
Figure 14–4
L’apparence des onglets
a été personnalisée.
La méthode tabs ()
Cette méthode peut s’utiliser sous les deux formes suivantes :
Première forme
$(selector, context).tabs (options);
Seconde forme
$(selector, context).tabs ("action", params);
321
322
DEUXIÈME PARTIE
tabs (options)
La méthode tabs (options) est utilisée pour déclarer qu’un élément HTML (et son
contenu) doit être géré sous forme d’onglets. Le paramètre options est un objet permettant de spécifier une apparence et un comportement aux onglets concernés. Différents types d’options sont disponibles, selon qu’elles gèrent les onglets directement
ou les événements liés aux onglets.
Options gérant les onglets
Tableau 14–1 Gestion des onglets
Options
Fonction
options.collapsible Paramétrée à true, elle autorise les onglets à être désélectionnés.
Par défaut, elle est à false : le clic sur un onglet sélectionné ne le désélec-
tionne pas.
options.disabled
Indique, dans un tableau, les index des onglets désactivés (c’est-à-dire ceux
qui ne pourront pas être sélectionnés). Par exemple, [0, 1] permet de
désactiver les deux premiers onglets.
options.selected
Indique l’index du premier onglet sélectionné : par défaut 0, c’est-à-dire le
premier onglet.
options.event
Nom de l’événement qui permet de sélectionner un nouvel onglet (par défaut
"click"). Si, par exemple, on indique "mouseover", l’onglet sera sélec-
tionné lors de son survol par la souris.
options.fx
Indique un effet lors de la sélection de l’onglet, tel qu’un affichage progressif
de l’onglet et de son contenu, par exemple :
options.fx = { opacity : "toggle" }.
options.ajaxOptions Options de paramétrage pour Ajax, lorsqu’on désire mettre à jour le contenu
d’un onglet par Ajax. On utilisera en particulier
options.ajaxOptions.data qui permet de préciser des paramètres
envoyés au serveur.
Options gérant les événements liés aux onglets
Ces méthodes permettent d’effectuer un traitement lorsqu’un événement se produit
dans les onglets, comme la sélection de l’un d’eux, l’ajout d’un nouvel onglet, etc.
Elles reçoivent le paramètre event correspondant à l’événement, suivi de l’objet tab
qui décrit l’onglet sur lequel s’est produit l’événement. Cet objet tab est composé des
propriétés suivantes :
• index : index de l’onglet sur lequel s’est produit l’événement (à partir de 0) ;
• panel : élément <div> correspondant au contenu de l’onglet.
Onglets
CHAPITRE 14
Tableau 14–2 Gestion des événements liés aux onglets
Options
Effet
options.select
La méthode select (event, tab) est appelée lors de la sélection d’un
onglet (manuellement ou par la méthode tabs ("select")).
options.show
La méthode show (event, tab) est appelée lorsque le contenu d’un
onglet devient visible (manuellement ou lors de l’affichage du premier onglet
sélectionné ou par l’appel d’une méthode comme tabs ("select")).
options.add
La méthode add (event, tab) est appelée lors de l’ajout d’un onglet
dans la liste des onglets (par la méthode tabs ("add")).
options.remove
La méthode remove (event, tab) est appelée lors de la suppression
d’un onglet dans la liste des onglets (par la méthode tabs ("remove")).
options.enable
La méthode enable (event, tab) est appelée lors de l’activation d’un
onglet dans la liste des onglets (par la méthode tabs ("enable")).
options.disable
La méthode disable (event, tab) est appelée lors de la désactivation d’un onglet dans la liste des onglets (par la méthode
tabs ("disable")).
options.load
La méthode load (event, tab) est appelée lors du chargement ou de
l’affichage d’un onglet dans la liste des onglets par Ajax (par la méthode
tabs ("load")).
tabs ("action", params)
La méthode tabs ("action", params) permet d’effectuer, au moyen d’un programme,
une action sur les onglets, telle que sélectionner, désactiver, ajouter ou supprimer un
onglet. L’action est indiquée sous forme d’une chaîne de caractères dans le premier argument (par exemple, "add" pour ajouter un nouvel onglet), tandis que les arguments qui
suivent concernent les paramètres de cette action (par exemple, l’index de l’onglet concerné).
L’appel de ces méthodes provoque parfois un événement qui porte le même nom que
l’action correspondante (l’événement add est déclenché par l’action "add"). Ces événements sont traités par les options vues dans la section précédente.
Tableau 14–3 Actions possibles grâce à la méthode tabs ("action", params)
Méthode
Action
tabs ("add", "#id",
title, index)
Ajouter un onglet à la position indiquée par index (à partir de 0). Les
onglets qui suivent ont leur index décalé de 1.
"#id" correspond à l’identifiant d’un <div> qui est associé au contenu de cet onglet (le <div> est créé par jQuery UI, son contenu devra
être ajouté ultérieurement).
Le paramètre title correspond au titre de l’onglet.
Si le paramètre index n’est pas indiqué, l’onglet est ajouté à la fin de
la liste.
323
324
DEUXIÈME PARTIE
Tableau 14–3 Actions possibles grâce à la méthode tabs ("action", params) (suite)
Méthode
Action
tabs ("remove", index)
Supprimer l’onglet dont l’index est indiqué, ainsi que le contenu associé.
tabs ("disable", index) Désactiver l’onglet dont l’index est indiqué.
tabs ("enable", index)
Rendre actif l’onglet dont l’index est indiqué.
tabs ("select", index)
Sélectionner l’onglet dont l’index est indiqué : son contenu devient alors
visible.
tabs ("url", index,
url)
Associer le contenu de l’onglet dont l’URL est indiquée dans le paramètre url. Le contenu de l’onglet sera récupéré par Ajax lors de l’appel de
la méthode tabs ("load", index).
tabs ("load", index)
Récupèrer le contenu de l’onglet par Ajax, en utilisant l’URL indiquée par
tabs ("url", index, url).
tabs ("rotate",
duration, repeat)
Sélectionner périodiquement chacun des onglets, selon une durée indiquée en millisecondes par duration.
Si repeat vaut true, le cycle est répétitif, sinon il s’effectue une seule
fois (valeur par défaut).
tabs ("destroy")
Supprimer la gestion des onglets. Les onglets redeviennent de simples
balises HTML sans classe CSS ni gestion d’événements.
tabs ("length")
Retourner le nombre d’onglets du premier élément de la liste correspondant au sélecteur utilisé.
Gestion des événements dans les onglets avec bind ()
En plus d’offrir des méthodes événementielles dans les options de la méthode
tabs (options), jQuery UI nous permet de gérer ces événements au moyen de la
méthode bind () classique (voir le chapitre 6 sur les événements). jQuery UI a créé
différents événements, dont voici la liste.
Tableau 14–4 Événements jQuery UI pour la gestion des onglets
Événement
Description
tabsselect
Un onglet a été sélectionné (manuellement ou par la méthode tabs ("select")).
tabsshow
Le contenu d’un onglet devient visible (manuellement ou lors de l’affichage du premier
onglet sélectionné, ou encore par l’appel d’une méthode comme tabs ("select")).
tabsadd
Un onglet a été ajouté (par la méthode tabs ("add")).
tabsremove
Un onglet a été supprimé (par la méthode tabs ("remove")).
tabsenable
Un onglet a été activé (par la méthode tabs ("enable")).
tabsdisable
Un onglet a été désactivé (par la méthode tabs ("disable")).
tabsload
Le contenu d’un onglet a été chargé par Ajax (par la méthode tabs ("load")).
Onglets
CHAPITRE 14
Ces événements permettent d’effectuer des traitements grâce à la fonction de callback que fournit la méthode bind (eventName, callback).
Exemples d’utilisation des onglets
Création dynamique d’onglets
On souhaite créer un onglet (et son contenu) directement de façon dynamique au
moyen de JavaScript. Le code HTML crée initialement trois onglets, tandis que le
script JavaScript ajoute le quatrième.
Création dynamique d’onglet avec tabs ()
<script src=jquery.js></script>
<script src=jqueryui/development-bundle/ui/jquery-ui-1.8.16.custom.js></script>
href="jqueryui/development-bundle/themes/smoothness/jquery.ui.all.css" />
<div id=tabs>
<ul>
</ul>
</div>
1</a></li>
2</a></li>
3</a></li>
deuxième onglet</div>
troisième onglet</div>
<script>
$("#tabs").tabs ({
fx : { opacity : "toggle" },
}).tabs ("add", "#tab4", "Tab 4");
$("<i> Contenu du quatrième onglet</i>").appendTo ("#tab4");
</script>
Remarquez comme nous avons chaîné la première méthode tabs () avec la seconde.
La première méthode tabs () est nécessaire, car elle transforme le code HTML que
nous avons écrit en un code affichant des onglets (avec les classes CSS que
jQuery UI ajoute automatiquement), tandis que la seconde permet d’effectuer
l’action "add" qui ajoute l’onglet en fin de liste.
325

Lire un extrait ( PDF 590 Ko)

Transcription

Documents pareils

the beatles - yesterday - Niko`s art site

1. Ouvrir le lecteur Windows Media Player 11 2. Selectionner menu

Fiche formation CI-WORK n 00006

TZ 300 scie à onglet radiale

Créer des onglets de page d`accueil Internet et naviguer par onglets

SCIE À ONGLET RADIALE

Personaliser sa messagerie SOGo

Onglet à l`échalote 4

MONECHO - Stage Dev Informatique 2016

Créer une carte - mes fiches pratiques