Vous consultez les articles de la catégorie Plugins
Fév
7

Plugin Jquery Tablesorter : Trier sur un numéro de téléphone

Par défaut, le plugin tablesorter jquery ne gère pas bien le tri sur une colonne contenant des numéros de téléphone. La raison ? C’est parce que le plugin détecte le numéro comme une chaine de texte, du coup le tri ne se fait pas correctement. On peut bien essayer de préciser lors de l’initialisation qu’il faudra trier cette colonne comme un numérique, le tri ne fonctionnera pas mieux, tout simplement car généralement un numéro de téléphone contient des caractères alphanumériques tels que « . » ou « -« , du coup le tri ne se fait que sur les 2 premiers chiffre du numéro.

J’ai donc créé un nouveau parseur pour gérer le tri sur mes numéros de téléphone. La méthode est très simple, je supprime tous les caractères non numérique lors du tri et effectue ainsi un tri purement numérique.

    $.tablesorter.addParser({
      // set a unique id
      id: 'phoneNumber',
      is: function(s) {
        // return false so this parser is not auto detected
        return false;
      },
      format: function(s) {
                return $.tablesorter.formatFloat(s.replace(new RegExp(/[^0-9]/g),""));
        },
      // set type, either numeric or text
      type: 'numeric'
    });
Août
8

Tablesorter : Nouvelles fonctionnalités

Depuis quelques jours, j’utilise tablesorter et je me suis rendu compte au fur et à mesure des mes besoins que la version téléchargeable sur leur site n’était pas vraiment à jour (2.0.5)!

En effet, il existe une version beaucoup plus récente (2.0.11) ici et qui apporte son lots de nouveautés dont 2 dont j’ai eu besoin justement :

Lire la suite

Août
5

Trier sur une date française avec Tablesorter

Si vous utilisez le plugin tablesorter de JQuery, il se peut que vous ayez besoin de trier un colonne contenant des dates au format français. Par défaut, le tri va se faire comme si le contenu était une chaine, du coup, ce ne sera pas trié dans le bon ordre.

Pour faire ceci, il vous suffit d’ajouter ce morceau de js.

$('#listeOrganismes').tablesorter({
  dateFormat: 'uk',
  headers: {
     0: {sorter: "shortDate"},
     5: {sorter: false}
  }
});

Si vous utilisez le plugin datatables de JQuery, que personnellement je préfère, c’est ici que ça se passe

Juin
19

Carte interactive en JQuery

Maphilight : Carte interactive

Voici un plugin JQuery plutôt sympa que j’ai utiliser récemment pour faire une carte interactive.

Ce plugin s’appelle Maphilight et permet de rentre une carte interactive, j’entends par là par exemple, une carte géographique (par exemple la France avec ses départements) ou les départements se mettent en évidence lors du survol ou du clic.

Pour faire fonctionner votre carte, vous aurez besoin de 3 choses :

  • Une image de ce que vous souhaitez rendre interactif (par exemple, la carte de France).
  • Une map area de la découpe de votre carte par département (il existe plein de logiciel pour en faciliter la création, par exemple Dreamweaver). Cette partie est la plus longue à mettre en place, car la découpe de l’image en area est proportionnel à la complexité de la carte que vous souhaitez animer. Dans notre exemple, chaque balise area représentera un département.
  • Enfin, le plugin javascript

Lire la suite

Fév
2

TimePicker pour jQuery

TimePicker pour jQuery

Aujourd’hui, j’ai eu besoin d’un sélecteur de date ultra simple pour un formulaire. La plupart des TimePickers existants présentent des horloges analogiques (« à aiguilles »). Pour moi, un champ input avec une validation spécifique suffisait. Comme je suis un peu fainéant, je préfère chercher un plugin tout prêt plutôt que de faire la validation moi-même.

Comme souvent, quelqu’un avait déjà développé ce que je voulais : c’est le plugin jQuery TimeEntry (le site officiel jQuery présente aussi le plugin).

Lire la suite

Jan
13

Spritely, plugin JQuery pour réaliser des backgrounds animés

Spritely, plugin Jquery

Aujourd’hui je vous présente un « vieux » plugin dont beaucoup de monde a parlé en Mars dernier , mais que j’ai découvert seulement la semaine dernière par hasard.

Et comme j’ai vraiment été bluffé par le rendu de ce plugin, j’ai décidé d’en reparler pour ceux qui, comme moi, aurait loupé ce superbe plugin.

Donc ce plugin se nomme Spritely et vous permet d’animer des backgrounds afin de réaliser une impression de mouvement.

Lire la suite

Déc
22

Du JQuery au menu

2 menus déroulants JQuery

Voici venu le temps des rires et des chants de vous présenter 2 plugins JQuery permettant de gérer des menus horizontaux déroulants. Tout développeur web qui se respecte sera confronté un jour ou l’autre au besoin d’avoir un menu déroulant dans son site. Ces 2 plugins pourront sûrement vous aider.

Le premier s’intitule jMenu, c’est un menu déroulant multi-niveaux entièrement paramétrable (taille du menu, effets à l’ouverture et fermeture du menu, etc). Les menus se déroulent au survol ce qui peut être un avantage comme un inconvénient. Facile à implémenter et léger, il devrait vous convenir dans la plupart des cas.

Le second s’intitule Sexy Drop Down Menu contrairement à jMenu, ce menu n’est pas multi-niveaux et se déroule au clic et non au survol (ceci dit, vous pouvez modifier le code pour changer l’évenement click par un évenement hover). Visuellement sympa, ce plugin porte bien son nom. Si vous avez besoin d’un menu déroulant à un seul niveau, ce plugin est fait pour vous.

Déc
21

Une superbe galerie d’image en plein écran avec JQuery

Plugin JQuery : Sideway, galerie d'images plein écran

En ce moment, on commence à voir de plus en plus de galeries d’images qui exploite le plein écran.

En voici une utilisant JQuery que je trouve assez sympa et qui pourrez peut être vous intéresser.

Ce plugin s’appelle SIDEWAY et utilise aussi un peu de CSS3.

Il affiche sur la moitié gauche les miniatures de vos images, puis sur le clic d’une image passe automatiquement en pleine écran en cachant la galerie des miniatures. Vous pouvez à tout moment faire apparaitre la galerie en glissant la souris sur la gauche de l’écran.

L’inconvénient de ce genre de solution est le temps de chargement des images puisque pour gérer au mieux toutes les tailles d’écran, vos images doivent être en haute résolution (1650×1080 dans l’exemple), mais le script est optimisé pour charger les images grandes résolutions seulement sur le clic de leur miniature.

Comme un exemple vaut mieux qu’un long discours, voici la démo

Déc
15

7 plugins indispensables pour JQuery

7 plugins indispensable pour JQuery

Voici une liste de plugins que j’ai pu utiliser et dont je me sers régulièrement dans mes sites.

Colorbox :

Colorbox est un plugin de type Lightbox qui permet donc d’afficher du contenu, des images, du html, du flash avec des transitions au choix. Le style par défaut est très réussi et il est entièrement customisable. Facile à intégrer et aussi très léger, c’est une bonne alternative à Fancybox par exemple.

Datatables :

Datatables est un plugin incontournable qui permet de faciliter grandement la présentation de vos données sous forme de tableau et surtout d’agrémenter votre tableau de fonctionnalités intéressantes est souvent demandées par le client.Voici quelques une des fonctionnalités proposées par Datatables :

  • Pagination
  • Colonnes triables avec détection du type de données (texte, numérique, date, …)
  • Filtre de recherche (soit par requête ajax, soit en cherchant dans le dom)
  • Affichage de données à partir de n’importe quelle source de données (dom, tableau JavaScript, fichier Ajax, données récupérées coté serveur (PHP, C#, Perl, Ruby, AIR, Gears etc)
  • Défilement vertical (vertical scrolling)
  • Internationalisation
  • Possibilité de s’adapter aux couleurs d’un thème provenant de JQuery UI
  • Plusieurs plugins permettant d’accroître les fonctionnalités.

JQuery UI :

JQuery UI est une « surcouche » officielle de JQuery. C’est une suite de plugins permettant de faciliter la gestion d’interfaces utilisateurs pour leur permettre une interaction intuitive. Cela va du simple effet visuel à l’ajout de fonctionnalités comme la gestion d’onglet, un datepicker (calendrier), un accordéon ou encore un autocompléteur.

Mais la grande force de JQuery UI c’est aussi son « Theme roller » qui permet de skinner son interface facilement ou d’utiliser un thème par défaut afin d’avoir une interface homogène.

JQuery Forms :

JQuery Forms est un plugin permettant de faciliter la gestion de formulaire en permettant de faire des soumissions en Ajax.

Jquery Validate :

JQuery Validate est un plugin que j’utilise souvent en complément de JQuery Forms car il permet la validation de données avant soumission. Il permet par exemple de vérifier qu’un champ obligatoire est rempli, qu’une adresse mail est valide ou encore qu’un nombre de caractères minimum soit respecté.

GalleryView :

GalleryView est comme son nom l’indique un plugin permettant d’afficher de sympathiques galeries photos avec miniatures. Il est possible de configurer aisément sa galerie avec ou sans miniature, avec ou sans défilement automatique et bien sûr l’apparence générale de la galerie. Seul bémol, le plugin n’est plus maintenu par son créateur.

En général je couple ce plugin avec ColorBox ou FancyBox afin de permettre l’affichage en plein écran d’une photo.

JCarousel :

JCarousel est un plugin efficace si vous avez besoin de faire défiler des images (comme des logos par exemple). Simple à mettre en place (comme quasiment tous les plugins JQuery finalement ! ), voici quelques une des fonctionnalités de bases proposées :

  • Défilement vertical ou horizontal
  • Défilement circulaire (c’est-à-dire qu’arrivé à la dernière image, il reprend automatiquement la première et continue à défiler)
  • Chargement des images statiques ou dynamiques (Javascript, Ajax, PHP, Flickr, etc)
  • Contrôles externes

Edito

Bienvenue sur Mémorandom.

Mémorandom est le blog de 2 développeurs web, Appo et Nico.

Vous y trouverez des informations sur différents domaines touchant de près ou de loin au développement web

Tutoriels Yii Framework

Nos derniers articles

Blogs Dev

Liens

Étiquettes