** ATTENTION : Ce guide est réservé au plus chevronné d'entre vous. Plusieurs adaptation sont nécessaire afin que tout fonctionne.
Vous avez surment déjà vue un bouton dropdown et vous vous êtes toujours demandé comment faire ? Et bien ce guide est là pour y répondre. Ok, peut-être pour beaucoup d'entre vous ce n'est qu'une banalité, mais je suis sûr que plusieurs d'entre vous seront intéresseré à le savoir. Pour celles-ci, voilà une bref tutorial.
Avant tout j'ai exploité exclusivement les standards, en maintenant mon code Xhtml propre et valide, ainsi comme mon CSS. L’interaction a été réalisée en exploitant certaines librairies Javascript gratuites et distribuées gratuitement sous licences GPL. En particulier, ils vous faudras avoir sous la main :
Avant tout, maintenant que nous avons les librairies en mains, incluons les dans les nôtre document HTML, ainsi :
<script type="text/javascript" xsrc="/js/prototype.js"></script>
<script type="text/javascript" xsrc="/js/scriptaculous.js"></script>
<script type="text/javascript" xsrc="/js/behaviour.js"></script>
Évidemment adaptées les chemin d'accès des file sur la base de la structure de vos site. Après quoi, nous devrons créer les deux éléments impliqués dans l'interaction, respectivement le link qui active / désactive l’animation et le Div avec les contenus à cacher..
Nous commencerons avec le link :
<a id="open" xhref="javascript:void(0);" >Open</a>
<a id="close" xhref="javascript:void(0);" style="display:none;">Close</a>
Il est important d'établir l'ID des éléments, nous verrons leur utilités sous peu. Ensuite nous créons un Div avec les contenus : Nous l'appelerons contents. Maintenant, normalement, pour associer une fonction Javascript à un link il faut employer employer l’attribut onclick du tag <a>.
<div id="contents" style="display:none;">
bla bla bla bla bla bla
</div>
C'est ici que rentre en scène la librairie Behaviour, qui nous donne la possibilité de jumeler des fonctions javascript à des éléments HTML en utilisant les sélecteurs CSS sous certaine règle :
// Rules
var myrules = {
'#open' : function(element){
element.onclick = function(){
var targetDiv = $('contents');
new Effect.BlindDown(targetDiv,{duration: 0.5});
new Effect.Fade(this);
Effect.Appear('close', {delay: 1});
}
},
'#close' : function(element){
element.onclick = function(){
var targetDiv = $('contents');
new Effect.BlindUp(targetDiv,{duration: 0.5});
new Effect.Fade(this);
Effect.Appear('open', {delay: 1});
}
}
};
Nous sauvons ce fichier javascript dans rules.js et incluons le dans nôtre document HTML.
<script type="text/javascript" xsrc="/js/rules.js"></script>
Le code suivant exploite les librairies de Script.aculo.us pour les effets animés et de Prototype pour la manipulation et l’identification des éléments HTML. Maintenant, Behaviour demande que le code suivant soit inséré dans votre page HTML afin que les règles écrits précédement soient prit en ligne de compte :
<script type="text/javascript">
// <![CDATA[
// Behaviour Rules
Behaviour.register(myrules);
// ]]>
</script>
Je vous conseil d'insérer ce script à la fin de la page, juste avant la fermeture du tag <body>. À ce point-ci vous pouvez maintenant ouvrir votre browser favoris pour y voir plus clair. Fonctionne-il ? Le résultat devrait être semblable au drop down que vous voyez sur l'image situé en haut de ce guide, image différente bien sur. Il est évident qu'avec un peu plus de code vous pourrez faire quelques chose de vraiment jolie.
Rétrolien(0)
Adresse URI pour un rétrolien sur cet articleCommentaires (0)
