Jquery. tablesorter

I read an article todayArticleIs to introduce the Sorting Problem in JQ. It is used in a plug-in tablesorter. JS, more abundant words will also use jquery-latest.js and jquery. tablesorter. Pager. js.
The statement used is as follows:

JavaScript code Copy content to clipboard

1. $ (Document). Ready (Function(){
2. $ ("# Mytable"). Tablesorter ({sortlist: [[0, 0], [1, 0]});
3. }
4. )

I cannot quite understand it. I checked the sortlist parameter, but there was no result. Later, I found the answer under the guidance of a eldest brother:
The sorting list is [0, 0] [1, 0], in ascending order of the first and second columns, and [column index, sorting direction] 0 ASC (ascending) 1 DESC (descending ).
There are also some other parameters:

Part 1

The second column is not allowed. Sorting is performed for each three columns.

JavaScript code Copy content to clipboard

2. $ (Document). Ready (Function(){
4. $ ("Mytable"). Tablesorter ({
6. // Pass the headers argument and assing A Object
8. Headers :{
10. // Assign the secound column (we start counting zero)
12. 1 :{
14. // Disable it by setting the property sorter to false
16. Sorter:False},
18. // Assign the third column (we start counting zero)
20. 2 :{
22. // Disable it by setting the property sorter to false
24. Sorter:False}
26. }
28. });
30. });

Use th to be more like a button

JavaScript code Copy content to clipboard

1. $ (Document). Ready (Function(){
2. $ ("# Mytable"). Tablesorter (
3. {Cancelselection:True}
4. );
5. });

After a column is ordered, it cannot be moved. Other columns are sorted by this column.

JavaScript code Copy content to clipboard

1. $ (Document). Ready (Function(){
2. // Call the tablesorter plugin \
3. $ ("Mytable"). Tablesorter ({
4. // Set forced sort on the fourth column and I decending order.
5. Sortforce: [[0, 0]}
6. );
7. });

Button replacement

JavaScript code Copy content to clipboard

1. $ (Document). Ready (Function(){
2. // Call the tablesorter plugin
3. $ ("Table"). Tablesorter ({
4. // Change the multi sort key from the default shift to alt button
5. Sortmultisortkey:'Altkey'
6. });
7. });

By the way, we can find some other UI plug-ins:

Ui. draggable. Ext. js

Usage: After a file is loaded, you can drag the layer of class = "Block"

JavaScript code Copy content to clipboard

1. $ (Document). Ready (Function(){
2. $ (". Block"). draggable ();
3. });

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

Droppables:

Required file, drag drop

Ui. Mouse. js

Ui. draggable. js

Ui. draggable. Ext. js

Ui. droppable. js

Ui. droppable. Ext. js

Usage:

JavaScript code copy the content to the clipboard

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

Sortables sorting:

Required file

Jquery. dimensions. js

Ui. Mouse. js

Ui. draggable. js

Ui. droppable. js

Ui. sortable. js

Usage:

JavaScript code Copy content to clipboard

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

Select selectables:

Required file

Jquery. dimensions. js

Ui. Mouse. js

Ui. draggable. js

Ui. droppable. js

Ui. selectable. js

Usage:

JavaScript code Copy content to clipboard

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

Resizables:

Required file. In this example, several CSS files are required.

Jquery. dimensions. js

Ui. Mouse. js

Ui. resizable. js

Usage:

JavaScript code Copy content to clipboard

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

Part 2: Interaction Effect:

Accordion fold menu:

Required files:

Ui. Accordion. js

Jquery. dimensions. js

Usage:

JavaScript code Copy content to clipboard

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

Dialogs dialog box:

Required files:

Jquery. dimensions. js

Ui. Dialog. js

Ui. resizable. js

Ui. Mouse. js

Ui. draggable. js

Usage:

JavaScript code Copy content to clipboard

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

Scyclers slide:

Required file

Jquery. dimensions. js

Ui. Mouse. js

Ui. Slider. js

Usage:

JavaScript code Copy content to clipboard

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

Tablesorter table sorting:

Required file

Ui. tablesorter. js

Usage:

JavaScript code Copy content to clipboard

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

Tabs tab (not very good for IE support ):

Required file

Ui. Tabs. js

Usage:

JavaScript code Copy content to clipboard

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:

Shadow shadow

Http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html

Magnifier Amplification

Http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.magnifier.html