It’s pretty easy to turn your code straight into jQuery plugin ready for use with any website. The hardest part is finding a way to properly structure your code so it is independent and easy to use.
Advantage of converting jQuery code into a plugin
- efficiently organizing jQuery code
- your code becomes easier to modify and follow
- repetitive tasks are handled naturally
- improves the speed with which you develop
- plugins are organised and promotes code reuse
Creating jQuery Plugin Tips
Leave specifics out of the code (ie anything that relates directly to the example that the jQuery code is being used for).
Rewtite code to include the “this” object instead of hard-coding a selector to make it more generic
jQuery Plugin Structure
How to convert jQuery Code to a plugin
All you need to do is extend the $.fn object with your own function (Let’s not reinvent the wheel, see the example below!).
Examples of Simple jQuery Plugins and Tutorials
- Simple Plugin Tutorial to Animate a Menu
- Plugins/Authoring Official Documentation
- jQuery Plugin Tutorial, In-Depth For Absolute Beginners
- How to Build a Simple Content Slider jQuery Plugin
- The Definitive Guide to Creating a Practical jQuery Plugin
- How To Create A Plugin For jQuery
- Learn How to Create a jQuery Plugin
- A Plugin Development Pattern
Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.
Your First Year in Code
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Jump Start Git, 2nd Edition