Jquery UI (Interface) for various effects

Basic mouse Interaction:
Drag and dropping, sorting, selecting, and resizing)

Various Interactive effects:
Accordions, date pickers, dialogs, sliders, table sorters, and tabs), Magnifier effect (magniier), shadow effect (Shadow)

Part 1: Mouse Interaction
1.1 draggables: Drag
Required files:
Ui. Mouse. js
Ui. draggable. js
Ui. draggable. Ext. js

Usage: After a file is loaded, you can drag the layer of class = "Block"
$ (Document). Ready (function (){
$ (". Block"). draggable ();
});

Draggable (options) can be followed by many options
Option Description: http://docs.jquery.com/UI/Draggables/draggable#options
Option instance: http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html

1.2 droppables
Required file, drag drop
Ui. Mouse. js
Ui. draggable. js
Ui. draggable. Ext. js
Ui. droppable. js
Ui. droppable. Ext. js
Usage:
$ (Document). Ready (function (){
$ (". Block"). draggable ({helper: 'clone '});
$ (". Drop"). droppable ({
Accept: ". Block ",
Activeclass: 'droppable-active ',
Hoverclass: 'droppable-Hover ',
Drop: function (EV, UI ){
$ (This). append ("<br> dropped! ");
}
});
});
Option Description: http://docs.jquery.com/UI/Droppables/droppable#options
Option instance: http://dev.jquery.com/view/trunk/plugins/ui/tests/droppable.html

1.3 sortables sorting
Required file
Jquery. dimensions. js
Ui. Mouse. js
Ui. draggable. js
Ui. droppable. js
Ui. sortable. js
Usage:
$ (Document). Ready (function (){
$ ("# Mylist"). sortable ({});
});
Dimensions document http://jquery.com/plugins/project/dimensions
Option Description: http://docs.jquery.com/UI/Sortables/sortable#options
Option instance: http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.sortable.html

1.4 select
Required file
Jquery. dimensions. js
Ui. Mouse. js
Ui. draggable. js
Ui. droppable. js
Ui. selectable. js
Usage:
$ (Document). Ready (function (){
$ ("# Mylist"). selectable ();
});
Option Description: http://docs.jquery.com/UI/Selectables/selectable#options
Option instance: http://dev.jquery.com/view/trunk/plugins/ui/tests/selectable.html

1.5 resizables change the size
Required file. In this example, several CSS files are required.
Jquery. dimensions. js
Ui. Mouse. js
Ui. resizable. js
Usage:
$ (Document). Ready (function (){
$ ("# Example"). resizable ();
});
CSS file: http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
Option Description: http://docs.jquery.com/UI/Resizables/resizable#options
Option instance: http://dev.jquery.com/view/trunk... S/ui.resizable.html

Part 2: Interaction Effect
2.1 Accordion fold menu
Required files:
Ui. Accordion. js
Jquery. dimensions. js
Usage:
$ (Document). Ready (function (){
$ ("# Example"). Accordion ();
});
CSS file: http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
Option Description: http://docs.jquery.com/UI/Accordion/accordion#options
Option instance: http://dev.jquery.com/view/trunk/plugins/accordion? P = 1.1.1
2.2 dialogs dialog box
Required files:
Jquery. dimensions. js
Ui. Dialog. js
Ui. resizable. js
Ui. Mouse. js
Ui. draggable. js

Usage:
$ (Document). Ready (function (){
$ ("# Example"). Dialog ();
});
CSS file: http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
Option Description: http://docs.jquery.com/UI/Dialog/dialog#options
Option instance: http://dev.jquery.com/view/trunk/plugins/ui/tests/dialog.html

2.3 scyclers slide
Required file
Jquery. dimensions. js
Ui. Mouse. js
Ui. Slider. js

Usage:
$ (Document). Ready (function (){
$ ("# Example"). Slider ();
});

CSS file: http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
Option Description: http://docs.jquery.com/UI/Slider/slider#options
Option instance: http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.slider.html

2.4 tablesorter table sorting
Required file
Ui. tablesorter. js

Usage:
$ (Document). Ready (function (){
$ ("# Example"). tablesorter ({sortlist: [[0, 0], [2, 1], Widgets: ['zebra ']});
});

CSS file: http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
Option Description: http://docs.jquery.com/Plugins/Tablesorter/tablesorter#options
Option instance: http://tablesorter.com/docs/#Demo

2.5 tabs tab (not very good for IE Support)
Required file
Ui. Tabs. js
Usage:
$ (Document). Ready (function (){
$ ("# Example> ul"). tabs ();
});
CSS file: http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
Option Description: http://docs.jquery.com/UI/Tabs/tabs#initialoptions
Option instance: http://dev.jquery.com/view/trunk/plugins/ui/tests/tabs.html
Tabs ext http://stilbuero.de/jquery/tabs_3/rotate.html

Part 3: Effect
3.1 shadow
Http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html
3.2 enlarge magniier
Http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.magnifier.html