10，常用UI

概要：

       学习UI的应用。

静态弹出层，动态弹出层（弹出内容动态），遮罩弹出层。

       Tabs标签，不刷新页面，在不同标签间切换。

       手风琴菜单，实现菜单伸缩。

内容：

官方首页:
http://jqueryui.org/

下载:
http://jqueryui.com/download

示例和文档:
http://jqueryui.com/demos/

皮 肤:
http://jqueryui.com/themeroller/

弹出层包括：

       弹出层

       弹出层内容

       初始化弹出内容

       弹出层方法

       取消自身冒泡

       Document单击隐藏其他

弹出层方法的注意点：

1， 停止其他元素行为

$("*").stop();

2， 计算弹出层位置

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

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

3， 取消冒泡和浏览器默认行为

        event.stopPropagation();

4， 设置动画效果与取消

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

              //$("#sDtDiv").dialog("option", "position", [left,top]);

              //$("#sDtDiv").dialog("open");

 

 

Tabs标签：

       不同组的标签

       绑定的方法

              1,默认Tabs

                     .tabs()

              2,可折叠的Tabs   

                     .Tabs({collapsible:true})

              3,鼠标滑动即切换的Tabs

                     .Tabs(event:”mouseover”)

 

 

手风琴菜单：

        //默认配置的Accordion菜单

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

            //取消自动高度, 可折叠

            $("#accordion2").accordion({

                autoHeight:false,

                collapsible: true

            });

            //鼠标滑动触发, 自定义图标

            $("#accordion3").accordion({

                icons: {

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

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

                        },

                event: "mouseover"

            });

 

注意高度：控件的容器高度设计过小时，可能被覆盖

 

部分关键属性：

    autoHeight: 设置是否自动将内容高度设置为容器高度.

collapsible: 设置是否可折叠

一般上面两个配合使用,  以为折叠后肯定会改变菜单高度, 会导致autoHeight设置为true无效.