Home. jQuery Plugins - Plugins, Extensions & Tutorials for jQuery JavaScript Library. How to Create Your Own jQuery Plugin. If you have never created a jQuery plugin, it takes just a few simple steps to get started.
By following a handful of guidelines, you can develop a plugin that behaves and feels like a native jQuery method. Before I begin describing these guidelines, I want to acknowledge some sources that were instrumental when I first started learning how to write a jQuery plugin. Some of them have been around a long time, and their content is always top notch. Why Create a jQuery Plugin? Here is a brief list of reasons you might want to create a jQuery plugin: Reuse, reuse, reuseEncapsulationEasy to writeMaintain chainabilityPublic distributionPrevent namespace clashing Among these, I think that one of the best reasons to create a plugin is to encapsulate your code for reuse across your project.
If none of these reasons hit home with you, know that jQuery plugins are just plain fun to write, use, and reuse. Writing your first jQuery plugin from scratch. In this tutorial, we’ll show you the basics of how to create your very own jQuery plugin by showing you how to create a jQuery accordion.
This tutorial assumes you already have a working knowledge of html, css and some jQuery. This has many advantages, it makes reusing your code much easier and saves you time when coming to different projects! Also, it can help if you work as part of a team, it’s much easier to point a team member to a file and tell them to just perform a simple jQuery function call in the head of your html rather then having to copy over 100 lines of code that they didn’t write and don’t understand. Setting up First we’ll create a basic html page that will include the jQuery library from Googles servers, our accordion script file and a css file for styling. Here’s the html code we’ll be working with. and here’s the css code we’ll be working with which I’ve put into a file called ‘style.css’ and placed this in the same directory as the html file. Writing the Perfect jQuery Plugin - Jupiter JavaScript Consulting.
jQuery is an excellent DOM abstraction, but compared to other libraries, it leaves much to desire towards building complex, reusable functionality.
There’s lots of good examples and resources, but most of them fall short in providing a pattern that is: extensible - you can add new features or derive new functionality from old functionality. Organized - the plugin is structured without a lot of anonymous functions Destroyable - you can remove the plugin without lingering side effects Deterministic - find out what’s going on where. Publication’s Purpose My goal for this article is two-fold: Raise the bar for what’s considered a “quality” widget.
You can find all the source code and examples in this JSFiddle. Perfect Perspective The perfect plugin is many things. Progressive enhancement Event oriented architecture High performance plugins Futhermore, I’m focusing on a very specific type of plugin - widget plugins. Prior Patterns There’s a lot of other widget patterns. Problem Plugins Extensible. How To Develop a jQuery Plugin. jQuery is the most popular JavaScript library and many sites adopt it for dynamic effects and Ajax functionality.
However, relatively few developers delve into the depths of plugin development. In this tutorial, we will create simple plugin to explain the basics. Our code will reverse the text within one or more selected nodes — view a demonstration page. Why Create a jQuery Plugin? In a word: re-use. How jQuery Works At its core, jQuery is passed DOM elements or a string containing a CSS selector. // color all <p> tags red $("p").css("color", "red"); Note: although the jQuery library is named ‘jQuery’, ‘$’ is a shortcut variable that references it. How jQuery Plugins Work jQuery allows methods to be added to its library. Our example plugin will be called using code such as: // reverse the text in all <p> tags $("p").reverseText(); We will also add two optional parameters, minlength and maxlength.