Mes p'tits bouts d'jQuery

Cela faisait longtemps, un post qui parle de code et de web sans être une référence de portfolio ! :)
Pour l’occasion, je vais partager avec vous les petites « fonctions jQuery » que j’utilise très régulièrement dans mes projets web, au point qu’elles font maintenant partie de ma trousse de base.
Je listerai aussi quelques plugins qui me semblent incontournables et qui vous éviteront parfois de tout refaire à la main…
Évidemment, toutes ces fonctions vous sont « offertes » sous license Creative Commons Paternité – Partage des Conditions Initiales à l’Identique 3.0 Unported License, ce qui veut dire que vous ne devez pas hésiter à les utiliser dans vos projets si vous le souhaitez, sous leur forme originale ou modifiée, dans des projets commerciaux ou pas, mais qu’il faudra les laissez libres et réutilisables sous les mêmes conditions !
Pour les plugins listés, qui ne sont donc pas de moi, je vous invite à consulter les licences qui les concernent !
ATTENTION cependant : je ne fournirai PAS de support sur ces fonctions, les commentaires devraient être suffisamment explicites pour que vous compreniez comment elles marchent, et sinon libre à vous de pointer sur cet article dans des forums pour avoir de l’aide ! ;)

Un petit mot avant de commencer : pour gérer ces fonctions récurrentes, j’utilise un outil, basé sur Adobe Air et donc multiplateforme, appelé Snippely.
Il prends en charge plusieurs langages (Javascript, PHP, Ruby, CSS, texte brut), avec coloration syntaxique, vous permets de grouper/ranger tous vos bouts de code et de les commenter…
Je vous le recommande chaudement, c’est bien pratique !

Ajuster la hauteur d’une famille de boites à la taille de la plus haute.

function mySameHeight(elt) {
    var heightBlockMax=0;
    var propertie = (jQuery.support.opacity) ? "min-height" : "height"; 
    // On choisit la propriété CSS à appliquer en fonction du support d'opacity (que IE ne reconnait pas)
    jQuery(elt).each(function(){ // Pour chaque élément
        var height = jQuery(this).height(); // On récupère sa hauteur
        if( height > heightBlockMax ) { // Si sa hauteur est plus grande que heightBlockMax...
            heightBlockMax = height; // ...heightBlockMax prends cette nouvelle valeur
        }
    });
    jQuery(elt).css(propertie, heightBlockMax); // Assigner la hauteur maximale comme hauteur / hauteur minimale (pour IE / les autres)
}
jQuery(document).ready(function() {
    mySameHeight('.mesBoites');
});

`

Permettre le rollover sur les images/input choisis

function imgRollover(elt) {
    jQuery(elt).live('mouseover', function(e){
        jQuery(this).attr("src", jQuery(this).attr("src").replace("-off","-on")); 
                // Sous réserve que vous ayiez nommées vos images en xxx-off.png (ou .gif, .jpg, etc) et xxx-on.png (etc)
    }).live('mouseout', function(e){
        jQuery(this).attr("src", jQuery(this).attr("src").replace("-on","-off"));
    });
}
jQuery(document).ready(function() {
    imgRollover('.mesImagesOuInputs');
});

`

Simuler le target=_blank (sans (trop) pourrir son html) *

jQuery('a[rel="external"]').live('click', function(evt) {
     window.open( jQuery(this).attr('href') ); // Ouvrir l'url du lien dans une nouvelle fenêtre
    evt.preventDefault(); // Annuler l'action d'origine du lien (<a href="http://api.jquery.com/event.preventDefault/" hreflang="en">plus propre que "return false;"</a>, merci Olivier ! :) )
});

`

(* Attention, je ne discute pas ici du bien fondé de la technique, d’aucuns diraient (à raison) qu’il faut laisser le visiteur choisir, mais parfois quand le client insiste…)

Avoir un bouton “Haut de page” qui remonte en haut avec une animation douce *

jQuery(document).ready(function() {
    jQuery('#backToTop a').live('click', function(evt) {
        jQuery('html, body').animate({scrollTop:0}, 'slow'); // Remonte au haut absolu de la page
        evt.preventDefault(); // Annuler l'action d'origine du lien
    });
});

`

(* Idem, on pourrait arguer qu’il vaudrait mieux laisser le comportement d’origine, etc… il est à noter cependant que ce script dégrade harmonieusement en l’absence de javascript puisque ledit comportement d’origine est conservé.)

Des outils pour agrandir/réduire (et remettre à zéro) la taille de la typo d’une ou plusieurs boites

//Assigner des valeurs aux variables : chemin des images, textes alternatifsvar 
FONT_BUTTON_PLUS_SRC = "images/interface/bt-font-plus-off.png";
var FONT_BUTTON_PLUS_ALT = "Augmenter la taille de la police";
var FONT_BUTTON_MINUS_SRC = "images/interface/bt-font-minus-off.png";
var FONT_BUTTON_MINUS_ALT = "Diminuer la taille de la police";
var FONT_BUTTON_RESET_SRC = "images/interface/bt-font-reset-off.png";
var FONT_BUTTON_RESET_ALT = "Réinitialiser la taille de la police";
function fontTools(elt,placeHolder) {
    jQuery(placeHolder).append('<li class="fontTools"><img src="'+FONT_BUTTON_PLUS_SRC+'" class="fontPlus swapImg" title="'+FONT_BUTTON_PLUS_ALT+'" alt="a+" /> <img src="'+FONT_BUTTON_MINUS_SRC+'" class="fontMinus swapImg" title="'+FONT_BUTTON_MINUS_ALT+'" alt="a-" /> <img src="'+FONT_BUTTON_RESET_SRC+'" class="fontReset swapImg" title="'+FONT_BUTTON_RESET_ALT+'" alt="a" /></li><!-- .fontTools -->');
    imgRollover('.swapImg');
    // Remise à zéro de la taille de typo
    var originalFontSize = jQuery(elt).css('font-size');
    jQuery(".fontReset").click(function(){
        jQuery(elt).css('font-size', originalFontSize);
    });
    // Augmentation de la taille de typo
    jQuery(".fontPlus").click(function(){
        var currentFontSize = jQuery(elt).css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum*1.25;
        jQuery(elt).css('font-size', newFontSize);
    });
    // Réduction de la taille de typo
    jQuery(".fontMinus").click(function(){
        var currentFontSize = jQuery(elt).css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum*0.8;
        jQuery(elt).css('font-size', newFontSize);
    });
}
jQuery(document).ready(function() {
    fontTools(".articleBlock","ul.articleTools"); 
    // élément dont on veut zoomer le texte, élément dans lequel on veut insérer les boutons
}

`

NB : Attention, il faut bien mettre un font-size: 1em; à la boite choisie, sous peine d’avoir de gros bugs sous IE (toutes versions) !

Ne Pas Toujours Réinventer La Roue

Et puis parce que c’est bien de faire son propre code mais qu’il faut aussi savoir capitaliser sur l’expérience et le travail des autres, il y a ces plugins faits par d’autres mais que nous devriez pas hésiter à utiliser quand c’est nécessaire… voici mes petits préférés (pour leur stabilité, légèreté, facilité à mettre en place, accessibilité, etc…) :

  • cycle : indispensable pour tous vos slideshows : une multitude d’effets, des options à ne plus savoir qu’en faire, en bref complètement customisable et véritablement souple, un plaisir !
  • jCarousel Lite : très utile pour vos carrousels, pas mal d’options, même si il commence à se faire vieux, je n’ai pas trouvé mieux…
  • jScrollPane : impeccable pour ces clients qui vous demandent des “scrollbars comme en flash” avec une apparence particulière : tout plein d’options et de callbacks, très versatile, fonctionne même au clavier et au scroll de molette !
  • colorbox : une des modales les plus complètes et stables, utilisable en mode iframe ou non, livrée avec plusieurs skins… adieu Thickbox ! :)
  • cufon : pour ces mêmes clients qui ne sont pas satisfaits du rendu de font-face et veulent un aspect “comme dans flash” (antialiasing, etc), c’est ma solution favorite !
  • Superfish : inspiré par l’article d’ALA qu’on ne nomme plus, LE script pour les navigations à sous-menu, horizontales ou verticales, avec accès clavier, etc.
  • Select box manipulation : moins connu, ce plugin est super utile pour la gestion des menus déroulants (remplissage par ajax, chaînage de plusieurs selects, etc), indispensable à condition de toujours fournir des alternatives fonctionnant sans JS bien sûr… :) A voir sur le site du créateur, d’autres plugins bien pratiques, comme “Checkbox manipulation” ou “preload images”…
  • Validation : l’indétrônable script pour gérer vos formulaires, avec des règles prédéfinies ou en créant les vôtres, avec callbacks et localisations.
  • jQuery UI : une flopée d’outils offerte par l’équipe de jQuery, complètement customisables, accessibles, testés et éprouvés… mes préférés : le Datepicker et la Progressbar.
  • jQuery UI Stars : un plugin bien pratique pour créer des systèmes de notation, entièrement customisables et dynamisables (avec exemples PHP fournis), la doc est un peu obscure et pas toujours très complète, mais l’outil est riche et versatile…

Parfois, vous ne trouverez pas de plugin qui fasse exactement ce que vous recherchez, et là libre à vous d’enrichir un plugin existant, ou de le coupler à du code à vous, etc, l’imagination est souvent la limite !

J’espère que cet article vous aura été utile, bien entendu n’hésitez pas si vous avez vous-même des bouts de code utiles que vous réutilisez souvent, ou si vous voyiez des moyens d’améliorer les miens ! :)

A bientôt pour de nouveaux articles (piratage, installation multiblogs et multidomaines d’un DC2, … mais je ne vous en dit pas plus ! :) )

Commentaires