10. Common UI

Summary:

Learn the UI application.

Static pop-up layer, dynamic pop-up layer (Dynamic pop-up content), and mask pop-up layer.

Tabs labels. If you do not click New pages, switch between different labels.

The accordion menu enables menu scaling.

Content:

Official homepage:
Http://jqueryui.org/

Download:
Http://jqueryui.com/download

Examples and documents:
Http://jqueryui.com/demos/

Skin:
Http://jqueryui.com/themeroller/

The pop-up layer includes:

Pop-up layer

Pop-up layer content

Initialize pop-up content

Pop-up Layer Method

Cancel bubble

Document click to hide other

Note:

1. Stop other elements.

$ ("*"). Stop ();

2. Calculate the position of the pop-up layer

        var top = $(event.target).offset().top;

        var left = $(event.target).offset().left;

3. Cancel bubble and default browser behavior

        event.stopPropagation();

4. Set the animation effect and cancel it.

        $('.selector').dialog({ show: 'slide' });

// $ ("# Sdtdiv"). Dialog ("option", "position", [left, top]);

// $ ("# Sdtdiv"). Dialog ("open ");

 

 

Tabs label:

Tags OF DIFFERENT GROUPS

Binding method

1. The default value is tabs.

. Tabs ()

2. Foldable tabs

. Tabs ({collapsible: true })

3. Move the mouse to the switched tabs.

. Tabs (Event: "Mouseover ")

 

 

Accordion menu:

// Default accordion menu

            $("#accordion1").accordion();

// Cancel Automatic Height, foldable

            $("#accordion2").accordion({

                autoHeight:false,

                collapsible: true

            });

// Trigger by mouse sliding, custom icon

            $("#accordion3").accordion({

                icons: {

                            header: "ui-icon-circle-arrow-e",

                               headerSelected: "ui-icon-circle-arrow-s"

                        },

                event: "mouseover"

            });

 

Note Height: The container height of the control may be overwritten after an hour.

 

Some key attributes:

Autoheight: determines whether to automatically set the content height to the container height.

Collapsible: Set whether to fold

Generally, the above two functions are used in combination, so that the menu height will be changed after the folding, And the autoheight setting to true will be invalid.