Lazy Load est un plugin jQuery qui optimise le chargement des pages où il y a beaucoup d’image lourdes. Son principe : charger les images au fur et à mesure que l’utilisateur descend la « scrollbar ». Du coup le travail du navigateur est optimisé et cela permet d’afficher des images de très grande tailles sur une seule page.

Son fonctionnement est extrêmement simple, il suffit d’afficher vos images avec des balises HTML « <img> » pis le plugin se charge de tout le reste.

// Ce petit bout de code est suffisant pour mettre en place Lazy Load
$("img").lazyload();

// On peut choisir une image de remplacement en attendant le chargement
$("img").lazyload({ placeholder : "img/grey.gif" });

// Utilisation d'effets de transitions pour les images
$("img").lazyload({
<pre>    placeholder : "img/grey.gif",
    effect : "fadeIn"
});

// Il existe plein d'autres options pour personnaliser ce plugin

Vous trouver une demo ici : http://www.appelsiini.net/projects/lazyload/enabled_fadein.html
Le site officiel du plugin avec la documentation : http://www.appelsiini.net/projects/lazyload

Le magazine Smashing vient de publier un article très intéressant sur jQuery.  Il regroupe une cinquantaine de tutoriaux sur des plugins jQuery indispensables.

Avoir absolument à cette adresse : http://www.smashingmagazine.com/2009/08/23/50-useful-new-jquery-techniques/

Un problème majeur dans la production d’une application, c’est de centraliser les informations. En effet, il existe maintenant les serveurs de versions (SVN, CVS, Team Foundation Server, …) ainsi que des outils de gestion de projet comme Trac avec des éditeurs de Wiki, report de bugs, etc …

Cependant, il nous manque bien souvent, des outils simples et flexibles que l’on puisse utiliser sur du Web pour faire de la conception avec des diagrammes UML sans passer par les mastodontes de la conception comme IBM Rationnal Rose, Sybase PowerAMC, Windev, et autres …

Voilà un plugin jQuery bien ambitieux, yUML vous permet d’écrire votre conception UML dans un environnement Web et de la générer instantanément.

Doucement ne sautons pas de joie imédiatement, il ne s’agit qu’une première version beta et elle se limite aux diagrammes de classes et aux cas d’utilisation (usecase)

L’ensemble des polices de caractères et images qui constituent le diagrammes sont entièrement configurables, on peut y ajouter de la couleur.

Le script générant le diagramme UML est écrit dans une div spécifique :

[Customer{bg:orange}]<>1->*[Order{bg:green}]
[Customer]-[note: Aggregate Root{bg:cornsilk}]

Voici un exemple de script pour générer un diagramme de classe simple :

On instancie un diagramme de classe avec le code suivant :

Le diagramme de cas d’utilisation (usecase) se construit avec le code suivant :

Voici une exemple de diagramme de cas d’utilisation que j’ai réalisé avec le programme du site officiel :

Ce petit programme s’avère intéressant pour des projets de taille modeste, il n’est pas le seul il existe déjà des outils principalement développés avec GWT (Google WebTool Kit) et avec le framework Dojo.

Le projet est téléchargeable sur le site officiel : http://yuml.me/

jqDialog : boites de dialogues avec jQuery

Dans une application Web, on a souvent besoin d’afficher des petites informations comme des notifications, ou encore demandez des confirmations ou des mini-formulaires. Dans une application bureau, on utiliserait des boites de dialogues.

jqDialog permet de répondre à cette problématique, ce plugin jQuery propose en effet de propulser rapidement et simplement des boites de dialogues pour des utilisations diverses.

Le plugin est téléchargeable sur le site de jQuery : http://plugins.jquery.com/project/jqDialog

Ses utilisations multiples correspondent à des méthodes bien précises sur le plugin, par exemple pour afficher une simple  notification :

 jqDialog.notify("This dialog will disappear in 3 seconds", 3);

Pour afficher une alerte, on a également une méthode appropriée :

jqDialog.alert("This is a non intrusive alert",
    function() { // callback function for 'OK' button
        alert("This intrusive alert says you clicked OK");
    }
);

Pour faire une simple demande de confirmation pour une suppression par exemple, pas besoin de générer du HTML :

jqDialog.confirm("Are you sure want to click either of these buttons?",
    function() { alert("This intrusive alert says you clicked YES"); }, // callback function for 'YES' button
    function() { alert("This intrusive alert says you clicked NO"); } // callback function for 'NO' button
);

Ou bien on peut y passer du contenu HTML pour créer un formulaire en ajax par exemple :

jqDialog.content('No dialog controls, just custom content
');

Des exemples sont disponibles à l’adresse suivante : http://kailashnadh.name/code/jqdialog/ .

gallerific : gallerie photos jQuery

Gallerific est un plugin jQuery pour générer une gallerie de photos très puissante. Il possède un grand nombre de paramètres et il est très facile à mettre en place.

Vous pouvez le télécharger à l’adresse suivante : http://www.twospy.com/galleriffic/

Dans un premier temps, on insère le script de jQuery et le plugin :

Ensuite, on définit les calques nécessaires à l’affichage des miniatures et des images :

        
            
        

            (Any html can go here)


... (repeat for every image in the gallery)

et enfin on insère le javascript à paramétrer (on pourra également définir le nombre d’image à précharger pour gagner du temps) :

$(document).ready(function() {
    var gallery = $('#gallery').galleriffic('#thumbs', {
        delay:                  3000, // in milliseconds
        numThumbs:              20, // The number of thumbnails to show page
        preloadAhead:           40, // Set to -1 to preload all images
        enableTopPager:         false,
        enableBottomPager:      true,
        imageContainerSel:      '', // The CSS selector for the element within which the main slideshow image should be rendered
        controlsContainerSel:   '', // The CSS selector for the element within which the slideshow controls should be rendered
        captionContainerSel:    '', // The CSS selector for the element within which the captions should be rendered
        loadingContainerSel:    '', // The CSS selector for the element within which should be shown when an image is loading
        renderSSControls:       true, // Specifies whether the slideshow's Play and Pause links should be rendered
        renderNavControls:      true, // Specifies whether the slideshow's Next and Previous links should be rendered
        playLinkText:           'Play',
        pauseLinkText:          'Pause',
        prevLinkText:           'Previous',
        nextLinkText:           'Next',
        nextPageLinkText:       'Next ›',
        prevPageLinkText:       '‹ Prev',
        enableHistory:          false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
        autoStart:              false, // Specifies whether the slideshow should be playing or paused when the page first loads
        onChange:               undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
        onTransitionOut:        undefined, // accepts a delegate like such: function(callback) { ... }
        onTransitionIn:         undefined, // accepts a delegate like such: function() { ... }
        onPageTransitionOut:    undefined, // accepts a delegate like such: function(callback) { ... }
        onPageTransitionIn:     undefined  // accepts a delegate like such: function() { ... }
    });
});

En effet, Symfony offre un helper pour mettre en place un datepicker mais l’intégration de ce dernier avec un formulaire n’est pas évidente.

Pour palier ce problème, il existe un plugin qui facilite cette intégration. Il s’agit de sfFormExtraPlugin que l’on peut télécharger à cette adresse : http://www.symfony-project.org/plugins/sfFormExtraPlugin.

sfFormExtraPlugin propose des widgets additionnels pour sfForms dont notamment un Widget sfWidgetFormJQueryDate qui permet de créer un champ « Date » que l’on peut saisir via le DatePicker de jQuery.

Ajout du Widget sur le formulaire :

Après l’installation du plugin SfFormExtraPlugin, on instancie un widgetFormJQueryDate comme dans l’exemple ci-dessous :

On peut y passer 3 options :

- config : correspond à une instruction Javascript pour paramétrer directement le datepicker de jQuery
- culture : permet de choisir la langue du calendrier (anglais par défaut)
- format : format de sortie du calendrier, dans l’exemple j’ai mis la convention française jour/mois/année.

Coté template :

Il suffit tout simplement d’afficher le contenu du formulaire, en ajoutant bien évidemment le jQuery Framework avec la page, dans mon cas je l’ai inclus à l’aide d’un helper.