Vous consultez les articles taggés Jquery/Javascript
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'
    });
nov
1

jQuery – récupérer la valeur de border-color


Aujourd’hui, j’ai fait face à un problème qui m’a demandé quelques recherches avant d’en trouver la solution.

J’avais besoin de récupérer la valeur de l’attribut CSS border-color d’un input.

J’ai tenté avec les codes suivants, mais cela ne marche pas :

$('#monInput').css('border-color');
$('#monInput').css('borderColor');

Lire la suite

oct
6

Connaitre les évènements attribués sur un élément JQuery

 

Tout petit article aujourd’hui pour vous donner une petite astuce pour savoir quels évènements sont présents sur un objet JQuery. Ce sont généralement des évènements attribués grâce aux fonctions bind, live ou encore les événements de base proposés par JQuery.

Pour cela, rien de plus simple, il vous suffit juste d’exécuter cette ligne de code, dans votre console Firebug par exemple. Vous obtiendrez la liste des événements existant sur votre objet.

$('#monObjet').data('events')
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

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

avr
7

Réinitialier un toggle en JQuery

Réinitialiser la fonction toggle JQuery

Petit rappel sur la fonction toggle de JQuery :  Elle permet d’alterner l’exécution de fonctions dans l’ordre où vous les donnez.

Il existe aussi une fonction toggle() sans fonctions passées en paramètres, qui permet d’alterner l’affichage ou non d’un élément.

Dans certains cas, il peut être nécessaire de réinitialiser un toggle afin qu’il reparte de la première fonction.

Voilà comment faire :

    $('#toggled').toggle(fn1, fn2);
    $('#clear').click(function() {
            $('#toggled').unbind('click').toggle(fn1, fn2);
    });
mar
21

Cocher un bouton radio avec JQuery

JQuery, cocher un bouton radio

Oui je sais, ca parait bête à faire mais en fait, j’ai quand même passé une bonne vingtaine de minutes à trouver comment faire.

Alors vous allez me dire: « C’est simple, il suffit de mettre l’attribut checked à true »

Bah non ce serait trop simple (même si au final, la solution reste simple^^)

Prenons cette exemple :

<div id="choixOuiNon"><label>Oui :</label> <input id="oui" type="radio" name="choix" value="1" /> <label>Non :</label> <input id="non" type="radio" name="choix" value="0" /></div>

Pour cocher Oui en javascript on pourrait penser faire :

$('#oui').checked = true;

Lire la suite

mar
10

Fonctionnalités avancées Jquery

Aujourd’hui je suis tombé sur un slide intéressant tiré d’une conférence. Je me permet de vous le partager.

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

fév
1

jQuery 1.5 : du nouveau dans Ajax !

Comme vous le savez peut-être (ou peut-être pas : Memorandom.fr : number one sur l’info web dev ! hé hé), jQuery 1.5 vient de sortir dans les bacs !

Comme l’annonce la news du site officiel, cette version corrige 83 bugs et clos 460 tickets.

Les nouveautés majeures sont les suivantes :

  • Réécriture des fonctions liées à Ajax
  • Introduction des objets différés (deferred objects)
  • Nouvelle fonction jQuery.sub()
  • Amélioration des performances lors du parcours du DOM (.children(), .prev() et .next()), particulièrement sensible sous Safari et Chrome

Je ne vais m’intéresser ici qu’à Ajax et aux objets différés. Reportez-vous à la news sur le site officiel pour en apprendre davantage sur le reste.

Lire la suite

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

Mots-clefs