Jquery UI Entry Manual

Jquery UI Entry Manual, a must-have for beginners.
First, describe the effect:
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)
Section 1: interaction with the mouse
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/draggableappsoptions
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... OS/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 example: http://dev.jquery.com/view/trunk... s/ui.resizable.html
Section 2: Interactive Effect
2.1 accordion folding menu
required file:
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
This article is transferred from www.35java.com