How To Create jQuery Plugin 15 Must Read Tutorials

Now a days using jQuery is a real fun for web developers across the world and why not it is very flexible and interactive script that allows you write do more writing less.

Writing your own jQuery plugin is more challenging than using ready made plugin that is easily available on a click. For creating your own plugin you should have good understanding of javascript and have passion to learn jQuery.

If you are really keen about creating your own plugin than you should be able to create plugin after reading these very interesting tutorials. In this post I am sharing some really useful jQuery plugin tutorials that will help you in a better way.

Here's the list of tutorials:

1. jQuery  Plugin/Authoring

In this very first tutorial that is from jQuery website itself will help you to understand the basic fundamentals of plugin. It contains getting start guide that teaches you from the scratch.

2. Learn How to Create a jQuery Plugin by Jeffrey Way

You might think to yourself, “What is all the fuss with jQuery? You have to download a bunch of plugins to even make the library worth while.”. First, that isn’t true. Second, the jQuery library was specifically designed for that very purpose.

3. The Definitive Guide to Creating a Practical jQuery Plugin by Dan Wellman

In this article you’re going to be building our very own jQuery plugin step-by-step from scratch; jQuery makes this task exceptionally easy for us, giving us a simple method of packaging up our scripts and exposing their functionality, and encouraging the use of scalable and reusable object-oriented techniques.

4. How to Create Your Own jQuery Plugin by Elijah Manor

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.

5. Create a custom jQuery plug-in by Kris Hadlock

jQuery is a powerful library that delivers all of the core functions you need when developing a JavaScript project. However, sometimes it's necessary to extend the core functions with custom code that helps you be more productive. In this article, learn how to create a custom reusable plug-in using the jQuery library.

6. Building Your First jQuery Plugin by Jeremy Martin

So you were out on your quest to find the answer to life, the universe, and everything, when blam, you found jQuery. Yes, I know, you were expecting 42, but too all of our surprise, it was jQuery. So what's next? Build your own plugin!

7. Learn How To Create Your Own jQuery Plugin by Giulio Bai

jQuery offers a very practical and easy way to build plugins, as well as a very good documentation on this subject. However, it could be useful to see how a plugin is written step-by-step.

8. Creating jQuery Plugins by Jack Slingerland

Not too long ago I decided to write a jQuery plugin for making the use of iScroll a little less painful. Since I made the plugin at work I’m not really at liberty to share it. But what I can share is a step by step tutorial for creating a jQuery plugin of your own.

9. My first jQuery plugin - how easy was that? by Richard Quick

I've been writing Javascript (on and off) for since 1999, and doing jQuery for over 2 years now. I've even gotten pretty good at it. So, I decided it was time to start writing my first actual jQuery plugin.

10. How to write jQuery plugins by Tim Koschützki

jQuery, the most popular javascript library out there, is great for DOM abstraction. It allows you to encapsulate functionality into your own plugins, which is a great way to write reusable code. However, jQuery's rules for writing plugins are very loose, which leads to different plugin development practices - some of which are pretty poor.

11. Making a jQuery Plugin Truly Customizable by James Padolsey

Most if not all of the jQuery plugins out there have some level of customization. But very few of the plugin authors have mastered the very particular art involved.

Achieving the "optimum level" of customization is a bit of a balancing act… go too far either way and you've got an unusable plugin!

12. Creating a jQuery plugin by Mike Barlow

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.

13. How to create a jquery plugin from scratch in 3 easy steps

jQuery plugins are a great way to reuse a certain functionality you find yourself using all the time. Whether you make a Plugin for yourself or share it with the world Plugins will save you a lot of time. The best thing about Plugins is that they are really easy to make! Let’s get started.

14. Develop your own jQuery plugin by Adrien Gueret

jQuery is arguably the most popular of the JavaScript libraries, and its popularity only continues to grow. A lot of websites have adopted jQuery for the dynamic effects that it can produce to create sleek, professional user experiences.

15. How to Make a jQuery Plugin - Tutorial for Beginners by Greg Sidelnikov

In this tutorial you will learn about 2 different jQuery plugin patterns (pattern A and pattern B) -- by the end of this tutorial, you should be able to grasp the basics behind writing custom jQuery plugins.

Do you have any opinion please leave a comment or share this post in your social network.

10 Super jQuery and Ajax Scripts for Web Developers

In web development scripts like jQuery and Ajax becomes very handy for web developers. If you are a learner or a expert these scripts is really helpful of all.

In this post I have shared free jQuery and Ajax scripts to help our upcoming web developers. In this list includes - A Drop-Down Menu Plugin for jQuery, Rotating jQuery Tabs, Sliding Login Panel with jQuery, AJAX Loading Panel, Mysql Ajax Table Editor, jQuery youtube playlist plugin etc.

Nice & Clean Sliding Login Panel built with jQuery

Please note the Login and Register forms in this demo will not work "out of the box" without a user login system pre-installed on your site (e.g. PHP/MySQL user login system)! However, most of the CMS such as Joomla, Drupal, Wordpress, etc have a login system integrated in their platform. So if you are using one, read their documentation to see how you could implement this script into your CMS.



Download | Demo

UPLOADIFY

Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

Uploadify is available under the GPL and MIT licenses. This allows Uploadify to be used in a number of applications and commercial products.



Download | Demo

Mysql Ajax Table Editor

Mysql Ajax Table Editor is a php script that will allow you to create web pages to edit mysql tables in a matter of minutes. Similar to phpMyEdit but way better. Some of MATE's features are advanced search, order by columns, edit multiple rows, language support and join other tables.



Download | Demo

jQuery youtube playlist plugin

This nice plugin allows you to turn a list of YouTube links into a playlist. This would allow the you to manage your videos on YouTube and simply insert links to the videos on your site. With javascript enabled a nice playlist is created, whilst without javasript the user gets a regular list of links to youtube pages.



Download | Demo

nmcDropDown: A Drop-Down Menu Plugin for jQuery

A quick jQuery plugin for creating drop-down menus. Very nice and easy to use.



Download | Demo

Datepicker and Calendar Eightysix

Calendar Eightysix is an unobtrusive developer friendly calendar and datepicker, offering a better user experience for date related functionalities. The successor of the popular Vista-like Ajax Calendar! Key features:

:: Quick navigation by jumping back and forth between months, years and decades without drop-down boxes
:: Highly and easily customizable
:: Packed with three themes
:: Lightweight (9.5 kB compressed)
:: Purely javascript; AJAX-less and no PHP needed



Download | Demo

Rotating jQuery Tabs

Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.

By default a tab widget will swap between tabbed sections onClick, but the events can be changed to onHover through an option. Tab content can be loaded via Ajax by setting an href on a tab.



Download | Demo

jQuery Highlighter - Easy to use jQuery Plugin

Highlighter easy for customization. Keyboard enabled.

* Keyboard Navigation (arrowkeys + ESC)
* Highly Customizable
* Autoplay
* Todo Accessible
* Todo Cross Browser Compatibility



Download | Demo

Fancy Sliding Tab Menu

The Fancy Sliding Tab Menu is back and better than ever in Version 2 and this time an idle state listener is included to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window.

The menu is developed in script.aculo.us and as mentioned above has some extra features as requested in comments after the last version of the Fancy Sliding Tab Menu.



Download | Demo

AJAX Loading Panel

Enhance your site's look and feel during AJAX requests with the fully customizable state-of-the art Web 2.0 AJAX Loading Panel without writing a single line of code!

All you have to do is to follow a few easy steps, modify a couple of properties and add the show and hide methods to your XMLHttpRequest function.



Download | Demo

Do you any opinion, please leave a comment.

20 Must Read JQuery Tutorials for Web Developers

JQuery is a very powerful tool for web developers to create extra ordinary effects. If you are looking a JQuery tutorials then your search ends here. In this post I am sharing a list of very useful JQuery Tutorials to help web developers.

In this list includes Form Validation, Form Submission without refreshing a page, Jquery Accordion Menu, Modal Window Tutorial, Vertical Scrolling menu with CSS and JQuery, Building Lightbox with JQuery and ASP.NET User Controls and jQuery etc.

Here's the following JQuery Tutorials list:

Simple JQuery Image Slide Show with Semi-Transparent Caption

I will show you how to create a simple image slide show with a semi-transparent caption with jQuery. This example is suitable to display news headlines, or a image slide show in your website frontpage.



Inline Image Enlargement with jQuery

So, having the day off, I decided to mess around a little with image manipulation. There are a ton of tutorials out there about LightBox and other similar jQuery plugins, but my goal was to make something simple without needing to have another page to load so I could see the image…to make it a little bit larger, so to say.



State-Saving jQuery Accordion Menu Without Reloading the Page

After finding jQuery, I fell in love with it's ease of use and relatively small code footprint. When I set out to create this site, I wanted something that: used the entire page, scaled well, looked nice, degraded gracefully and was SEO friendly. What I found was jQuery's accordion menu. You may recognize the second example (#list1b) as a smaller version of my Portfolio; however, I wanted to tweak it (of course) and make it so each section housed my page copy and could be bookmarked and re-accessed without having to re-click on that section. I also completely re-styled the menu with a CSS file but that is beyond this tutorial.



Tutorial : AJAX interface/menu using jQuery/PHP

This tutorial teaches you how to present data using AJAX (using jQuery) with some neat effects. We can use PHP/MySQL to store the data and call it. In this tutorial I`ll teach you how to do so with PHP.



Improving Search Boxes with jQuery

This time we will learn how to improve a little more our sites by adding some additional interactions to our search boxes like autofocus, highlighting, autoreplace default text and more by using jQuery



How to make a completely reusable jquery modal window

In this tutorial we will code a modal window with jQuery that is completely reusable, so we can put multiple modal windows without making a specific coding for it.



How to Validate Forms in both sides using PHP and jQuery

We are going to learn how to validate your forms using PHP and jQuery in both sides: client side (using javascript with jQuery) and server side (using PHP). It will be interesting to see how to use regular expressions to validate different kind of e-mails, passwords and more.



Create a Vertical Scrolling Menu with CSS and jQuery

So here it is, a fully reworked menu, with some new features, like text tooltips and loading message. As always this menu works in all major browsers and degrades gracefully when JavaScript is turned off.



JQuery – Star Comment Rating

Here is a nice little rating effect. This does not include the PHP, it is only the JavaScript, HTML, CSS, and Images. If you like this, I do have the PHP script that I created, but will not support, and I threw together quite quickly. But, what the heck, back to this post now.



Submit A Form Without Page Refresh using jQuery

In this tutorial I'll show you how easy it is to do just that -- submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background).



Building a Lightbox with JQuery

Rather than assume that you know what I mean by a lightbox, I’ll briefly explain it. The first experience I had with this UI pattern, and I believe the first real example of it, was by Lokesh Dhakar in 2005. Since then, this pattern of simple, unobtrusive script used to overlay images on the current page huddletogether.com is everywhere. It’s hard to find a modern site without some variant of the in-page popup element over a semi-transparent background.

jQuery Thumbnail with Zooming Image and Fading Caption Tutorial

Learn how to build thumbnail gallery with zooming effect and fadein and fadeout caption. This tutorial will walk you through the concept behind it and how to code it.

Making a jQuery infinite carousel with nice features

Due to high interest in the first tutorial on jQuery infinite carousel and a lot of suggestions from you all, i decided to take it a step further by improving the code a bit, and add some features.

ASP.NET User Controls and jQuery

If you like programing pure in client side to render every thing your self for more control , you should integrate your client side scripts with server side technology.

Create a Thumbnail with Fading Caption Using jQuery

This tutorial will show you how to create a fading caption for your thmbnail gallery. It uses jQuery framework and CSS to create this transparent and fading effect.

Client side filtering data with jQuery

In this tutorial we are going to make a really easy to build filtering system with jQuery. There will be no AJAX or PHP, just HTML and jQuery.

Making a jQuery Plugin Truly Customizable

Most if not all of the jQuery plugins out there have some level of customization. But very few of the plugin authors have mastered the very particular art involved.

How to load content via AJAX in jQuery

It’s a simple but useful tutorial for those who need to know how to load dynamically some static content in their websites via AJAX. I have decided to write it because Cyanade ( an user from our forums) asks some questions about dynamic content and ajax in their post Integrating jQuery into an app.

Turn Nested Lists Into a Collapsible Tree With jQuery

This can be countered by using JavaScript to turn the nested lists into a collapsible tree. And, while being at it, list items that include other lists should be represented as folders.

jQuery Thickbox and ColdFusion Dynamic Image Resizing

I want to build a page which will make use of the Thickbox plugin, but I don't want to hard code the images. Instead, I'll let ColdFusion scan a folder and create the list for me. Since I'm using ColdFusion 8, I can also use it to create the thumbnails as well. This means I can copy images right off my camera, dump them in a folder, and leave it at that. I like easy. Let's look at the code.

If have any opinion, please leave a comment.