Aujourd’hui nous allons voir comment faire un plugin jQuery, qui permet de compter le nombre de caract\u00e8res pouvant encore \u00eatre accept\u00e9 dans des champs de texte.<\/p>\n\n\n\n
Pour commencer, il faut d\u00e9cider du nombre de variables utiles \u00e0 ce genre de r\u00e9alisation. Une longueur maximale autoris\u00e9e est un minimum. Ensuite, comme variables pouvant \u00eatre utiles il y a:<\/p>\n\n\n\n
Maintenant que nous avons d\u00e9fini les fonctionnalit\u00e9s de notre plugin, nous pouvons commencer \u00e0 coder. Comme pour tout plugin jQuery, tout le code doit \u00eatre compris dans une fonction:<\/p>\n\n\n
\n(function($){ \/* tout le reste du code se trouvera ici *\/ })(jQuery);\n<\/pre><\/div>\n\n\nViens ensuite la d\u00e9claration du plugin lui-m\u00eame:<\/p>\n\n\n
\n$.fn.charCount = function(options) { }\n<\/pre><\/div>\n\n\nEnsuite, viens la d\u00e9claration des variables du plugin:<\/p>\n\n\n
\nvar settings = $.extend({\n max: 250, \/\/ Nombre de caract\u00e8res maximum\n thr: 50, \/\/ Seuil d'alerte\n normal: '#000000', \/\/ Couleur du texte quand tout va bien\n alert: '#FFA500', \/\/ Couleur du texte quand le seuil est atteint\n reached: '#FF0000' \/\/ Couleur du texte quand le maximum est atteint\n}, options);\n<\/pre><\/div>\n\n\nLe plugin devant \u00eatre utilisable sur plusieur \u00e9l\u00e9ments d’une page, il faut pouvoir appliquer les effets du plugin sur chaque \u00e9l\u00e9ment faisant appel \u00e0 lui. Pour cela, on utilise la fonction suivante:<\/p>\n\n\n
\nreturn this.each(function() { });\n<\/pre><\/div>\n\n\nAvant toute chose, il faut ajouter \u00e0 chaque \u00e9l\u00e9ment une zone dans laquelle afficher le nombre de caract\u00e8res restants. Pour cela, deux lignes de code suffisent:<\/p>\n\n\n
\nvar obj = $(this); \/\/ Permet de simplifier la syntaxe\nobj.after('<div class="counter"><span style="color:'+settings.normal+';">'+settings.max+' caract\u00e8res restants<\/span><\/div>');\n<\/pre><\/div>\n\n\nLe compteur devant \u00eatre actualis\u00e9 \u00e0 chaque entr\u00e9e d’un nouveau caract\u00e8re, on fait appel \u00e0 la fonction:<\/p>\n\n\n
\nobj.keyup(function(){ });\n<\/pre><\/div>\n\n\n\u00c0 pr\u00e9sent, voyons le coeur du plugin:<\/p>\n\n\n
\nvar text = obj.val().length; \/\/ R\u00e9cup\u00e8re le nombre de caract\u00e8res du champ\nvar remaining = settings.max - text; \/\/ Calcule le nombre de caract\u00e8res restants\n\n\/*\nEnsuite, trois cas se pr\u00e9sentent:\n- le nombre de caract\u00e8res est en-dessous du seuil\n- le nombre de caract\u00e8res est au-dessus du seuil\n- le nombre de caract\u00e8res est au-dessus du max\nDans chaque cas, le contenu de la zone de compteur est actualis\u00e9 avec le nombre de caract\u00e8res restants, et la couleur associ\u00e9e\n*\/\n\nif ( remaining > settings.thr && remaining > 0 ) {\n obj.next('.counter').html('<span style="color:'+settings.normal+';">'+remaining+' caract\u00e8res restants<\/span>');\n} else if ( remaining <= settings.thr && remaining > 0 ) {\n obj.next('.counter').html('<span style="color:'+settings.alert+';">'+remaining+' caract\u00e8res restants<\/span>');\n} else {\n obj.next('.counter').html('<span style="color:'+settings.reached+';">Maximum atteint<\/span>');\n}\n<\/pre><\/div>\n\n\nPour finir, voici l’ensemble du code du plugin:<\/p>\n\n\n
\n(function($){ \n $.fn.charCount = function(options) { \n \n var settings = $.extend({\/\/set the default values for the controls\n max: 250,\n thr: 50,\n normal: '#000000',\n alert: '#FFA500',\n reached: '#FF0000'\n }, options);\n \n return this.each(function() {\n var obj = $(this);\n \n obj.after('<div class="counter"><span style="color:'+settings.normal+';">'+settings.max+' caract\u00e8res restants<\/span><\/div>');\n \n obj.keyup(function(){\n \n var text = obj.val().length;\n var remaining = settings.max - text;\n \n if ( remaining > settings.thr && remaining > 0 ) {\n obj.next('.counter').html('<span style="color:'+settings.normal+';">'+remaining+' caract\u00e8res restants<\/span>');\n } else if ( remaining <= settings.thr && remaining > 0 ) {\n obj.next('.counter').html('<span style="color:'+settings.alert+';">'+remaining+' caract\u00e8res restants<\/span>');\n } else {\n obj.next('.counter').html('<span style="color:'+settings.reached+';">Maximum atteint<\/span>');\n }\n });\n }); \n }; \n})(jQuery); \n<\/pre><\/div>\n\n\nPour voir le plugin en action, rendez-vous ici<\/a>.<\/p>\n\n\n\nJ’esp\u00e8re que cet article vous aura \u00e9t\u00e9 utile, et je vous dis \u00e0 bient\u00f4t pour d’autres d\u00e9couvertes !<\/p>\n","protected":false},"excerpt":{"rendered":"
Aujourd’hui nous allons voir comment faire un plugin jQuery, qui permet de compter le nombre de caract\u00e8res pouvant encore \u00eatre accept\u00e9 dans des champs de texte. Pour commencer, il faut d\u00e9cider du nombre de variables utiles \u00e0 ce genre de … Continuer la lecture