7 jQuery code snippets a programmer need daily

by Php Ninza on August 2, 2009


Usually programmers use a lot of JavaScript code snippets as functions regularly, These JavaScript functions are lengthy code snippets and are usually tough to understand and edit. Some of the most common functions used are form validation functions , Pagination functions etc.

The day since jQuery has been on the block , It has provided a nifty way of solving a lot of common problems for which we needed lengthy JavaScript functions. I am sharing with you guys top 20 jQuery plugins and code snippets that are pretty useful for daily coding routines.

1) Form validation plugin:- Form validation is probably the most common used JavaScript functionality used these days . However , a lot of repetitive editing is required in the forms and JavaScript regex expressions for correctly fitting the validations.

For this a nifty jquery plugin Valid8 provides a easy to use 4 line code to insert validation in any form !, Valid8 provides various methods including ajax requests, multiple regex validation etc in form validation , I have found ajax requests to be a nifty feature while checking username availability in registration and signup forms

Valid8 plugin page can be found at http://www.unwrongest.com/projects/valid8/

And it can be downloaded from:-

http://jquery-valid8.googlecode.com/files/jquery.valid8-1.2.2.js

2) Drag and Drop functionality using jQuery:- This excellent tutorial showed me a nifty way of making a drag and drop functionality , This drag and drop interface provide a excellent web 2.0 interface in your web projects for user usability. This drag and drop tutorial uses the Google JqueryUi plugin , Which we believe is used by google on it’s products  Drag and drop is used heavily by Google on it’s products such as gmail and igoogle.

For making such a drag and drop functionality you will need the jquery Ui plugin by google which can be located here.

The tutorial can be find at :- http://papermashup.com/drag-drop-with-php-jquery/

The demo of this tutorial can be located at http://papermashup.com/demos/jquery-drag-drop/

And the complete source code of the tutorial can be downloaded from http://papermashup.com/demos/jquery-drag-drop/jquery-drag-drop.zip

3) Pagination using jquery:- This is a official plugin from Jquery guys to provide pagination on any set of data you have. This plugin is a useful replacement of the php pagination classes and provides a neat web2.0 style pagination features.Pretty useful when we have a large sets of data such as search results or data listings.

Since this is a official plugin from jquery guys , The stability of the plugin is definitely unquestionable . it uses a simple javascript funciton which takes page_index and paging container as the arguments. For complete documentation read the official documentation of this plugin

The official Plugin page can be found at:- http://plugins.jquery.com/project/pagination

The demo of the plugin can be seen at:- http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm

4) Embed flash using jQuery:- Flash is probably the best intreactive web technology invented till date, The people tend to understand best by audio-visual effects and flash is the ultimate choice on web.

Dealing with flash variables , cross-browser issues and browsers with flash plugin not installed always left a bitter experience for a programmer, But using this Embed flash plugin this issues can be sorted out in a easy manner.

The official plugin page can be found at:- http://jquery.lukelutman.com/plugins/flash/

5) Creating tag cloud via jQuery:- Tag cloud are a excellent way of showing important keywords and categories on your website ! , Usually tag cloud are made through php class via predefined keyword density.

The official plugin dynacloud shows a neat simple tagcloud which is generated dynamically.

The official plugin page can be found at:- http://plugins.jquery.com/project/dynacloud

Demo of the plugin can be found at

http://johannburkard.de/blog/programming/javascript/dynacloud-a-dynamic-javascript-tag-keyword-cloud-with-jquery.html

6) Insert Simple ajax effects using jquery :- Simple effects plugin provides easy methods of inserting cool ajax functionality and UI in your web apps.

UI functionality like Fade toggle boxes and blind toggle boxes are cool effect that can make your web apps UI a lovely experience for your users.

The official plugin page can be found at http://www.learningjquery.com/2008/02/simple-effects-plugins

7) Creating tips with jQuery  :- Tips are some efficient way of showing simple bits of information to users, This jquery plugin gives you a excellent way to create nifty tips in html code

Plugin page can be found at:- http://codylindley.com/Javascript/264/jtip-a-jquery-tool-tip

Demo of this jquery plugin :- http://www.codylindley.com/blogstuff/js/jtip/

These are some basic plugins that can make progrrammers life easy ! Try them and let us know how you find them !, Do list out your favorites plugin below.

Technorati Tags: ,,,

Also, If you are beginning your steps on jquery development , Do try this excellent book on jquery . It has all necessary details on beginning jquery development

Technorati Tags: , , ,

25 Tweets

{ 5 trackbacks }

jQuery plugins that a programmer need everybody | PHP tutorials and Scripts Collection | Squico
August 3, 2009 at 12:00 am
7 jQuery Code Snippets to use on Every Project | Choose Daily
August 3, 2009 at 9:06 am
jQuery plugins that a programmer need everybody | PHP tutorials and Scripts Collection « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit
August 3, 2009 at 10:45 am
links for 2009-08-07 « Lelapin’s Weblog
August 8, 2009 at 1:08 am
??????? » [Web] ????
August 13, 2009 at 1:53 am

{ 26 comments… read them below or Shout @ me! }

Praval Singh August 2, 2009 at 2:54 pm

Good one, esp. for learners!

Reply   More from author

SeanJA August 2, 2009 at 7:47 pm

None of those were snippets, those were all plugins…

Reply   More from author

Roger Padilla August 2, 2009 at 7:55 pm

Very welcome, thank you!

Reply

Atif Majid August 3, 2009 at 5:23 am

Really Nice. Thanks for sharing

Reply

Sean O August 3, 2009 at 9:55 am

Snippets? Umm, these are plugins. You should change the title of this post for accuracy.

Reply

Liam August 3, 2009 at 10:28 am

title now says “jQuery plugins that a programmer need everybody”

Reply

Php Ninza August 3, 2009 at 11:33 am

@Praval

Thanks bud, The inspiration is always to friend my developer friends

Reply   More from author

Php Ninza August 3, 2009 at 11:38 am

@Roger

Thanks by stopping by , You guys are real inspiration

Reply   More from author

Php Ninza August 3, 2009 at 11:42 am

@SeanJa @Sean0

Thanks guys for stopping by !, If you go through the links given in the post , These links leads to some basic snippets that you can use with the help of plugins.

These plugins are now in daily use in my codes. I have found them very useful instead of using PHP classes and functions.

And there goes the post and the title , Hope i am clear !, Stay in touch

Reply   More from author

Php Ninza August 3, 2009 at 11:43 am

@Roger and @Atif

Thanks buds, I love to help newbies in web dev!, They bring in amazing enthu. Hope you guys liked it.

Reply   More from author

Php Ninza August 3, 2009 at 11:44 am

@liam

Can’t help this link was bookmarked by someone in that manner and which now became viral !, Can’t change that entry

Reply   More from author

Stas September 1, 2009 at 3:25 am

I suggest everyone to use new free PHP IDE – Codelobster PHP Edition with special JQuery plug-in for working with JQuery library.

Reply   More from author

Leave a Comment

Additional comments powered by BackType

Previous post:

Next post:

BidVertiser