Jquery UI Entry Manual

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.