Enterprise jQuery est un site Web qui s’adresse aux développeurs front-end. Il leur permettre de trouver des solutions aux défis auxquels ils sont confrontés dans leur travail au sein des moyennes ou grandes entreprises. Chacun trouvera matière à améliorer ses connaissances sur jQuery, qu’il s’agisse de bouts de codes prêts à l’emploi ou des bonnes pratiques de développement.
jQuery.eventManager est un plugin qui permet de faciliter la gestion d’événement via delegate. Il suffit de créer un objet recensant les objets globaux, les événements attachés, le filtre et l’action à effectuer, comme par exemple :
var eventList = {
'div' : {
'mouseover' : {
'.sidebar' : function (elem) {
$(elem).addClass('over');
},
default : function(elem) {
$(elem).css('background-color':'red');
}
}
}
}
Pour faire appel au plugin eventManager :
$('#wrapper').eventManager(eventList);
Lire jQuery.eventManager, un plugin de gestion d’évènements.
jquery.eventManager est disponible sur GitHub.
Voir la démonstration.
Nick Parsons de Webitect nous propose sur Pro Blog Design 30 bouts de codes jQuery en prêt-à-porter taillés dans les meilleurs tissus. Dans les rayons, vous trouverez de quoi habiller les longues soirées d’été :
jQuery et WordPress ont en commun leur modularité : les plugins jQuery et les extensions WordPress permettent d’étendre les fonctionnalités de nos outils préférés. Le tutoriel montre comment utiliser les extensions WordPress pour insérer n’importe quel plugin jQuery dans le panneau des extensions WordPress, de manière propre et efficace.
Pour étendre la surface cliquable d’un lien les CSS sont bien utiles : il suffit d’augmenter le padding de l’ancre concernée. Mais ne serait-il pas judicieux de rendre cliquable l’élément parent d’un lien ? C’est ce que propose Eroan Boyer dans son billet Étendre la portée d’un lien avec Jquery :
<script type="text/javascript">
$(function(){
$(".zonecliquable").mouseover(function(){
$(this).css("cursor","pointer").find("a").css("text-decoration","underline");
}).mouseout(function(){
$(this).find("a").css("text-decoration","none");}).click(function(e){
document.location.href = $(this).find("a").attr("href");
e.preventDefault();
});
});
</script>
Notons toutefois que HTML5 permet à la balise a de contenir d’autres éléments, comme le suggère le W3C Working Draft :
<a href="http://ad.example.com/?adid=1929&pubid=1422"> <section> <h1>Mellblomatic 9000!</h1> <p>Turn all your widgets into mellbloms!</p> <p>Only $9.99 plus shipping and handling.</p> </section> </a>
jQuery Hotkeys Plugin permet d’ajouter ou supprimer des équivalents-clavier dans votre page Web. Gère la plupart des événements en une ligne de code :
$(document).bind('keydown', 'ctrl+c', fn);
$(document).unbind('keydown', 'ctrl+c', fn);Columnizer jQuery Plugin permet de maquetter automatiquement votre contenu en plusieurs colonnes pour donner un look « presse » à votre prose. Nombreuses options disponibles, dont notamment la possibilité de spécifier une largeur de colonne ou un nombre fixe de colonnes. via Rémi Garcia.
jQuery Fundamentals synthétise les éléments de syntaxe de jQuery sur une page web. La navigation s’effectue via un sommaire précis et structuré comprenant également un index des nombreux exemples utilisés.
Distribué sous licence Creative Commons par Rebecca Murphey.
Apple-like Retina Effect With jQuery est un tutoriel qui vous permettra de refaire chez vous l’effet loupe «Retina Display» proposé par Apple sur lav version 4 de l’iPhone. Vraiment bluffant, d’autant plus que le marquage HTML nécessaire est des plus simples :
<div id="main">
<div id="iphone">
<div id="webpage">
<img src="img/webpage.png" width="499" height="283" alt="Web Page" />
<div id="retina"></div>
</div>
</div>
</div>
Démonstration !
Via @LaFermeDuWeb
Antonio Lupetti vient de mettre à jour sa Cheat Sheet au format PDF pour prendre en compte les nouveautés de jQuery 1.4.2. disponible sur Scribd ou Flickr. Via Johan Bleuzen.