Lors de la création de sites web, il nous arrive très souvent d’inviter un internaute à insérer ses coordonnées personnelles dont son adresse postale.
Cette fois, plutôt que d’utiliser un champs classique, nous allons utiliser un widget jQuery UI surnommé jQuery address picker.

Ce plugin fonctionne de deux façons différentes selon les besoins :

Autocomplétion d’un simple champs de texte input

Autocomplétion d’un champs adresse avec jQuery Adress Picker

Un simple champs de texte input qui est devenu bien plus ergonomique pour vos visiteurs et peut dans certains cas éviter des erreurs !
Ce n’est pas arrivé pour ma part, mais évidemment si aucune proposition de Google Maps ne convient il est possible de continuer à écrire son texte comme un champs classique !

La même chose mais à l’aide d’une map Google

Autocomplétion du champs avec une map Google

Selon les cas, il arrive que Google Maps ne positionne pas le pointeur comme il faut ou manque de précision. C’est là que ce widget est également intéressant, il nous permet de faire un drag & drop du pointeur afin de le placer au bon endroit et récupérer au passage les bonnes coordonnées GPS.

Utilisation du plugin

$(function() {
 
    var addresspickerMap = $( "#addresspicker_map" ).addresspicker({
        elements: {
            map: "#map",
            lat: "#lat",
            lng: "#lng",
            locality: '#locality',
            country: '#country'
        }
    });
    var gmarker = addresspickerMap.addresspicker( "marker");
    gmarker.setVisible(true);
    addresspickerMap.addresspicker( "updatePosition");
 
});

Il ne reste plus qu’à mettre en corrélation les éléments HTML avec le plugin. Donc à partir de là selon les besoins, on peut récupérer la longitude/latitude en hidden, ou encore gérer ou non l’auto-positionnement sur la map.

DEMO EN LIGNE

TELECHARGER

ou bien (si le lien est cassé)

TELECHARGER

Qu’est-ce qu’un slider ?

Je dirais qu’un slider est tout simplement un sélectionneur de valeurs qui vous permet donc de sélectionner une fourchette de valeurs afin de créer par exemple un filtre, comme par exemple pour choisir un prix minimum et prix maximum dans une boutique en ligne.

L’avantage de SelectToUISlider (anciennement connu sous le nom de Accessible Slider) proposé par Filament Group est que si le JavaScript ou le CSS n’est pas activé chez l’internaute, le slider s’occupera d’afficher les listes déroulantes quand même afin de sélectionner une valeur !

DEMO EN LIGNE

Pas grand chose à faire, comme tout plugin jQuery qui se respecte, il vous suffira de lire la doc afin de consulter les différentes options et paramètres qu’il propose, et il s’occupera tout seul comme un grand de convertir votre ou vos listes déroulantes en slider.

Fonctionnalités :

Contrairement aux autres sliders il n’est pas limité à sélectionner uniquement des valeurs de date, il gère également les données suivantes :

• les chaines de caractères (ex: « très lent », « lent », « rapide », « très rapide »)
• les dates
• les chiffres

Cette nouvelle version est basée sur jQuery UI, mais propose de nouvelles options :

• labels (Number, nombre de labels à afficher : par défaut à 3)
• tooltip (Boolean, affiche ou non les infos-bulles : par défaut à True)
• tooltipSrc (Specific String, source du texte de l’info-bulle venant de la liste déroulante. Les valeurs disponibles sont « value » ou « text » : par défaut à « text ».
• labelSrc (Specific String, source du texte du label venant de la liste déroulante. Les valeurs disponibles sont « value » ou « text » : par défaut à « value ».
• sliderOptions (Object, accepte les options du slider jQuery UI de base)

A noter que cette nouvelle version gère également le support ARIA du W3C.

Enfin, vous pouvez naturellement personnaliser à souhait votre slider grâce au puissant générateur de thèmes jQuery UI ThemeRoller.

TELECHARGER

ou bien (si le lien est cassé)

TELECHARGER

Liens :

• Page officielle du slider SelectToUISlider
• Démo 1 (Basique, permet de sélectionner 5 options)
• Démo 2 (Permet de sélectionner une fourchette de dates)

J’ai fais une chouette découverte que je vous fais partager : FullCalendar

FullCalendar est un plugin jQuery qui vous permettra de créer un calendrier complet pour vos applications et sites web.

FullCalendar : Un calendrier complet via jQuery

Ce plugin consiste « simplement » à créer le visuel du calendrier et charger les évènements à afficher (en Ajax).
Entièrement paramétrable, il est possible également de gérer des actions sur les évènements du calendrier via un clic ou un drag & drop.

Malheureusement pour le moment il est impossible de modifier directement des évènements ou même leur titre, mais sa force réside dans quelques extensions disponibles, comme par exemple celle qui permet d’associer le flux calendrier de vos Google Calendar (Google Agenda) afin de les afficher directement sur vos applications web.

Pour ma part je vais étudier le sujet pour pouvoir le connecter à une base de donnée MySQL.
Je ne manquerais pas de vous tenir au courant ici même de l’évolution de ce chouette (et encore jeune)  plugin !

Lien annexes :

• Site officiel de FullCalendar
• Page officielle Google Code de FullCalendar (pour les reports de bug, questions/réponses, changelog, …)