itlivewire dev blog » jquery

top jquery plugins of 2009

admin — Sun, 27 Dec 2009 15:08:00 +0000

woorkup features the top jquery plugins of 2009

http://woorkup.com/2009/12/27/10-popular-jquery-plugins-in-2009-you-can%E2%80%99t-miss/

includes the very impressive mapbox and jqtouch

jquery dynamically update table rows data

admin — Tue, 02 Dec 2008 02:58:45 +0000

To dynamically change the table rows use this smart approach using jquery

Assign your new table data rows to a variable
var msg="Kristine18peachVanessa25strawberry";

Delete the exsiting rows except for the header tr:first – represents first row of the table – which happens to be our header
$("tableÂ tr:first").siblings().remove();
Then add the new data, the msg javascript variable used here holds the new table rows data $("tableÂ tr:first").after(msg);

I have a very detailed step by step tutorial you can view here

Jquery best practices

admin — Wed, 08 Oct 2008 12:08:41 +0000

From Smashing Magazine

Rule #1: Separate Javascript Functionality

Bad markup:

Never include Javascript events as inline attributes. This practice should be completely wiped from your mind.

<a onclick=“doSomething()” href=“#”>Click!a>

Click!

Good markup:

All Javascript behaviours should be included in external script files and linked to the document with a

<a href=“backuplink.html” class=“doSomething”>Click!a>

Click!

And the Javascript inside the myscript.js file would contain something like this:

$(‘a.doSomething’).click(function(){
//Â DoÂ somethingÂ here!
alert(‘YouÂ didÂ something,Â wooÂ hoo!’);
});

More best practices can be at Smashing Magazine

Jquery Multi Column Select Box

admin — Wed, 08 Oct 2008 04:35:45 +0000

A jquery plugin that creates a multiple column selectbox
Donwload plugin at: http://code.google.com/p/jquerymulticolumnselectbox/

Directions for Use:

1. Include of course jquery.js and jquery.multicolselect.js

2. Create a table put an id to the div “ex. datatable”

ID	Key	Fruit
1	1234	Apple
2	1111	Cat
3	5555	Dog

3. Run the plugin using this command

$("#datatable").multicolselect({
	   		buttonImage:"selectbutton.gif",
			valueCol:1,
	  		hideCol:0
	   });

4 . Note you need the “selectbutton.gif” so save it.
5. Then your done.

Options

buttonImage	The source of your button image
valueCol	The column index to be used to display value for the textbox
hideCol	The column index to hide this is usually an id column