Jquery ui description

Jquery ui is
A collection of user interface components officially released by jquery in combination with jquery! It includes many interface operations, such as table sorting, drag and drop, TAB, scroll bar, and album placement.
View, calendar controls, dialog boxes, and other JS plug-ins ~~ You can easily develop functions on the user interface to get twice the result with half the effort ~~ No need to write tedious JS Code ~
: Http://ui.jquery.com/download
After downloading, you will find many JS files and DOME files. You can demonstrate them one by one. Now, I will introduce the use of some common UI libraries.

Basic mouse Interaction:

Drag and dropping, sorting, selecting, and resizing)

Various Interactive effects:

Accordions, date pickers, dialogs, and slide bar

(Ssorers), table sorters, tab (tabs)

Magnifiers and 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:

1.$(document).ready(function() {     2.     $(".block").draggable({ helper: 'clone' });     3.     $(".drop").droppable({     4.        accept: ".block",     5.         activeClass: 'droppable-active',     6.         hoverClass: 'droppable-hover',     7.         drop: function(ev, ui) {     8.             $(this).append("Dropped!");     9.         }     10.     });     11.}); 

　　

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:

1. $ (Document). ready (function (){
2. $ ("# MyList"). sortable ({});
3. });

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:

1. $ (Document). ready (function (){
2. $ ("# MyList"). selectable ();
3. });

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:

1. $ (Document). ready (function (){
2. $ ("# Example"). resizable ();
3. });

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/plugins/ui/demos/ui.resizable.html

Part 2: Interaction Effect

2.1 Accordion fold menu

Required files:

Ui. accordion. js

Jquery. dimensions. js

Usage:

1. $ (Document). ready (function (){
2. $ ("# Example"). accordion ();
3. });

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:

JavaScript code

1. $ (Document). ready (function (){
2. $ ("# Example"). dialog ();
3. });

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:

1. $ (Document). ready (function (){
2. $ ("# Example"). slider ();
3. });

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:

JavaScript code

1. $ (Document). ready (function (){
2. $ ("# Example"). tablesorter ({sortList: [[0, 0], [2, 1], widgets: ['zebra ']});
3. });

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:

1. $ (Document). ready (function (){
2. $ ("# Example> ul"). tabs ();
3. });

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