Afin d'améliorer la convivialité de vos formulaires et leur ajouter une touche de web 2.0, nous allons y ajouter des bulles de message automatique lors du focus de la souris dans un élément d'un formulaire. Pour en savoir plus, jetez un oeil à ce qui suit :
Étape 1: Inclure la librairie Scriptaculous
Dans votre page, entre les balises <head>, insérer le code suivant :<script src="/prototype.js" type="text/javascript"></script>
<script src="/scriptaculous.js" type="text/javascript"></script>
<script src="/scriptaculous.js" type="text/javascript"></script>
Étape 2: HTML
Ajouter un formulaire dans votre page. Pour les besoins de notre exemple, nous allons lui ajouter un champ texte ainsi qu'un second caché afin de retenir l'état de la boîte de message.
Code :
** Attention au ID
<input type="text" name="name" id="name" onfocus="javascript:VoirMessage(1)"/>
<!-- 0 = Caché; 1 = Visible-->
<input id="msgstatus" type="hidden" value="0" />
<div class="msg" id="msg1" style="display:none;">
[...] Le texte de votre message [...]
<a href="#" onClick="javascript:CacherMessage(1)"> Fermer </a>
<div/>
<!-- 0 = Caché; 1 = Visible-->
<input id="msgstatus" type="hidden" value="0" />
<div class="msg" id="msg1" style="display:none;">
[...] Le texte de votre message [...]
<a href="#" onClick="javascript:CacherMessage(1)"> Fermer </a>
<div/>
Si vous avez plus d'un champ dans votre formulaire, il suffit de continuer la numérotation de vos messages en modifiant l'ID de celui-ci (id="msg1", id="msg2", id="msg3", id="msg4" ...). Ensuite il suffit de modifier le paramètre de la fonction VoirMessage(id) et CacherMessage(id) par le numéro du message à afficher.
Étape 3: JavaScript
Afin d'activer l'effet Scriptaculous, ajouter ce code dans votre page.
<script language="javascript">
// Affiche le message lors du focus sur l'élément selon l'id passé en paramètre
function VoirMessage(idElement){
idEl= idElement;
statusMenu = document.getElementById('msgstatus');
if(statusMenu.value==0){
statusMenu.value=1;
Effect.toggle('msg'+idEl, 'appear'); return false;
}
}
// Cache le message selon l'id passé en paramètre
function CacherMessage(idElement){
idEl= idElement;
statusMenu = document.getElementById('msgstatus');
if(statusMenu.value==1){
statusMenu.value=0;
Effect.toggle('msg'+idEl, 'appear'); return false;
}
}
</script>
// Affiche le message lors du focus sur l'élément selon l'id passé en paramètre
function VoirMessage(idElement){
idEl= idElement;
statusMenu = document.getElementById('msgstatus');
if(statusMenu.value==0){
statusMenu.value=1;
Effect.toggle('msg'+idEl, 'appear'); return false;
}
}
// Cache le message selon l'id passé en paramètre
function CacherMessage(idElement){
idEl= idElement;
statusMenu = document.getElementById('msgstatus');
if(statusMenu.value==1){
statusMenu.value=0;
Effect.toggle('msg'+idEl, 'appear'); return false;
}
}
</script>
Voilà, rien de plus simple et l'effet est magnifique. Donc si vous désirez afficher certains messages dans vos formulaires, essayer ce truc, il est formidable et c'est à la mode!
Ajouter aux favoris
Bookmarker
Envoyer par mail
Vu: 1305
Rétrolien(0)
Adresse URI pour un rétrolien sur cet articleCommentaires (0)
