Vous pouvez passer plusieurs heures à perfectionner un design Web, mais il ne vous faudra pas longtemps pour utiliser des morceaux semblables à d’autres applications ou sites Web. C’est pourquoi, je souhaite vous parler d’un élément de Twitter que j’aime bien, c’est le bouton « Suivre ».
Ainsi, permettez moi de vous montrer comment implémenter cette fonctionnalité à l’aide d’une bibliothèque JavaScript populaire : jQuery.
Note: Ce tutoriel va afficher uniquement le côté client de l’envoi du formulaire. Côté serveur, le traitement de la demande en PHP / MYSQL n’est pas décrit. Vous pouvez tout de même poser vos questions dans la partie commentaires
La structure HTML
<form class="form-follow" method="post" action="index.php">
<input type="hidden" name="follow-id" value="123" />
<button type="submit" value="Actions" class="btn follow" title="Poiron Yohann">
<em></em><span>Suivre</span>
</button>
</form>
[/sourcecode]
Le code HTML pour le bouton est très simple. La structure s’articule autour d’un élément bouton qui contient un élément em et un élément span.
Les styles CSS
/* Bouton twitter */
button.btn {
-moz-border-radius:4px;
-webkit-border-radius:4px;
background-attachment:scroll;
background-color:#ddd;
background-image:url(http://s.twimg.com/a/1282150308/images/buttons/bg-btn.gif);
background-position:0 0;
background-repeat:repeat-x;
border:1px solid #ddd;
border-bottom:1px solid #ccc;
color:#333;
cursor:pointer;
font-family:"Lucida Grande",sans-serif;
font-size:11px;
line-height:14px;
padding:4px 8px 5px 8px;
text-shadow:1px 1px 0 #fff;
vertical-align:top;
}
button.btn:hover {
border:1px solid #999;
border-bottom-color:#888;
color:#000;
background-color:#d5d5d5;
background-position:0 -6px;
}
button.btn:active {
background-image:none !important;
text-shadow:none !important;
}
button.btn em {
background-image:url(http://s.twimg.com/a/1282150308/images/sprite-icons.png);
background-position:-176px -32px;
background-repeat:no-repeat;
display:inline-block;
height:13px;
margin-right:5px;
width:15px;
}
button.btn em.active {
background:url(http://s.twimg.com/a/1282150308/images/spinner.gif);
}
span.following {
background:#ffd; padding:5px 10px;
}
span.following span {
width:10px;
height:9px;
margin-right:5px;
display:inline-block;
background:url("http://s.twimg.com/a/1282150308/images/sprite-icons.png") -160px -16px no-repeat;
}
[/sourcecode]
La plupart des styles pour ce bouton vont sur l’élément bouton lui-même. Vous remarquerez les directives pour compléter le bouton, laissant la touche qui plaît à l’œil. En fonction de l’état du bouton (actif, survol, …), le changement du fond, des couleurs sont modifiées sans le besoin d’images supplémentaires. On remarque également que j’utilise l’effet CSS Sprites (tout comme Twitter), qui consiste à regrouper toutes (ou une partie) de vos images utilisées dans vos CSS en une seule et de la positionner ensuite via des coordonnées X et Y.
Le JavaScript jQuery
jQuery(document).ready(function() {
/* Recherche des éléments */
jQuery(‘form.form-follow’).each(function() {
/* événement de formulaire d’arrêt */
jQuery(this).bind(‘submit’,function(e) {
/* cas d’arrêt */
e.preventDefault();
/* lors de la demande */
jQuery(this).find(’em’).addClass(‘active’);
/* boutton de d’enregistrement */
var button = jQuery(this).find(‘button’);
/* envoie de la requête AJAX */
jQuery.post(‘index.php’,{
followID: jQuery(this).find(‘input’).val()
},function() {
/* cache le bouton et création de l’élément Abonné */
button.css(‘display’,’none’).after(‘<span class="following"><span></span>Abonné !</span>’);
});
});
});
});
[/sourcecode]
La première étape est de saisir tous les éléments du formulaire avec la classe CSS ‘form-follow‘. Après la soumission du formulaire, l’affichage par défaut est stoppé. Une requête AJAX est envoyée, utilisant la valeur de l’élément input que l’utilisateur veut suivre. Lorsque la demande est en cours, l’image d’arrière-plan change. Enfin, lorsque la requête est complète, le bouton est caché et un nouvel élément span est affiché informant l’utilisateur que désormais il suit l’utilisateur donné.
Note: Il est également possible d’utiliser les bibliothèques Javascript : Dojo et MooTools
Ce bouton « Suivre » n’est qu’un des nombreux détails de Twitter qui a retenu mon attention, permettant de rendre la navigation de l’utilisateur sur le site de meilleure qualité. On peut noter l’effort mis en avant par de grands sites Web – l’ajout de ces détails à vos sites Web plus petits, ne peut être que bénéfique pour vos utilisateurs.
[samples id= »662″]
Qu’en pensez-vous ?
