Wednesday, April 8, 2009

JQuery Examples of Plugins

How to Load one Page into another.
Example on AjaxJQ01.aspx:

$(document).ready(function() {
$('#Panel1').load('AjaxJQ1.aspx');

});



How to make Controls Resizable ?
The example below Resizes TextBox,Button,DIV,Image.
Just add the UI.Resizable.js plugin ,ui.core.js along with the latest Jquery reference. and add below code and see the magic of Jquery:


$(document).ready(function() {
$("#TextBox1").resizable();
$("#Button1").resizable();
$("#resizable").resizable();
$("#Image1").resizable();

});


Where #TextBox1,#Button1,#Image1 are the ID of respective asp.net controls where as #resizeable is the ID of DIV placed inside the page.


How to Use Drag and Drop Plugin in General.?

Add the Draggable.js and Droppable.js and ui.core.js Plugin.And add the following Code:


$(document).ready(function() {


//$("#divDrag").draggable({ helper: 'clone' });
$("#divDrag").draggable();

$("#divDrop").droppable({

accept: "#divDrag",

activeClass: 'droppable-active',

hoverClass: 'droppable-hover',

drop: function(ev, ui) {

$(this).append("
Dropped :)");


var theId = $(this).attr("id");

// alert(theId);

//Do your AJAX stuff in here.

}

});

On the Page :

div id='divDrop'
Drop Here.
div


div id='divDrag'
Drag Me.div



Just Delve into JQuery ...you'll fall in love with it.......

Thanks,
Nitin Sharma

Moon Driving Car @ Shipra Mall



Part I







Part II





Part III