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');
     }
   }
 }
}

$('#wrapper').eventManager(eventList);

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é :

1. Delay with Animate() or delay(),
2. Loop through Elements Backwards
3. Is There Anything in the jQuery Object?
4. Access iFrame Elements
5. Equal Height Columns
6. Find a Selected Phrase and Manipulate It
7. Hack Your Titles to Prevent Widows
8. Add Pseudo-Selector Support in IE
9. Manage Search Box Values
10. Create a Disappearing « Back-to-Top » Link
11. Easily Respond to Event Data
12. Encode HTML Entities
13. Friendly Text Resizing
14. Open External Links in a New Window
15. Gracefully Degrading AJAX Navigation
16. Create an Array of GET variables
17. Partial Page Refresh Using load()
18. Skin with jQuery UI
19. Include Other Scripts
20. Use Body Classes for Easy Styling
21. Optimize Your Performance
22. Adapt Your Scripts to Work Cross-Browser – The Right Way
23. Configure jQuery to be Compatible with Other Libraries
24. Efficiently Store Element-Specific Information with data()
25. Extend/Modify Existing jQuery Functions
26. Reverse Engineer before() and after()
27. Add an isChildOf() Test
28. Add Custom Selectors
29. Smooth Scrolling Without Plugin
30. Add Tabs without a Plugin

Lire 30 Pro jQuery Tips, Tricks and Strategies

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.

Lire How to turn any jQuery plugin into a WordPress one.

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>

<a href="http://ad.example.com/?adid=1929&amp;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.

jQuery Fundamentals est disponible sur GitHub.

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>

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.