10，常用UI

概要：

学习UI的应用。

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

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

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

内容：

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

弹出层包括：

弹出层

弹出层内容

初始化弹出内容

弹出层方法

取消自身冒泡

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无效.