16 jQuery Plugins i used the most

11 May
2009

It’s been over 2 years for me using jQuery in different web applications. In the beginning, there were not much alternatives to a plugin. In the modal box area, Thickbox was the uncrowned King. Bassistance.de ‘s validation was the only good validation plugin earlier. But now, millions have embraced jQuery and developed quite a lot of plugins. Most of them has alternatives. I requested jQuery.com to allow people post similar plugins on plugins pages so that people know in a nutshell about the available alternatives.  But it’s still not there. Anyways, I’m going to list out the plugins i used practically more frequently. Let’s see them by category.

Interface
jQGrid
Flexigrid
Table Drag And Drop
Tooltip Related
jGrowl
Tooltip
SlideShow
Cycle
Scrollable
Forms
Validation
Masked Input
Modals & Overlays
Boxy
Thickbox
Colorbox
Nyromodal
BlockUI
Navigation
Lavalamp
jScrollPane
Ui Tabs

6 Responses to 16 jQuery Plugins i used the most

Avatar

selma

July 12th, 2009 at 4:58 pm

Is there any piece of code that shows how to use boxy with jquery validation inside the boxy?

Avatar

samiuljahan

July 31st, 2009 at 12:52 pm

How can I use Jqgrid with codeigniter?

Avatar

Mahbub

August 2nd, 2009 at 5:12 pm

I have recently used jqgrid 3.5 which is powered by jquery ui. But it’s not as library for CI. I just used it as normal installation using JSON.

The main thing is that you have to use mtype=”post” in param. This is how it looks like.

$(document).ready(function(){
jQuery("#user_grid").jqGrid({
url:'',
datatype: "json",
mtype : "post",
colNames:['Username','Email', 'Last login'],
colModel:[
{name:'username',index:'username', width:200},
{name:'email',index:'email', width:150},
{name:'last_login',index:'last_login', width:150},
],
rowNum:10,
rowList:[10,20,30],
pager: jQuery('#pager2'),
sortname: 'id',
autowidth: true,
viewrecords: true,
sortorder: "desc",
jsonReader: { repeatitems : false, id: "0" },
caption:"All Users"
}).navGrid('#pager2',{edit:false,add:false,del:false});
});

Avatar

blueblood

September 18th, 2009 at 5:18 am

is there any demo/sample how it works?

Avatar

Dean

December 18th, 2009 at 3:32 pm

hi there Mahbub,

im working right now on jqgrid w/ codeigniter. Right now im able to display all rows gathered from my db. But my my problem is i cant get it work the add, edit, save & even delete button in the jqgrid.

could you help me with this. :( (
hope to hear from you soon.

thanks

Avatar

Mahbub

December 23rd, 2009 at 11:10 am

You have to insert links in cells to do that like

$(document).ready(function(){
jQuery("#user_grid").jqGrid({
url:'< ?php
echo site_url ( "sales/leads/browse" );
?>',
datatype: "json",
mtype : "post",
colNames:['ID','Submitted','Contact Name', 'Company Name','Web site','Phone','Email','Active','Action'],
colModel:[
{name:'sales_lead_id',index:'sales_lead_id', width:20}, 
{name:'submit_date',index:'date_submitted', width:120}, 
{name:'contact', index:'contact', width:150}, 
{name:'company', index:'company_name', width:100},
{name:'website', index:'website', width:140},
{name:'phone', index:'phone', width:120},
{name:'email', index:'email', width:130},
{name:'active', index:'active', width:80}, 
{name:'act',index:'act', sortable:false, width:60} 

],
rownumbers: false, 
rowNum:10,
rowList:[10,20,30], 
pager: jQuery('#pager2'),
sortname: 'sales_lead_id',
autowidth: true, 
height: "100%", 
viewrecords: true, 
loadComplete: function(){
var ids = jQuery("#user_grid").getDataIDs(); 
for(var i=0;i<ids .length;i++){
var cl = ids[i];
be = '<div class="one_line">'
+'<a href="javascript:;" onclick="view_leads('+ids[i]+');" rel="nofollow"><span class="ui-icon ui-icon-newwin"></span></a>'
+'<a href="javascript:;" onclick="del_user('+ids[i]+');" rel="nofollow"><span class="ui-icon ui-icon-closethick"></span></a>'
+'<a href="javascript:;" onclick="edit_user('+ids[i]+');" rel="nofollow"><span class="ui-icon ui-icon-pencil"></span></a>'

+'';
jQuery("#user_grid").setRowData(ids[i],{act:be}); 
}
},
sortorder: "desc",
jsonReader: { repeatitems : false, id: "0" }, 
caption:"Sales Leads Overview"
}).navGrid('#pager2',{edit:false,add:false,del:false}); 
});

Look around the  loadComplete function which inserts the html links in the cell. Hope this helps.

Comment Form

top