Pré requis
- Créer une page HTML basique (entête, sans css, ...)
- Télécharger jQuery
- Inclure le script jQuery en bas de page (avant </body>)
- Inclure (après le script jQuery) soit <script type='text/javascript'> /*Code ici *</script> soit dans un fichier externe, dans ce tutoriel je mettrais le script entre balise car il n'est pas énormément long mais prenez l'habitude de le mettre dans un fichier externe pour vos autres scripts !
- Pour les paresseux voici le lien pour commencer l'exercice
Un peu de code
Tout d'abord, nous allons créer 6 blocs (div) qui iront par paire. Un bloc servira de « bouton » pour activer l'ouverture du second bloc.
Car, en Javascript, il faut bien comprendre que les éléments sont tous potentiellement réactifs.
CODE HTML
Click me (open 1) !
blablablabla1
blablablabla
blablablabla
blablablabla
Click me (open 2) !
blablablabla2
blablablabla
blablablabla
blablablabla
Click me (open 3) !
blablablabla3
blablablabla
blablablabla
blablablabla
Les éléments avec les « display: none; » ne seront pas affichés (ou ouvert).
Seul le premier bloc sera affiché (on pourrait donc imaginer que se soit le 2ème ou 3ème qui soit ouvert ou encore, aucun).
C'est donc notre fameux toggle qui va s'occuper de l'ouverture.
Je propose une feuille de style pour agrémenter le visuel de notre petit projet, je suggère celui-ci, mais rien n'est obligatoire !
CODE CSS
.enter{
padding:5px;
width:400px;
height:15px;
border: 1px solid black;
cursor:pointer;
}
.content{
padding:5px;
width:400px;
border:1px solid black;
background-color: black;
color: white;
}
Normalement, votre page devrait (plus ou moins) ressembler au schéma ci-dessous.
Passons maintenant au « javascript » ou plutôt à la partie jQuery. Pas de panique, il est repris et expliqué plus bas :
CODE JAVASCRIPT
$(document).ready(function(){
$('.enter').click(function(){
$(this).next('.content').slideToggle('fast');
});
});
Une petite explication s'impose:
CODE JAVASCRIPT
$(document).ready(function(){ ... });
Cette instruction permet d'exécuter ce qui se trouve entre les accolades une fois le document « charger », nous ne rentrerons pas plus dans les détails sur ce point ce n'est pas l'objet de ce cours. Et je pense que vous devriez cheminer logiquement vers la compréhension de ce petit fragment, quoi qu'il en soit, gardez à l'esprit que cette instruction aura pour office de créer une sorte d'exécution du contenu des accolades.
CODE JAVASCRIPT
$('.enter').click(function(){ ... });
«
click », est un événement, comme dans la langue française, un évènement est une action qui se doit de subir un déclenchement. Donc, pour faire simple, un événement est une action qui se produit sous certaines conditions.
Dans ce cas-ci, une action se déroulera lors du clic sur la div avec la class enter.
CODE JAVASCRIPT
$('.enter')
Ceci est un sélecteur jQuery, il permet de sélectionner n'importe quel élément dans une page HTML et de lui attribuer un événement (comme ici) , de lui changer son style etc.
Comme vous pouvez le voir, c'est relativement plus léger que le Javascript outre framework et ce tutoriel permet donc aussi de faire un prosélytisme accru quant à l'intérêt de jQuery !
CODE JAVASCRIPT
$(this).next('.content').slideToggle('fast');
$(this) récupère la class « enter » (this signifie donc l'élément courant, ici la class « enter ») ensuite next('.content') sélectionnera l'élément suivant à la classe « enter »; slideToggle('fast'); est l'élément clé il permettra donc de créer un « slide » (ouverture de la div avec un effet de glissement) l'avantage du toggle est qu'il détecte si l'élément est ouvert ou pas et l'ouvre ou le ferme suivant le cas.
A noter que slideToggle() peut prendre plusieurs valeurs possibles : 'slow', 'normal', 'fast' ou encore en millisecondes, je vous invite à consulter la documentation pour de plus amples détails.
Je ne m'étale pas sur le this qui fait partie intégrante dans la notion d'objet, pour tout de même avoir une certaine accroche, this correspond à « celui-ci » en anglais.
Callback
Un point important à préciser est le callback.
Le callback permet d'exécuter une fonction une fois l'événement fini (ici slideToggle()), comme son nom l'indique, il permet de faire un appel après, il pourrait, par exemple, être utilisé pour afficher une certaine image (de chargement par exemple) lors du Toggle et afficher le texte par après. Pour notre exemple, nous allons simplement colorer le texte en rouge, en combinant le callback avec les sélecteurs vus précédemment.
Voici un exemple :
CODE JAVASCRIPT
$('.enter').click(function(){
$(this).next('.content').slideToggle('slow', function(){
$(this).css('color', 'red');
}
);
});
Une fois l'animation terminée, on colore en rouge le texte de la class content.
Vous savez maintenant manipuler de manière plus ou moins complète les callBack, j'espère que vous en ferez un bon usage dans la dynamisation de vos pages web !
Conclusions
Vous savez maintenant utiliser la fonction slideToggle. Nous verrons dans un prochain tutoriel une manière plus avancée de l'utiliser.
Je vous conseil vivement d'aller lire la documentation jQuery en français. (
Cliquez ici)
Sondage du mois
La connaissance ne vaut que si elle est partagée par tous
Utilisateurs en ligne
Administrateur - Newsers - Rédacteurs - VIP - Membres - Bots
Anniversaire du jour
Amis en ligne (0)
La bifle - Extrait
