Des morceaux de code jQuery très utiles

jQuery a donné une nouvelle vie au JavaScript, il est désormais possible de construire des pages web puissantes et réactives. Voici donc 10 portions de code qui vous aideront sûrement :

Précharger les images :

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
        var args_len = arguments.length;
        for (var i = args_len; i--;) {
          var cacheImage = document.createElement('img');
          cacheImage.src = arguments[i];
          cache.push(cacheImage);
        }
  }

jQuery.preLoadImages("image1.gif", "/path/to/image2.png");

Liens en target=”blank” :

Ce code vous permet d’ouvrir tous les liens avec l’attribut rel= »external » dans un nouvel onglet.

$('a[@rel$='external']').click(function(){
         this.target = "_blank";
});

/*
   Usage:
   Blog.avis-planethoster
*/

Ajouter une classe à la balisesi JavaScript est activé :

C’est une des manières pour détecter si le client à JavaScript d’activé sur son navigateur Si oui, la classe hasJS sera ajoutée à la balise.

$('body').addClass('hasJS');

Défilement en douceur vers une ancre :

jQuery est connu pour sa capacité à permettre aux développeurs de créer facilement des effets visuels étonnants. Un effet simple, mais un belle est lisse défilement à une ancre. L’extrait suivant va créer un effet lisse coulissant vers un lien avec la classe topLink lorsqu’il est cliqué.

$(document).ready(function() {
        $("a.topLink").click(function() {
                $("html, body").animate({
                        scrollTop: $($(this).attr("href")).offset().top + "px"
                }, {
                        duration: 500,
                        easing: "swing"
                });
                return false;
        });
});

Fade in/out au survol ( hover ) :

Un autre effet très frais – ce qui est très populaire parmi les clients – est en effet le fade in / fade out sur ​​le mouseover. Le code ci-dessous présentent une opacité à 100% sur hover, et à 60% sur mouseout.

$(document).ready(function(){
        $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads

        $(".thumbs img").hover(function(){
                $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
        },function(){
                $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
        });
});

Activer le HTML5 markup dans les vieux navigateurs :

HTML5 est définitivement l’avenir du développement Web côté client. malheureusement, certains anciens navigateurs ne reconnaissent même pas de nouvelles balises telles que tête ou section. Ce code va forcer les anciens navigateurs à reconnaître les nouvelles balises introduites par HTML5.

(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

La meilleur solution est de lier le fichier .js dans le head: