Jquery

 
2

[MAJ]Jquery : mSelect ajout d’une scrollbar personnalisable

Posted by samuel on Juin 23, 2011 in Développement Web, Jquery
mSelect est un plugin jQuery que j'ai développé en avril 2010 qui permet de personnaliser totalement un select html et de pouvoir avoir des options comprenant du html (formatage ou image). Quelques semaines après la version 1.1 ajoutait la gestion événement. Aujourd'hui je passe mon plugin en version 1.2 pour amener une nouveauté très demandée.

ScrollBar personnalisable avec mSelect

Pour les listes html longues l'utilisation d'une scrollBar devient indispensable, le plugin l'ajoute donc maintenant automatiquement à partir de sept options (se nombre est paramétrable via nbVisible) Pour rester cohérent avec le reste du plugin cette scrollBar est entièrement personnalisable en css via plusieurs class.

Rendre inactif le champ mSelect

Seconde fonctionnalité qu'apporte cette mise à jour, la possibilité d'activer et désactiver le champ à l'aide de deux méthodes.

Optimisation du plugin et documentation complète

J'ai également optimisé l'ensemble du code, corrigé quelques petits bugs et rédigé une feuille css d'exemple. Et pour faciliter la vie des utilisateurs d'mSelect, j'ai rédigé une documentation complète avec beaucoup d'exemples. Voir la documentation complète de mSelect : Plugin jQuery

Mise à jour 1.3 : mCurrent

Suite à vos retour, voici une version 1.3 :
  • Ajout d'une class mCurrent sur l'option sélectionné
  • Correction du bug : mSelect plante en l'absence de jQuery-ui 1.8
  • Correction du bug : variable html de l'événement click manquante
  • Optimisation : réduction du nombre d'écouteur.

Mise à jour 1.4 : manipulation des données

Mise à jour du 27 juin 2011
  • Ajout de la méthode add
  • Ajout de la méthode options
  • Ajout de la méthode selected
Voir la documentation complète de mSelect : Plugin jQuery  

Étiquettes : , , , , ,

 
34

mSelect : Plugin Jquery pour réaliser des listes html personnalisées

Posted by samuel on Avr 4, 2010 in Jquery
Le plugin est passé en version 1.4.2 Le plugin et la documentation complète est disponible sur : http://www.le-pret-a-surfer.com/mSelect/ mSelect est un plugin qui permet de personnaliser totalement l'apparence d'une liste de formulaire (select). Se qui permet en css de personnaliser la boite, la flèche et chaque option. Le plugin mSelect permet aussi de faire une boite de sélection enrichie en html.

Utilisation sur un élément html : select

Coté html : [cc lang='html4strict' line_numbers='false'] [/cc] Coté javascript : [cc lang='javascript' line_numbers='false'] $(document).ready(function() { $('select').mSelect(); });[/cc]

Utilisation sur une liste avec bouton radio

Coté html : [cc lang='html4strict' line_numbers='false']
[/cc] Coté javascript : [cc lang='javascript' line_numbers='false'] $(document).ready(function() { $('#demo').mSelect(); });[/cc]

Caractéristique du plugin

  • L'élément select ou ul sera entièrement remplacé par la nouvelle interface
  • L'attribut name de l'élément select ou input est conservé
  • Les attributs value sont conservés, si ils n'existent pas ils sont crées avec le contenu texte de l'élément option ou label
  • L'attribut id de l'élément select ou ul est conservé
  • Les attributs class appliqués aux éléments option ou li sont conservés
  • Si un élément a un attribut selected ou checked il est conservé
  • Si fireBug est activé les erreurs sont affichées dans la console
  • Développé avec jQuery 1.42, le plugin utilise des fonctions de la version 1.4
  • Le script a été essayé sur quelques navigateurs :
    • Navigateur compatible : FireFox 3.6, Internet Explorer 8, Google chrome 3, Safari 4, Safari iPhone ...
    • Navigateur incompatible : Aucun testé
    Si vous avez la possibilité de tester le plugin sur d'autre navigateur ou d'autre version n'hésitez pas à nous faire part de vos résultats.

Personnalisation en CSS des listes formulaire

Class : mSelect

Le conteneur général de la liste, c'est un élément div en display inline-block.

Class : mSelected

Le conteneur de l'option sélectionne qui s'affiche toujours à l'intérieur de mSelect, c'est un élément div.

Class : mFleche

Element div permettant de personnalisé la flèche qui indique à l'utilisateur la possibilité de déployer la liste.

Class : mOption

Conteneur d'une option, ces éléments sont des div en position absolue avec le curseur main, les informations top et left sont renseignées à chaque ouverture de la liste

Options du plugin

defaut : Message par défaut (String)

Message par défaut quand aucune option n'est sélectionné. Par défaut vide.

radioHide : Afficher les éléments radio (Boolean)

Si true affiche les éléments radio dans les options, false pour cacher Par défaut : false

eventClick : événement au click (Function(value,html))

Fonction lancer au clique sur une une option. This : élément div qui à recu le click Value : Valeur de l'option sélectionne Html : Html de l'option séléctionné Par défaut : null [cc lang='html4strict' line_numbers='false']
[/cc] [cc lang='javascript' line_numbers='false'] $(document).ready(function() { $('#demo').mSelect({ eventClick:function(value,html) { alert(value); // retourne la valeur de l'option sur le quel le visiteur à cliqué. Exemple : "okStr" alert(this); // retourne l'objet div sur le quel l'utilisateur à cliqué alert(html); // retourne le html (String) de l'option sur la quel le visiteur à cliqué. Exemple : "ok Ok strong" } }); });[/cc]

eventOpen : événement à l'ouverture (Function(value,html))

Fonction lancer à l'ouverture de la liste.
  • This : élément div principale
  • Value : Valeur de l'option sélectionne
  • Html : Html de l'option sélectionné
Par défaut : null

eventClose : événement à la fermeture (Function(value,html)

Fonction lancer à la fermeture de la liste, même si il n'y pas de changer de valeur.
  • This : élément div principale.
  • Value : Valeur de l'option sélectionne
  • Html : Html de l'option sélectionné
Par défaut : null

Essayer et télécharger le plugin

Demo Télécharger : Version de production et version de développement

Change Log

Version 1.1 : 15 avril 2010
  • Ajout des options : eventClick, eventOpen, eventClose
  • Correction mineur
Version 1.0 : 4 avril 2010

Étiquettes : , , , ,

 
1

Sortie de jQuery 1.4, 4 ans de loyaux services

Posted by samuel on Jan 16, 2010 in Jquery
jQuery est une bibliothèque JavaScript rapide et concise qui simplifie la programmation : gestion d'évènement, animation, modification du HTML ou encore intéraction AJAX ... Pour fêter le 4ième anniversaire de jQuery, l'équipe nous offre en cadeau sa nouvelle version 1.4. Voici quelques unes des modifications apportées à jQuery.

Amélioration des performances des méthodes les plus utilisées

L'équipe de jQuery, annonce pour cette version 1.4, une refonte des méthodes les plus couramment utilisées. Sur cette image, les résultats fournis par le site officiel montre des résultats impressionnants ! Ces résultats ont été obtenu grâce à une simplification du code, surement plus facile à dire qu'à faire !

Ajout de fonctionnalité à plusieurs fonctions de manipulation html

Jusqu'à présent l'utilisation de la fonction .attr() pouvez retourner la valeur de l'attribut visé. Cette fonctionnalité est maintenant étendue à toutes les méthodes suivantes : .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), et .toggleClass(). Sur les méthodes suivantes .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .offset(), .addClass(), .removeClass(), et .toggleClass() comme second argument, l'équipe a rajouté une nouvelle option à la fonction qui renvoie la valeur actuelle. Un exemple vaut mieux qu'un long discourt. [cc lang='javascript' line_numbers='false']// Trouve toutes les balises A et enveloppe les $amp; avec une balise span $('a').html(function(i,html){ return html.replace(/&/gi,'&'); }); // Ajoute des informations au titre des liens $('a[target]').attr("title", function(i,title){ return title + " (Opens in External Window)"; });[/cc]

Ajax

Paramétre imbriqué, array

JQuery 1.4 ajoute le support dans les paramètres AJAX data d'une valeur tableau dans jQuery.param. Exemple : {foo: ["bar", "baz"]} devient "foo[]=bar&foo[]=baz". Dans jQuery 1.3, le même code aurait donné "foo=bar&foo=baz"

JSON et script auto-détecté par content-type

Si la réponse à une demande d'Ajax est retourné avec un "mine type" JSON ou javascript, jquery choisira lui même le bon data-type sauf si dataType est spécifié.

ETAG supporté, gestion du cache navigateur en AJAX

Par défaut, JQuery ignore l'en tête "Last-Modified" pour les demandes ajax, préférant faire une demande et ignorer le cache navigateur. Pour utiliser le cache navigateur passez le paramètre "ifModified" sur true.

"Context" pour les requêtes

Afin de simplifier le code, on peut définir un paramètre "context" afin de spécifier un cadre pour tous les rappels. [cc lang='javascript' line_numbers='false']jQuery.ajax({ url: "test.html", context: document.body, success: function(){ jQuery(this).addClass("done"); } });[/cc]

Construction rapide d'élément avec jQuery 1.4

Lorsque vous créez un seul élément avec la fonction jQuery, vous pouvez désormais passer un objet pour définir les attributs : [cc lang='javascript' line_numbers='false']jQuery("div", { id: "foo", css: { height: "50px", width: "50px", color: "blue", backgroundColor: "#ccc" }, click: function() { $(this).css("backgroundColor", "red"); } }).appendTo("body");[/cc]

Sélection de l'avant dernier div grâce à .eq(-N), .get(-N)

Vous pouvez, avec la version 1.4, passer dans .get() et .eq() des nombres négatifs pour par exemple connaitre l'avant dernier div. [cc lang='javascript' line_numbers='false']$("div").eq(-2); $("div").get(-2);[/cc]

Nouvelle méthode .first() et .last()

Pour simplifier, .first() et .last() sont des alias de .eq(0) et .eq(-1)

Nouvelle méthode .toArray()

Retourne un tableau contenant les donnés recherchées.

Optimisation de la fonction .css() (x2) .addClass() .removeClass() et .hasClass() (x3)

Alterner plusieurs class avec .toggleClass()

[cc lang='javascript' line_numbers='false']$("div").toggleClass("current active");[/cc]

Animation : fonction d'accélération indépendante pour chaque propriété

En plus d'être en mesure de spécifier une fonction d'accélération pour une animation vous pouvez maintenant spécifier une fonction pour les propriétés individuelles. [cc lang='javascript' line_numbers='false']$("#clickme").click(function() { $("div").animate({ width: ["+=200px", "swing"], height: ["+=50px", "linear"], }, 2000, function() { $(this).after("
Animation complete.
"); }); });[/cc]

Ajouter plusieurs événements en un seul appel de la méthode .bing()

[cc lang='javascript' line_numbers='false']$("div.test").bind({ click: function(){ $(this).addClass("active"); }, mouseenter: function(){ $(this).addClass("inside"); }, mouseleave: function(){ $(this).removeClass("inside"); } });[/cc]

Optimisation des manipulations html de jQuery

Nouvelle méthode .detach() (un remove() temporaire)

.detach () supprime un élément du DOM mais ne supprime pas les gestionnaires d'événements associés. Ceci est approprié pour éliminer temporairement un élément à manipuler et ajouter ensuite. [cc lang='javascript' line_numbers='false']var foo = $("#foo").click(function() { // do something }); foo.detach(); // foo retains event handlers foo.appendTo("body");[/cc]

Nouvelle méthode unwrap() supprimer le conteneur mais le contenu.

[cc lang='html4strict' line_numbers='false']
annie davey stevie
[/cc] [cc lang='javascript' line_numbers='false']$('div').unwrap();[/cc] [cc lang='html4strict' line_numbers='false'] annie davey stevie [/cc]

before, after, replaceWith sur les nœuds déconnectés avec jQuery 1.4

Vous pouvez maintenant utiliser before, after et replaceWith sur les noeuds qui ne sont pas attachés aux DOM. Cela vous permet de faire des manipulations plus complexes, avant d'insérer la structure finale dans le DOM. [cc lang='javascript' line_numbers='false']jQuery("div").before("Hello").appendTo("body")[/cc]

Lancement avec délais, nouvelle méthode jquery : .delay()

.delay(x) retarde les éléments de x milliseconde. [cc lang='javascript' line_numbers='false'] $("div").fadeIn().delay(4000).fadeOut(); [/cc]

Gestion d'une fille d'attente en jQuery :  .queue()

Dans jQuery 1.4 la fonction queue permet de crée une fille d'attente et de lancer des fonctions les une après les autres une fois la première fini. [cc lang='javascript' line_numbers='false']jQuery("div").queue("ajax", function(next) { var self = this; jQuery.getJSON("/update", function(json) { $(self).html(json.text); next(); }; }).queue("ajax", function() { $(this).fadeIn(); });[/cc] .clearQueue() permet de vider cette fille d'attente.

Et ce n'est pas tous

Je n'ai pas parlé de toutes les nouvelles méthodes et améliorations. L'ensemble des mises à jour et plus de détaille sur le site officiel de jQuery en anglais

Étiquettes :

 
0

Un textarea qui se redimensionne avec Jquery

Posted by samuel on Déc 27, 2009 in Jquery
Vous en avez marre de réfléchir sur la taille idéale de votre textarea ? Souvent trop grande, alors qu'elle contient deux mots ... mais de temps en temps vous vous arrachez les cheveux, en effet vous avez rédigé un roman dans un textarea de la taille d'un timbre poste de Minimoys ... Voici un Plugin Jquery qui va vous permettre de garder quelques cheveux au sommet de votre crâne ! Il est signé Craig Buckler qui a appelé son bébé : Auto-Expanding Textarea !

Plugin jquery : Auto-Expanding Textarea

Son utilisation est simple, une fois jquery et le plugin inclus dans votre page : [cc lang='html4strict' line_numbers='false'] [/cc] Ajouter une class "expend" à votre textarea préféré et le tour est joué. [cc lang='javascript' line_numbers='false'][/cc] Facile non ? quasiment magique, à en faire pâlir David Copperfield. Un exemple de auto-expending textarea sur le  site de l'auteur.

Compatibilité navigateur IE6, FireFox ...

Coté navigateur, la question épineuse, l'auteur nous parle d'une rose compatible avec :
  • IE6 (et grand frère)
  • FireFox 2+
  • Opera 9
  • Safari 4
  • chez google : Chrome 2

Configuration de taille

Sur son blog l'auteur nous dévoile d'autres façons pour exécuter ce plugin jquery avec quelques possibilités de configuration par rapport à la taille d'origine notamment. [cc lang='javascript' line_numbers='false']$("#textarea2").TextAreaExpander(50, 200);[/cc] Le textarea comportant l'idée textarea2 aura donc une taille par défaut de 50 par 200 pixels Plus d'informations :

Étiquettes : , , ,

Copyright © 2017 Le pret a surfer All rights reserved.
Desk Mess Mirrored v1.4.4.1 theme from BuyNowShop.com.