On a le droit à un topo très complet et intéressant, en anglais, de la part de l’équipe de elated sur la sortie de jQuery Mobile 1.3. Je vous le conseille franchement.

Un énième site pour répertorier les plugins vient de voir le jour. Il a pour mérite d’être plutot bien réalisé et de regrouper plus de 600 plugins. J’espère qu’ils continueront d’alimenter la liste, unheap fait désormais partie de mes sources de plugins. Merci à tous les twittos qui en ont parlé et qui m’ont permis de découvrir ce service.

Comme souvent, Megaptery a su nous dégoter une jolie petite perle. Tooltipster est un plugin de tooltip très complet et qui permet une énorme personnalisation via CSS. Personnellement, je préfère de loin ce plugin à celui de Twitter Bootstrap.

C’est tout pour cette semaine, j’espère avoir le temps de bloguer sur d’autres choses cette semaine. Vous pouvez retrouver l’ensemble des liens de cette chronique sur un carnet dédié sur Evernote.

Dernière petite chose, que pensez vous de cette chronique ? Que voulez vous de différent ? Avez-vous des choses à proposer ? J’aimerais bien avoir vos avis.

Article original de MathieuRobin
Aller sur Planète jQuery

Article original de LaFermeDuWeb
Aller sur Planète jQuery

Sortie de la beta 2 de jQuery 2.0 !

L’annonce a été faite vendredi par Dave Methvin. Bien entendu, le support de IE 6, 7 et 8 a été supprimé. Vous devrez donc faire quelque chose de ce genre si vous souhaitez migrer et continuer de supporter ces navigateurs :

Au delà de ça, je vous laisse regarder le lien ci-dessus, trop de détails pour vous les détailler ici et je manque malheureusement de temps. Cette version amène énormément de changements, la migration risque d’être délicate. Le lien contient le changelog complet.

Autre information officielle, le déroulement de jQuery Europe le 23 et 24 février dernier à Vienne. J’avais raté l’information mais mon amie Anne-Gaëlle Colom m’a permis de rattraper ce manque. Voilà le lien officiel sur l’évènement, vous trouverez un article assez intéressant sur le sujet chez PR Newswire UK.

L’agence de presse déléguée sur place a partagé ses photos. Dans l’ordre celles du vendredi et celles du samedi. Et celles de Gentics Software le vendredi et le samedi.

Je n’ai pas eu le temps de me pencher là dessus, mais le weekend dernier, la conférence jQueryTO a eu lieu à Toronto.

Avant de continuer, je remercie donc Anne-Gaëlle pour toutes ces informations que je n’avais pas pu glaner.

Un tutoriel imposant côté officiel a été publié et me fait un peu penser aux tutoriels de la KhanAcademy ou encore comme le tutoriel pour GitHub.

Passons aux plugins, avec une grosse fournée cette semaine. La palme revient à Stéphanie Walter. Son épisode 51 était très riche pour ma propre chronique.

Hook.js, un plugin pour faire comme une sorte de pull-to-refresh, comme sur Twitter. Ce plugin séduit pas mal en ce moment, il a aussi eu le droit à un article chez La Ferme du Web.

Toolbar.js, une sorte de barre d’outils, très simple, mais reste efficace.

Dans les autres outils, on peut compter :

JSZip, pour zipper et dézipper via JavaScript.

Edit du 6 mars 2013 : apparemment cette bibliothèque a quelques soucis majeurs, voire le commentaire de check_ca (http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-107/#comment-3073)

MetTile, un ensemble de tuiles graphiques pour simuler l’interface de Metro, la dernière UI de Microsoft. Et pour une fois, ce kit est vraiment réussi.

jQuery.IO, un plugin qui permet de basculer de façon aisée d’un format de données à un autre.

Encore une fois, les liens de cette chronique sont disponibles sur un carnet Evernote dédié.

Article original de MathieuRobin
Aller sur Planète jQuery

Une infobulle à base de CSS

Le plugin génère des infobulles simples et élégantes dont le style est entièrement personnalisable via CSS (typographie, couleur, padding, ombres, etc) et met à disposition plusieurs paramètres de configuration : position de la tooltip par rapport à la souris, délai d’apparition, largeur automatique ou fixe, affichage et couleur de la flêche, placement « intelligent » pour éviter les collisions… etc. Plusieurs thèmes CSS sont disponibles pour skinner vos tooltips, que vous pouvez bien sûr modifier à votre convenance.

Le contenu de l’infobulle peut provenir de différentes sources (en brut dans le JS, title d’un lien, ou encore appel AJAX) et il existe des fonctions de callback. On retrouve également un paramètre animation qui détermine la manière dont l’infobulle apparaît en arrivée et en sortie, le tout géré en full CSS via les transitions CSS3 (sauf pour IE). Vous pouvez donc modifier ou créer vos propres animations via la feuille de style fournie avec le script. Vous l’aurez compris, le plugin est assez modulable.

Mise en place d’une infobulle

On commence par inclure jQuery et le plugin Tooltipster (feuille de style et script JS) que vous pouvez télécharger aussi bien sur le site officiel du plugin que sur GitHub :

On définit une classe CSS (ici tooltip) à appliquer sur les éléments HTML sur lesquels on veut afficher les infobulles. Par défaut, Tooltipster utilise l’attribut title pour remplir la bulle, que ce soit une div, une image ou un lien. A noter que le script nous permet d’utiliser n’importe quelle balise HTML dans l’attribut title. Vous pouvez par exemple insérer des images, à condition de spécifier ses dimensions dans les attributs width et height, ou des balises de formatage de texte.

On termine par activer le plugin jQuery. Pour cela, on appelle Tooltipster sur la classe CSS définie précédemment et votre infobulle est alors fonctionnelle :

$(document).ready(function() {
   $('.tooltip').tooltipster();
});

Utilisation des thèmes CSS

Le style de vos infobulles peut être facilement changé en modifiant le thème par défaut de Tooltipster qui se trouve dans le fichier tooltipster.css. Vous avez également la possibilité d’ajouter des nouveaux thèmes, très pratique si vous souhaitez en utiliser plusieurs sur votre site). Pour cela, partez de l’exemple et ajouter votre touche personnelle :

.my-custom-theme {
	border-radius: 5px; 
	border: 2px solid #000;
	background: #4c4c4c;
	color: #fff;
}

.my-custom-theme .tooltipster-content {
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 16px;
	padding: 8px 10px;
}

Il vous suffit alors de sélectionner votre thème personnalisé via le paramètre theme comme ceci :

$('.tooltip').tooltipster({
    theme: '.my-custom-theme'
});

Pour conclure, Tooltipster est un plugin jQuery rapide à mettre en place pour afficher des infobulles entièrement customisables.

Requis : jQuery
Compatibilité : Firefox, Chrome, Opera, Safari, IE8+
Démonstration : http://calebjacob.com/tooltipster/
Licence : MIT

Article original de Megaptery
Aller sur Planète jQuery

Article original de LaFermeDuWeb
Aller sur Planète jQuery

Heureusement pas grand chose à signaler cette semaine, la seule nouvelle qui a retenu mon attention est la sortie de jQuery Mobile 1.3.

L’annonce publiée mercredi par Todd Parker alors que prévenue lundi à l’origine, mais bon, les gars de l’équipe restent des volontaires, ils font au possible. Rien à redire donc, d’autant que je connais ça aussi.

L’accent pour cette nouvelle version a notamment été mis sur l’approche du responsive design. Une question récurrente est l’utilisation ou non du pur responsive ou mélanger un site classique et un site mobile. Leur réponse est : les 2. Il semble pratique en effet d’avoir un site consultable partout et un site vraiment dédié à un usage mobile optimisé.

Au passage, petite info bonne à savoir, ils ont travaillé pas mal donc sur porter en CSS ce qu’il était possible de faire avec au lieu de le faire en JS.

De nouveaux widgets ont fait leur apparition :

• les Panels ;
• les tableaux responsives ;
• le sélecteur de colonnes ;
• le dual range slider ;
• les grilles responsives.

Le support de IE 10 et Windows Phone 8 vient compléter la liste des choses clés. Evidemment, jQuery 1.9.1 est supporté et ils sont confiants sur le support de la très proche jQuery 2.0. à venir.

Un évènement facilitant la navigation. Je vous invite à jouer avec $.mobile.navigate.

Dans les plus petites  modifs restant bien pratiques, vous pouvez choisir l’emplacement du bouton de fermeture ou carrément le désactiver. Vous pouvez aussi refuser le clic à l’extérieur comme pouvant fermer les popups, les transformant ainsi en fenêtre modale. Bien pratique à l’occasion.

Coté sites, vous avez à votre disposition un nouveau site de démonstration et de documentation.

Attention, alerte au deprecated, les nested listviews sont désormais deprecated, leur support sera supprimé avec la 1.4. Commencez donc à porter votre code si vous voulez pouvoir assurer les mises à jour.

Vous pouvez accéder au changelog complet et comme d’habitude à mon carnet Evernote partagé dédié.

Article original de MathieuRobin
Aller sur Planète jQuery

Article original de LaFermeDuWeb
Aller sur Planète jQuery

→ DIYSlider est disponible sur Github.

Article original de Js4Design
Aller sur Planète jQuery

Côté officiel, on a la sortie de jQuery UI 1.10.1 !

Comme d’habitude, c’est Scott González qui se colle à l’annonce de cette version de maintenance, la première de la 1.10. Celle-ci n’apporte rien de plus que des correctifs de bogues pour les widgets Accordion, Autocomplete, Datepicker, Dialog, Menu, Slider, Draggable, Position, Effects ainsi qu’au framework CSS.

Comme d’habitude, le changelog est disponible et le guide de mise à jour a lui aussi été mis à jour.

Et on a aussi les notes de la dernière réunion de l’équipe de jQuery Mobile. Pas mal d’infos sont donc disponibles pour nous mettre l’eau à la bouche :

• La version finale de la 1.3.0 sera disponible normalement aujourd’hui ;
• Nouvelle version du site de documentation ;
• Un apport supplémentaire de démos est en travail pour aujourd’hui aussi.

Des trucs sympas en prévision quoi.

Et pour terminer, un tutoriel assez balaise sur l’usage des objets Deferred et Promise, notamment dans jQuery mais aussi EmberJS. Je le conseille sincèrement à la lecture, c’est un beau morceau.

Comme d’habitude, les liens ici présents sont disponibles sur un carnet partagé dédié sur Evernote. Pour rappel, pourquoi je partage sur Evernote et comme s’en servir.

Article original de MathieuRobin
Aller sur Planète jQuery

Il y avait quelques temps déjà que je devais vous faire un nouvel article sur le plugin jQuery GMAP3, plugin qui facilite grandement l’intégration de Google Maps sur vos sites web et le tout via le Framework jQuery.

Je vous avais déjà présenté ce plugin jQuery sur d’autres articles du blog, comme sur GMap3 – Plugin jQuery pour API Google Maps 3ème version. Mais GMAP3 a évolué et s’est vu doter d’un nouveau site web depuis.

Certes, Google facilite déjà beaucoup l’intégration de son API sur les sites web, mais via GMAP3 c’est encore plus simple et surtout avec jQuery.

En plus de pouvoir utiliser toutes les méthodes natives à l’API fournie par Google, GMAP3 va vous permettre, entre autre, de :

• Customiser vos maps
• Créer vos menus contextuels
• D’ajouter des recherches d’adresses avec auto-completion
• Créer vos marqueurs sur les maps
• Afficher le streetview de manière différente
• etc…

Le tout aisément, sans compter les méthodes comme : overlays, clusters, callbacks, events etc… présentes dans de nombreux plugins jQuery.

L’utilisation de base de ce plugin jQuery :

Intégration des librairies qui vont être utilisées (jQuery, googlemaps et gmap3)

Le code jQuery pour l’affichage d’une map Google Maps :

La balise div d’accueil de la map :

Puis un peu de CSS minimum pour donner une dimension à la balise div d’accueil :

Vous l’aurez compris, c’est simple, vous avez une page de démo via ce lien afin de voir une partie de ce que l’on peut faire avec ce plugin jQuery.

Site officiel du plugin jQuery GMAP3 : http://gmap3.net
Documentation GMAP3
Téléchargement GMAP3

Articles qui peuvent vous intéresser :

• Growl – Plugin jQuery – La SimpleBox
• quickSearch – Plugin jQuery – La recherche facile dans vos listings
• carouFredSel – Plugin jQuery – Le carrousel customisable
• Tiny Circleslider – Plugin jQuery – Le slider en cercle original
• jNotify – Plugin jQuery – La notification à portée de clic

Article original de LudiKreation
Aller sur Planète jQuery

Article original de LaFermeDuWeb
Aller sur Planète jQuery

Il est vrai que la question est délicate mais certains critères sont simples et permettent de faire un énorme tri. Je vous en expose quelques uns ici, non triés, vous pouvez y conférer l’importance qui vous convient.

Critère n°1 : l’activité du plugin

Quand vous utilisez un logiciel, c’est comme lorsque vous utilisez une voiture ou, mieux, un ascenseur. En général, vous appréciez que quelqu’un soit capable de vous aider. Si possible un vrai expert de la technologie concernée qui peut réellement agir efficacement.

Un plugin, comme tout logiciel, doit encore être maintenu. En une phrase : je vous laisse à votre imagination pour un ascenseur non maintenu.

Critère n°2 : Responsive design

De mémoire, les premières publications concernant un design web dynamiquement adaptatif pour les mobiles datent de novembre 2009 (Mobile First). C’était il y a un peu moins de 4 ans. Comme l’a très bien affirmé Kevin Schaaf de Enyo à dotJS :  »l’heure est venue d’arrêter de se demander si ça sera responsive ou non. Ça doit l’être, c’est tout« .

Le responsive design ne fait pas tout. Je ne sais quoi penser de la polémique à propos du sacrifice des sites mobiles dédiés au profit d’un unique site responsive. Il y a toute une question d’impact sur le SEO. Quoi qu’il en soit, que vous ayez un site mobile ou non, votre site doit être responsive.

D’ailleurs une version responsive de ce blog est en cours de développement. L’API de WordPress est juste infâme.

Critère n°3 : les tests

On reste dans la métaphore ascensionnelle avec l’ascenseur qui sera plus parlante que la voiture. Sincèrement, vous monteriez dans un ascenseur en sachant pertinemment que son constructeur/installateur n’a fait aucun test hormis ceux à la conception en usine ?

Critère n°4 : la documentation

Pour le coup, changement de métaphore. Vous aimez bien monté les meubles d’un certain fabricant suédois sans plans ?

Critère n°5 : l’accès aux sources

Arrêtons de charger des plugins à droite à gauche sur des sites dédiés plus ou moins bien référencés. GitHub existe, BitBucket aussi, le partage de code est facile, simple et plus qu’efficace. Un développeur qui garde pour lui son code ne mérite plus à l’heure actuelle qu’on utilise son travail. Et accessoirement, c’est surtout une question de performances et de qualité de code. Le fait de pouvoir plancher à plusieurs sur un problème peut beaucoup aider en général.

Des annuaires de qualité existent, je pense par exemple au site officiel fraîchement refait. Ou à jQuery Rain. Ou encore des testeurs en chaîne tels que l’ami Megaptery ou encore Js4Design. Il est rare que je cherche un plugin ailleurs que sur ces deux derniers sites pour une utilisation intensive professionnelle.

Critère n°6 : le prix

La gratuité d’un soft, c’est très bien. Mais ça ne fait pas tout. Des sites comme CodeCanyon, proposent d’excellentes ressources payantes. Mais parfois, il revient moins cher d’acheter un plugin très bien réalisé quelques $/€ plutôt que de passer plusieurs heures à déboguer/adapter un plugin trouver gratuitement.

Critère n°7 : la compatibilité

Je ne vous ferai pas l’affront de réclamer que vos plugins soient compatibles IE 6 ou Netscape, mais sur tous les navigateurs de moins de 5 ans d’age, ce n’est pas trop demander, surtout quand on s’appuie sur jQuery qui se charge de l’essentiel.

Conclusion

Ce sont des règles d’or pour moi, mes plugins ne les respectent pas toutes, j’y travaille.  Cependant elles peuvent vous éviter un paquet de soucis.

Article original de MathieuRobin
Aller sur Planète jQuery

Du côté de l’officiel, on a la mise à disposition du premier patch jQuery 1.9.1 !

Essentiellement des correctifs de bogues et de régressions, je vous laisse lire le changelog  et le guide de migration sur l’annonce officielle.

Du côté de jQuery Mobile, on a la RC1 de la 1.3 qui est sorti. L’annonce officielle est disponible ici. Des petites nouveautés sympathiques sont incluses. Il y a notamment les panels qui m’ont l’air pas mal.

Autre chose que j’attendais depuis longtemps, une mise à jour de QUnit vers la 1.11. La modification clé qui m’importe est l’affichage du temps d’exécution par test. Celle-ci permettant donc de profiler un peu mieux l’exécution de vos applications.

Côté non-officiel, je vous incite à jeter un oeil à tout ça :

• Making Use of jQuery UI’s Widget Factory, un tutoriel pour utiliser la widget factory de jQuery UI par NetTuts+ ;
  
• Des notifications à la façon de l’interface Metro, c’est particulièrement réussi ;
• Le JournalDuNet a publié un tutoriel pour créer une première application jQuery Mobile, ce tutoriel est directement inspiré du livre Introduction à JQuery Mobile de Jon Reid ;
• Et mon ami canhory a publié un boilerplate de plugins que je n’ai pas pu tester en profondeur mais bien pensé.

Je sors le tutoriel suivant de la pile ci-dessus parce qu’il est vraiment important et clé pour comprendre la mécanique interne de jQuery. « Do You Know When You Are Looping in jQuery? » explique la logique des boucles de jQuery. La compréhension des explications qui y sont dispensées sont clés pour une amélioration plus que significative des performances de vos applications.

Comme d’habitude, les ressources de cette chronique sont disponibles dans un carnet partagé dédié sur Evernote.

Bonne semaine à tous, et normalement à la semaine prochaine pour la chronique et dans le courant de la semaine pour d’autres publications.

Article original de MathieuRobin
Aller sur Planète jQuery

App Folders

App Folders est un plugin jQuery dédié aux smartphones qui imite le comportement des dossiers de l’interface iOS : lorsqu’on clique sur un dossier, les fichiers qui s’y trouvent s’affichent alors dans un volet coulissant. Ici, les « fichiers » sont des éléments HTML (images, textes, vidéos, etc) et les « dossiers » sont liés à des URL. Le script fonctionne sur tous les écrans (responsive) et peut être facilement customisé.

• http://app-folders.com/

Easing

Les fonctions Easing (easeOutElastic, easeInQuint, etc) permettent de préciser la vitesse d’exécution d’une animation pour la rendre plus réaliste. En effet, dans la réalité un objet ne commence pas son mouvement instantanément et à vitesse constante : il subit une accélération et une décélaration. Voici un site qui partage le code de plusieurs fonctions Easing en trois langages : JavaScript (via le plugin jQuery Easing), SASS et CSS3 (courbes de Bézier).

• http://easings.net/

Piecon

Piecon est une petite librairie JavaScript permettant de modifier à la volée le favicon d’une page afin de montrer un graphique de progression (pie chart) ou de modifier son title afin d’afficher un pourcentage de progression. Cela peut être utile dans le cas d’un upload de fichier : l’utilisateur peut continuer à naviguer et jeter un coup d’œil à l’onglet qui indique l’avancement de la mise en ligne.

• http://lipka.github.com/piecon/

Motio

Motio est un plugin jQuery spécialisé dans l’animation de sprites CSS, conçu aussi bien pour faire défiler un décor que pour mettre en mouvement un personnage. Plusieurs options sont configurables : sens de l’animation (vertical ou horizontal), mise en pause, nombre de FPS (images par seconde), vitesse de défilement, etc.

• http://darsa.in/motio/

Gemicon

Gemicon est un pack gratuit de plus de 600 icônes au format PNG et disponibles en plusieurs tailles (16×16, 32×32, 64×64). Le pack contient également les images vectorisées au format PSD, donc redimensionnables sans perte de qualité. Le set peut être utilisé aussi bien pour un usage personnel que pour un projet commercial.

• http://gemicon.net/

PlaceIt

PlaceIt est un outil vous permettant de générer en quelques secondes des captures d’écran réalistes via un simple drag-and-drop : il insère l’image dans le support de votre choix (iPad, iPhone, Android, etc) et applique automatiquement les reflets et les inclinaisons pour un rendu réaliste et contextuel de votre capture d’écran. Vous pouvez voir un exemple d’utilisation sur la couverture de la page Facebook Megaptery.

• http://placeit.breezi.com/

Flipping Circle Slideshow

Flipping Circle Slideshow est un mini slideshow circulaire développé avec jQuery par l’équipe de Codrops. Il s’agit d’un concept expérimental : l’idée est de retourner la slide dans le cercle (flip) avec un angle spécifique selon l’endroit où vous cliquez. L’effet est plutôt réussi.

• http://tympanus.net/Development/CircleFlipSlideshow/

Bootsnipp

Bootsnipp est une collection de snippets (HTML/CSS, JS) et éléments graphiques qui viennent compléter le framework Bootstrap développé par Twitter. Vous retrouverez tout un tas d’interfaces externes au framework prêtes à l’utilisation : formulaires, barres de navigation, sliders, graphiques… mais aussi des cas très spécifiques (fenêtre de tweet, interface Gmail, etc). Bref, c’est assez varié. Un petit copier-coller et le tour est joué.

• http://bootsnipp.com/

One% CSS Grid

One% CSS Grid est un framework CSS responsive basé sur un système à 12 colonnes avec deux résolutions de départ (1024px et 1280px). Léger et facile en prendre en main, l’outil est compatible avec tous les terminaux mobiles et propose également une grille pour le logiciel Photoshop.

• http://onepcssgrid.mattimling.com/

PlayThru

Basé sur HTML5, PlayThru est une bonne alternative au célèbre Recaptcha de Google. En effet, ce service remplace le captcha traditionnel par un petit jeu interactif et ludique : une consigne vous décrit les opérations à effectuer (manipulation d’objets via la souris ou le tacticle) pour être considérer comme un être humain, par exemple garer des voitures, poser des canettes dans une glacière… etc. Plutôt original ! Compatible avec tous les navigateurs récents.

• http://areyouahuman.com/

jQuery Snipe

Similaire à Zoomy, Snipe est un plugin jQuery qui permet de mettre en place un effet de loupe sur vos images au survolement de la souris. Pour cela, il est nécessaire de fournir deux images au script, l’image normale et l’image zoomée, ce qui donne la possibilité de jouer sur leurs différences (par exemple avec la couleur). Le style CSS de la loupe est totalement personnalisable.

• http://rayfranco.github.com/jquery.snipe/

Article original de Megaptery
Aller sur Planète jQuery

Avec Simple HTML DOM, il est possible de :

• Rechercher des éléments,
• Modifier le contenu d’un élément,
• D’extraire du contenu.

Ainsi, pour rechercher tous les articles présents sur une page, il suffit de quelques lignes, comme par exemple :

// Create DOM from URL
 $html = file_get_html('http://slashdot.org/');
// Find all article blocks
 foreach($html->find('div.article') as $article) {
 $item['title']     = $article->find('div.title', 0)  ->plaintext;
 $item['intro']     = $article->find('div.intro', 0)  ->plaintext;
 $item['details']   = $article->find('div.details', 0)->plaintext;
 $articles[] = $item;
 }
print_r($articles);

Le site propose de nombreux exemples d’utilisation. Toutefois, vous trouverez chez David Walsh un exemple complet pour vérifier si des pages web on été modifiées et vous envoyer un mail le cas échéant.

→ Simple HTML DOM est sur Sourgeforge.

Voir aussi phpQuery pour sélectionner les éléments du DOM côté serveur (via @c2c)

Article original de Js4Design
Aller sur Planète jQuery

J’utilise un plugin qui fait appel à $.browser et il n’est pas compatible jQuery 1.9, que faire ?

• Rester avec jQuery < 1.9 (1.8.3 étant la dernière).
• Utiliser conjointement jQuery 1.9 et le plugin jQuery Migrate.
• Regarder la version que vous utilisez (très souvent indiquée dans les premières lignes du code), chercher sur le net le site officiel du plugin (ou sur GitHub) et regarder s’il n’y a pas une version plus récente.
• Pas de chance, le plugin n’est plus maintenu par l’auteur, il faut donc chercher un autre plugin qui fait la même chose et qui lui serait maintenu.
• Encore pas de chance, le plugin est bien le seul à répondre à vos besoins, triste sort qui s’acharne, il reste une dernière solution !

Inclure la propriété $.browser version stand-alone

Vous pouvez inclure entre l’appel de jQuery et l’appel du plugin, un des deux fichiers suivants :

• jquery.browser.min.js
• jquery.browser.js

Vous pourrez à présent utiliser votre plugin avec jQuery 1.9.

Changelog jQuery 1.9

Article original de Chez Syl
Aller sur Planète jQuery

Voir mon post récapitulatif des changements et rendez-vous sur la page de l’extension. :)

Article original de Chez Syl
Aller sur Planète jQuery

Article original de LaFermeDuWeb
Aller sur Planète jQuery

Passez au noir et blanc !

Le plugin peut facilement convertir n’importe quelle image couleur en une image noir et blanc avec niveaux de gris. Pour cela, il utilise l’élément HTML5 canvas et propose une solution de repli pour les anciens navigateurs. Ainsi, on peut afficher une liste d’images dé-saturées qui s’animent pour reprendre leurs couleurs initiales au rollover, et inversement. Vous pouvez bien sûr vous en servir uniquement pour afficher des images décolorées statiques, sans le moindre effet.

Quelques options sont disponibles pour configurer BlackAndWhite : changement d’image au rollover ou non, vitesse d’animation en entrée et en sortie du rollover (transition de type fade uniquement), affichage des images noir-et-blanc pour animer vers la couleur ou inversement, activation d’un mode responsive (sur les images et les canvas), etc.

Installation du plugin

On commence par inclure jQuery et le plugin BackAndWhite :

Ensuite, on définit la structure HTML qui va afficher les images, par exemple une liste non ordonnée. Il faut ensuite penser à ajouter une classe CSS sur l’élément qui englobe l’image. Ici, l’élément parent est un lien et on lui applique la classe bwWrapper.

Puis on ajoute les propriétés CSS suivantes sur l’élément parent :

.bwWrapper {
    position:relative;
    display:block;
}

Enfin, on termine par l’appel du plugin. Attention, il faut bien penser à utiliser la méthode $(window).load() qui permet d’attendre le chargement complet des images avant l’exécution du script, et non $(document).ready().

$(window).load(function(){
    $('.bwWrapper').BlackAndWhite({
        hoverEffect : true,
        responsive:true,
        speed: {
            fadeIn: 200,
            fadeOut: 800
        }
    });
});

BackAndWhite est donc un plugin jQuery pratique pour passer facilement vos images couleur en noir-et-blanc côté client.

Requis : jQuery
Compatibilité : Tous navigateurs
Démonstration : http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/
Licence : MIT

Article original de Megaptery
Aller sur Planète jQuery

Après les grosses annonces de la semaine dernière, on pouvait s’attendre à du calme cette semaine. Sauf que je vous avais prévenu qu’il y aurait encore du lourd du coté de jQuery Mobile. Erratum de ma part donc, puisque mon informatrice m’a involontairement induit en erreur. En fait l’annonce officielle bien sympa est la suivante :

Le site officiels de plugins est de retour !

Donc vous pouvez recommencer à soumettre vos plugins et il y a même tout une procédure pour vous expliquer comment faire.

Au passage, ils ont entièrement rénové le site. Aussi bien la doc que le blog etc… Jetez un oeil au nouveau site et au billet d’explication des détails. Tout ça à l’air très bien, ça devrait améliorer quelque peu l’expérience utilisateur. En tout cas, il y a de très nombreux très bon retours sur Twitter.

Côté plugins, Stéphanie Walter m’a encore permis de ne pas rater un plugin utile. jQuery UI Touch Punch vous permet d’ajouter la gestion du tactile sur les widgets jQuery UI.

Je suis tombé sur Hotspotter cette semaine. Un excellent plugin pour mettre en avant certains point d’une image intégrée à votre site. Pour introduire des détails à la façon de l’identification des personnes sur Facebook. Je l’ai trouvé vraiment bien terminé.

Un article sympathique a été publié sur tutplus.com pour expliquer comment construire des plugins jQuery UI en se servant de la widget factory. Je n’ai malheureusement pas encore trouvé le temps de l’éprouver.

Pour terminer, Aurélien Gerits et Addy Osmani ont remis à neuf la documentation de jQuery UI Bootstrap. Je vous laisse découvrir par vous même l’excellent travail effectué.

Voilà, c’est tout pour cette fois. Je ne pense pas avoir le temps de publier quoi que ce soit d’autre cette semaine. Grosse livraison en fin de semaine, je suis déjà physiquement éreinté, mentalement je suis un légume donc je vais me consacrer au taf pour boucler ça proprement. A la semaine prochaine, ça ira mieux

Article original de MathieuRobin
Aller sur Planète jQuery