Chargement...

Développer son propre plug-in jquery

Accueil › javascript / jQuery › Créer extension
 Plugins jQuery AngularJS 

Un plugin JQUERY c'est quoi

L'avantage de jQuery c'est qu'il est très simple d'utilisaton, créer un plugin permet de simplifier encore plus son utilisation. Ainsi pour un module de datepicker, la syntaxe pourrait ressembler à ceci:
$(input).datepicker();
Créer son propre plugin jquery permettrait de donner une spécificité aux éléments avec la syntaxe suivante :
$(element).monplugin();

Déclarer un plugin jquery

(function($) { $.fn.monplugin = function(params) { ... }; })(jQuery);

Exemple d'un plugin jQuery

Construisons un plugin jQuery qui permet de changer la couleur et le contenu d'un champ texte :
(function($) { $.fn.cssw_datepicker = function(params) { $(this).css({ 'background-color': params.color }).val( params.input_value ); }; })(jQuery); $("#input_datepicker").cssw_datepicker({ color : 'yellow', input_value : "Plugin correct" });
Résultat :



UNE QUESTION SUR L'ARTICLE?
 Plugins jQuery AngularJS 

Initiation

Un site web c'est quoi?Dév. back-end / front-endQue dois-je maîtriser ?Design /ergonomie webNavigateur ChromeL'éditeur de texteInstaller serveur webPhotofiltreOVH HébergementFTP et filezillaDictionnaire informatique

HTML

HTML c'est quoi?Créer une page webLes balisesLes attributsLes tableauxLes listesLes imagesLes liensLes inputsLes formulairesCaractères spéciaux

CSS

CSS c'est quoi?Les sélecteursL'héritageLes propriétésLes couleursLa policeLes margesPositionFlottantLes pseudo classLes unités de mesureResponsive designAstuces CSSAnimations CSS

PHP

PHP c'est quoi?Mon premier scriptLes commentairesVariableFonctionArray / TableauLoop / boucleConditionsGET et POSTCookiesSessionsVariables serveurDates

PHP Avancé

Syntaxe alternativeEcrire/Lire un fichierExpressions régulièresPOOPDOJSONXMLImport / Export CSVEnvoyer un mailFonction récursiveConvertir page web en PDF

Bootstrap

Bootstrap c'est quoi?La grilleLes boutonsBadges et LabelsImages / GlyphiconLes alertesResponsive tablesTooltipCarouselFenêtre dynamiqueBootstrap wrap / BootswatchFont Awesome

javascript / jQuery

jQuery c'est quoi?JavascriptLes selecteursManipulation DOMEvènementsAjaxPlugins jQueryCréer extensionAngularJS

MySQL

Mysql c'est quoi?SQLSQL CREATESQL INSERTSQL SELECTSQL UPDATESQL DELETEPHPMyAdminLes jointuresStocker mot de passe

Symfony 2

Introduction symfonyInstaller symfonyBundles (modules)RouteControllerTWIGAsseticBootstrap / Font AwesomeAngularJSDoctrine / EntitésFormulairesMise en prodBundles FOSSécuritéServicesAPI REST

Prestashop

Installer eboutique PrestashopGestion PrestashopPersonnaliser PrestashopModules Prestashop

Optimiser

En-tête HTTP / CacheSEO RéférencementEncodageSécuriser son site .htaccessURL RewritingSass CompassCoffeeScriptGruntSitemap.xmlConvertir images

Linux

Linux c'est quoi?Emuler LinuxInstaller Linux UbuntuLes commandes linuxLes droits utilisateursConfigurer UbuntuInstaller Apache MySQL PHPInstaller Nginx + PHP5 FPMConfigurer VHostInstaller serveur SMTPCapture écran / gif

Site

Mentions légales


CSSW Apprendre à créer son site web CSSW