jquery Plugin Learning jquery UI

JQuery ui:http://jqueryui.com/

JQuery UI Introduction:

The jquery UI is an open source JavaScript Web user interface code base based on jquery. Visual controls that contain underlying user interaction, animations, effects, and replaceable themes. We can use it directly to build Web applications that have a good interactive nature. All plug-in tests can be compatible with IE 6.0+, Firefox, Safari 3.1+, Opera 9.6+, and Google Chrome.

Component composition
The JQuery UI is divided into 3 main parts: Interaction, widgets, and effects libraries.
Interaction
Interactive widgets are some of the things that are related to mouse interaction, including draggable,droppable,resizable,selectable and sortable.
Micro-Parts
is mainly the expansion of some interfaces, including Accordion,autocomplete,colorpicker,dialog,slider,tabs,datepicker,magnifier,progressbar,spinner, etc., The new version of the UI will contain more widgets.
Effect Library
Used to provide a rich animation effect so that animations are no longer limited to the animate () method of jquery.
Edit this paragraph other
The jquery UI is actually a jquery plugin that specifically refers to the plug-in UI direction that is officially maintained by jquery
The main differences between jquery UI and jquery are:
(1) jquery is a JS library, the main features are selectors, property modification and event binding and so on.
(2) jquery UI is based on jquery, using the extensibility of jquery, the design of plug-ins. Some common interface elements are provided, such as dialog box, drag behavior, change size behavior, and so on.
(3) jquery itself is focused on the background, there is no beautiful interface, and the jquery UI complements the former shortcomings, he provides a gorgeous display interface, making it easier to accept. There are both powerful backstage and gorgeous front desk.

jQueryUI tab

1 Properties
1.11 Ajaxoptions, add an AJAX option when the tab loads content. The AJAX options that are added work only when Ajax is available. The default value is null. In the above example, the Beforesend and success two options are added. Ajax also has some options, please refer to jquery ajax, here do not do a detailed ...
1.12 Initialization Setup Example: Note that $ ('. Selector ') is the class name of the tabs, in this case. selector= #tabs, no longer explained.
$ ('. Selector '). Tabs ({ajaxoptions: {async:false}});//Here is the asynchronous change to synchronous.
1.13 parameter acquisition and setting after initialization: Please note: getter for GET, pronunciation: Geithner, setter for setting, pronunciation: Seth, no longer explained.
Getter
var ajaxoptions = $ ('. Selector '). Tabs (' option ', ' ajaxoptions ');
Setter
$ ('. Selector '). Tabs (' option ', ' ajaxoptions ', {async:false});

1.21 CacheThe default is False, no cache. This option is used for AJAX calls, which simply say no cache, that is, every time the sending request is refreshed, there is a cache is the first time the request is refreshed, not refreshed later, close the page is another matter. Ajaxoptions:{cache:false} should be the same as this function.
1.22 Initialization Setup Example:
$ ('. Selector '). Tabs ({cache:true});
2.23 parameter acquisition and setting after initialization:
Getter
var cache = $ ('. Selector '). Tabs (' option ', ' cache ');
Setter
$ ('. Selector '). Tabs (' option ', ' cache ', true);

1.31collapsible, which means collapsible, the default option is false and cannot be collapsed. If set to True, allows the user to collapse the contents of the selected tab. Let's say: Click on tab 2, tab 2 content is displayed, this time again click on tab 2, the content area of the tab is closed, click on tab 2 again, the content area of the tab expands again. Do you understand? Know you do not understand, do not understand to use the top example to try it.
1.32 Initialization Setup Example:
$ ('. Selector '). Tabs ({collapsible:true});
1.33 parameter acquisition and setting after initialization: Please refer to 1.23 ...

1.41 CookiesThe default value is NULL, which requires a cookie plugin. Save the last selected tab to the cookie. Examples of available options: (example): {expires:7, path: '/', Domain: ' jquery.com ', secure:true}.
1.42 Initialization Settings Example: $ ('. Selector '). Tabs ({cookie: {expires:30}});
1.43 parameter acquisition and setting after initialization: Please refer to 1.23 ...

1.51deselectableThe default is false, which acts as if it were collapsible.

1.61 DisabledSets which tabs are not available, is an array example [0,1,2], which is the first, second, Third tab. The default is [].
1.62 Initialization Settings Example: $ ('. Selector '). Tabs ({disabled: [1, 2]});
1.63 parameter acquisition and setting after initialization: Please refer to 1.23 ...

1.71 Event, Toggle tab events, default to ' click ', click on Toggle tab.
1.72 Initialization Settings Example: $ ('. Selector '). Tabs ({event: ' mouseover '}); Slide the mouse over the Toggle tab
1.73 parameter acquisition and setting after initialization: Please refer to 1.23 ...

1.81 FX, the animation effect when switching tabs, the default is: null, no animation effect,
1.82 initialization settings: Refer to the top example.
1.83 parameter acquisition and setting after initialization: Please refer to 1.23 ...

1.91 Idprefix, when using Ajax, the Idprefix option can add a unique ID to it, and the default is: ' ui-tabs-'.
1.92 Initialization Settings Example: $ ('. Selector '). Tabs ({idprefix: ' ui-tabs-primary '});
1.93 parameter acquisition and setting after initialization: Please refer to 1.23 ...

1.101 selected, which tab is selected when initializing, the default is 0, and the first tab is selected.
1.102 Initialization Settings Example: $ ('. Selector '). Tabs ({selected:3});
1.103 parameter acquisition and setting after initialization: Please refer to 1.23 ...

1.111 Spinner, when the remote content is loaded, the HTML content of the spinner string is displayed on the header of the tab. (I'm surprised, I tried it myself, why didn't it work?) ）
1.112 Initialization Settings Example: $ ('. Selector '). Tabs ({spinner: ' Retrieving Data ... '});
1.113 parameter acquisition and setting after initialization: Please refer to 1.23 ...

1.121 paneltemplate,

1.131 tabtemplate,

2 Events
First give an example of event binding, please note:
$ (' #example '). Bind (' Tabsselect ', function (event, UI) {
Ui.tabSelected tab Element (after click)
Ui.panelThis element contains the contents of the tab that is selected (clicked)
Ui.indexReturns the index value of a selected (or clicked) tab (starting at 0)
});

2.11 Select Type: Tabsselect, this event is triggered when a tab is clicked.
2.12 Binding event when initializing:
$ ('. Selector '). Tabs ({
Select:function (event, UI) {...}
});
2.13 Use event binding to bind the event after initialization:
$ ('. Selector '). Bind (' Tabsselect ', function (event, UI) {
...
});

2.21 load, type: Tabsload This event is triggered when the content of a remote (AJAX) tab is loaded.
2.22 Reference 2.12
2.23 Reference 2.13
2.31 Show, type: Tabsshow The event is triggered after the tab is selected.
2.41 Add, type: Tabsadd, triggers when a tab is added.
2.51 Remove, type Tabsremove, when a tab is deleted and then triggered.
2.61 Enable, type tabsenable, triggers when a tab is available.
2.71 Disable, type tabsdisable, triggered when a tab is not available.

3 Methods
3.11 Destroy, Haha, again to my favorite time to destroy the Earth. Example:. Tabs (' Destroy ')
3.21 Disable, the entire tab is not available.
3.31 enable, the entire tab is available: tabs (' Enable ')
3.41 option, set properties. Example:. Tabs (' option ', Optionname,[Value])
3.51 Add,remove, add, Delete tab. Example:. Tabs (' Add ', URL, label,[Index]),. Tabs (' Remove ', index)
3.61 enable to set a tab label to be available. Example:. Tabs (' Enable ', index)
3.71 Disable, setting a tab tab is not available. Example:. Tabs (' Disable ', index)
3.81 Select, choose a tab label. Example:. Tabs (' select ', index), index starting from 0.
3.91 load, overloading the contents of an AJAX tab, which always loads remote content, even if the cache is set to True, the second parameter is the index value of the tab to reload. Example:. Tabs (' Load ', index)
3.101 URL, when an AJAX tab will be loaded, change the URL: tabs (' url ', index, URL)
3.111 Abort, abort all AJAX requests or animations running on the Tab tab: Tabs (' abort ')
3.121 Rotate, auto Roll tab Label: tabs (' rotate ', ms,[countinue]), the second parameter is millisecond, is the time required for auto-tumbling of two tabs, set to 0 or null to stop tumbling. The third parameter is whether to continue tumbling after the user selects a tab label, the default is: False, does not continue.
I'm tired, let's rest and say ...
4 Tips
4.1 How do I receive the index value of a selected tab label?
Example: var $tabs = $ (' #example '). tabs ();
var selected = $tabs. Tabs (' option ', ' selected '); = 0
4.2 How do I switch tabs with one other element instead of a tab click event?
Example: var $tabs = $ (' #example '). tabs (); The first tab is selected
$ (' #my-text-link '). Click (function () {//Bind the order-click event
$tabs. Tabs (' select ', 2); Switch to a third tab label
return false;
});
4.3 How do I immediately select the tab tag I just added?
Example: var $tabs = $ (' #example '). Tabs ({
Add:function (event, UI) {
$tabs. Tabs (' select ', ' # ' + ui.panel.id);
}
});
4.4 How do I open a tab label in a new window?
Example: $ (' #example '). Tabs ({
Select:function (event, UI) {
Location.href = $.data (ui.tab, ' load.tabs ');
return false;
}
});

JQuery UI Dialog

1 Properties

1.11 AutoOpen, this property is true when dialog is invoked automatically when the dialog window is opened. When the property is False, a window is initially hidden and the dialog window appears when you know the. dialog ("Open"). The default is: TRUE.

1.12 Initialization Example: Note that $ ('. Selector ') is the class name of the dialog, in this case. selector= #dialoag, no longer explained.

$ ('. Selector '). dialog ({autoopen:false});

1.13 After initialization, get and set this attribute example:

Get

var AutoOpen = $ ('. Selector '). dialog (' option ', ' AutoOpen ');

Set up

$ ('. Selector '). dialog (' option ', ' AutoOpen ', false);

1.21 bgiframe default is False, when True, the Bgiframe plugin would be is used, to fix the issue in IE6 where select boxes Show on to P of other elements, regardless of zIndex. Requires including the Bgiframe plugin. Future versions require a separate plugin.

Under IE6, let the rear grey screen cover the Select.

1.22 Initialization Example:

$ ('. Selector '). dialog ({bgiframe:true});

1.23 after initialization, get and set:

Get

var bgiframe = $ ('. Selector '). dialog (' option ', ' bgiframe ');

Set up

$ ('. Selector '). dialog (' option ', ' Bgiframe ', true);

1.31 buttons displays a button and writes the text of the button, setting the button click function. The default is {}, there is no button.

The above example already has the use of the buttons attribute, please note.

1.32 Initialization Example:

$ ('. Selector '). Dialog ({buttons: {"OK": function () {$ (this). dialog ("Close");}});

1.33 after initialization, get and set:

Get

var buttons = $ ('. Selector '). dialog (' option ', ' buttons ');

Set up

$ ('. Selector '). dialog (' option ', ' buttons ', {"OK": function () {$ (this). dialog ("Close");});

1.41 Closeonescape is true, click on the keyboard ESC to close dialog, the default is true;

1.42 Initialization Example:

$ ('. Selector '). dialog ({closeonescape:false});

1.43 after initialization, get and set:

Get

var closeonescape = $ ('. Selector '). dialog (' option ', ' closeonescape ');

Set up

$ ('. Selector '). dialog (' option ', ' Closeonescape ', false);

1.51 Dialogclass type will be added to dialog, default is empty

1.52 Initialization Example:

$ ('. Selector '). Dialog ({dialogclass: ' alert '});

1.53 after initialization, get and set:

Get

var Dialogclass = $ ('. Selector '). dialog (' option ', ' dialogclass ');

Set up

$ ('. Selector '). dialog (' option ', ' Dialogclass ', ' alert ');

1.61 draggable, resizable:draggable Whether you can use the header to drag, the default is true, you can drag, resizable can change the size of dialog, by default, True, you can change the size.

1.62 Initialization Example:

$ ('. Selector '). dialog ({draggable:false,resizable:false});

1.63 after initialization, get and set:

Get

var draggable = $ ('. Selector '). dialog (' option ', ' draggable ');

Set up

$ ('. Selector '). dialog (' option ', ' draggable ', false);

1.71 width, height, dialog width and height, default to auto, Auto.

1.72 Initialization Example:

$ ('. Selector '). dialog ({height:530,width:200});

1.73 after initialization, get and set: Please refer to 1.63

1.81 maxWidth, MaxHeight, MinWidth, MinHeight, dialog can change the maximum width, maximum height, minimum width, minimum height. MaxWidth, maxheight The default is False, is unlimited. The default for MinWidth, MinHeight is 150. Ui.resizable.js support is required to use these properties.

1.82 Initialization Example:

$ ('. Selector '). dialog ({maxheight:400,maxwidth:600,minheight:300,minwidth:300});

1.83 after initialization, get and set: Please refer to 1.63

1.91 hide, Show, when dialog is turned off and turned on when the effect. Default is NULL, no effect

1.92 Initialization example: used in the top instance, please see for yourself.

1.93 after initialization, get and set: Please refer to 1.63

1.101 modal, whether the modal window is used, when the modal window is opened, the other elements of the page will not be clicked until the modal window is closed. The default is False is not a modal window.

1.102 Initialization Example: $ ('. Selector '). dialog ({modal:true});

1.103 after initialization, get and set: Please refer to 1.63

1.111 the title text of the Title,dialog, which is empty by default.

1.112 Initialization example: see the top instance. 1.113 after initialization, get and set: Please refer to 1.63

1.121 position, dialog display position: Can be ' center ', ' left ', ' right ', ' top ', ' bottom ', or the offset of top and left can also be an array of strings such as [' Right ', ' top ‘]。

1.122 Initialization Example: $ ('. Selector '). dialog ({position: [' top ', ' Right ']}); 1.123 after initialization, get and set: Please refer to 1.63

1.131 ZIndex, dialog, the ZIndex value, the default value is 1000.

1.132 Initialization Example: $ ('. Selector '). dialog ({zindex:3999}); 1.133 after initialization, get and set: Please refer to 1.63

1.141 stack The default value is true when dialog gets the focus, dialog will be on top.

1.142 Initialization Example: $ ('. Selector '). dialog ({stack:false}); 1.143 after initialization, get and set: Please refer to 1.63

2 Events

2.11 BeforeClose Type Dialogbeforeclose, this event will be triggered when Dialog tries to close, and if False is returned, the shutdown will be blocked.

2.12 Initialization Example: $ ('. Selector '). Dialog ({

Beforeclose:function (event, UI) {...}

});

2.13 Use type binding for this event Example: $ ('. Selector '). Bind (' Dialogbeforeclose ', function (event, UI) {

...

});

2.21 Close type: dialogclose, which triggers this event when dialog is closed.

2.22 Initialization Example: $ ('. Selector '). Dialog ({

Close:function (event, UI) {...}

});

2.23 use type binding for this event Example: $ ('. Selector '). Bind (' Dialogclose ', function (event, UI) {

...

});

2.3 Open Type: Dialogopen, triggered when dialog is turned on. (Space is limited, the omitted is omitted, the initialization examples and the use of type binding events can be referenced up.) ）

2.4 Focus Type: Dialogfocus, triggered when dialog gets focus.

2.5 DragStart Type: DragStart, triggered when the dialog drag is started.

2.6 Drag Type: Drag, triggered when dialog is dragged.

2.7 DragStop Type: dragstop, triggered when the dialog drag is complete.

2.8 Resizestart Type: Resizestart, triggered when dialog starts to change the size of the form.

2.9 Resize Type: Resize, triggered when dialog is changed in size.

2.10 resizestop Type: resizestop, triggered when the size of the change is complete.

3 methods

3.1 Destroy, I like this Oh, destroy the earth ... Example:. dialog (' Destroy ')

3.2 Disable,dialog Not available, example:. dialog (' Disable ');

3.3 Enable,dialog available, examples, such as 3.2

3.4 Close,open, Close, open dialog

3.5 option, set and get the dialog property, for example:. dialog (' option ', Optionname, [value]), if there is no value, will be obtained.

3.6 IsOpen, if dialog is turned on, returns True, for example:. dialog (' IsOpen ')

3.7 movetotop, move dialog to the top, for example:. dialog (' Movetotop ')

JQuery UI accordion

1 Options:
1.1 ActiveThis parameter is set to the default option, which by default is 0, which is the first one. Ha ha.
Initialization Settings Example: $ (' #accordion '). Accordion ({active:2});
Examples of getting and setting after initialization:
Gets the var active = $ (' #accordion '). Accordion (' option ', ' active '); Set $ (' #accordion '). Accordion (' option ', ' active ', 2);
1.2 AnimatedThis parameter is the Set animation effect default option is ' Slide '
You can set your favorite animation effects, or do not use animation effects (set to False), in addition to the default settings, using ' bounceslide ' and ' easeslide ' requires UI Effects Core ... Hey...
Initialization Settings Example: $ (' #accordion '). Accordion ({animated: ' Easeslide '});
Examples of getting and setting after initialization:
Get
var animated = $ (' #accordion '). Accordion (' option ', ' animated ');
Set up
$ (' #accordion '). Accordion (' option ', ' animated ', ' Easeslide ');
1.3 AutoheightThe default is true, if set, the height of all content parts is set to the high of the highest content. 初始化设置：$(‘#accordion‘).accordion({ autoHeight: false })；
初始化以后的获取或设置
Get
var autoheight = $ (' #accordion '). Accordion (' option ', ' autoheight ');
Set up
$ (' #accordion '). Accordion (' option ', ' Autoheight ', false);
1.4 ClearstyleThe default is false, seems to be clear style, haha ~ ~ ~
Initialize set $ (' #accordion '). Accordion ({clearstyle:true});
After initialization, get and set the same as above ... Omitted...
1.5 EventThe default is ' click ' to expand Options. You can set long double-clicks, mouse-over, etc...
Initialization Settings Example: $ (' #accordion '). Accordion (event: "MouseOver");
After the initialization of the settings please refer to the above, omitted here ...
1.6 Fillspace, which is full of the parent element's height, the default is False, and autoheight is not valid with this entry.
Initialization Settings Example: $ (' #accordion '). Accordion ({fillspace:true});
After the initialization of the acquisition and settings, please refer to the above, omitted here ...
1.7 Header, set the header element (see above instance), the default value is: ' > li >:first-child,>: Not (LI): even '
Omitted here, self-understanding ...
1.8 Icon, set the small icon, the default value is: {' header ': ' Ui-icon-triangle-1-e ', ' headerselected ': ' Ui-icon-triangle-1-s '}
In addition, please look at the following English word ~ ~ ~ Imaginative Achievement here inexpressible ...
Icons to use for headers. Icons May is specified for ' headers ' and ' headerselected ', and we recommend using the Icons native to the jQuery UI CSS Fra Mework manipulated Byjquery UI Themeroller

Initialization Settings Example: $ (' #accordion '). Accordion ({icons: {' header ': ' Ui-icon-plus ', ' headerselected ': ' Ui-icon-minus '}});
Initialization after getting and setting omitted ...
1.9 Navigation and NavigationfilterFor the time being do not know what is to do with, go back to say it ...

2 Events
2.1 ChangeEvents triggered when the event accordion changed, there are two binding methods
The first type:
$ (' #accordion '). Bind (' Accordionchange ', function (event, UI) {
Ui.newheader//JQuery object, activating header
Ui.oldheader//JQuery object, previous header
Ui.newcontent//JQuery object, activating content
Ui.oldcontent//JQuery object, previous content
}); This method is already in the previous example
The second type:
$ (' #accordion '). Accordion ({
Change:function (event, UI) {...}
}); Let's see it clearly. Ha ha.

3 Methods
3.1 Destroy: Destroying the Earth ...
How to use:. Accordion (' Destroy ')
3.2 Disable: The accordion is not available to invalidate it.
How to use:. Accordion (' Disable ')
3.3 Enable: Available, make it effective, how to use: slightly ...
3.4 Option: parameters, how to use: The previous has been used, for example:. Accordion (' option ', Optionname,[value])
3.5 Activate: The default option is also set, as is the parameter active action. Example:. Accordion (' activate ', index)

jquery Plugin Learning jquery UI