概要：
学习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无效.