JQuery UI

jQuery UI: 基于jquery编写的一套UI组件库，专用于PC端浏览器。
jQuery Mobile: 基于jquery编写的一套UI组件库, 专门用于移动端浏览器的网页。

官网: jqueryui.com
下载: jQuery UI: 默认的色调是蓝色
希望获得自定义主题的UI库: 官网->Themes->Gallary
需要更细致的定制主题: Gallary->edit

强调: 因为jquery ui依赖于jquery，所以必须先引入jquery.js，再引入jquery ui.js。

jquery UI第一部分 Effects（动画效果）

addClass/removeClass/toggleClass() 默认没动画，现在有show/hide/toggle 扩展了动画效果

color animation: 实现颜色动画
jquery ui中的$(...).animate(): 支持颜色动画

jquery ui中的$(...).toggle(Effects,speed)
toggle的effects参数:
blind(遮蔽) bounce(弹跳) clip(缩短) drop(丢弃)explode(爆炸) fold(折叠)highlight(高亮) puff(膨胀)pulsate(心跳) shake(震动) size slide

Interactions:交互
1. 拖拽: $(...).draggable()

       问题: API会悄悄的为元素添加class->侵入性
       对于有侵入性API，不但要引入js，还要引入css

    2. 可选中: $(...).selectable();
       问题: 可自动向选中的li添加ui-selected类，但jquery ui并未定义该类的样式
       解决: 必须手动定义同名样式类ui-selected，定义选中项的样式
   3. 可排序: $(...).sortable();

总结:
jquery ui中的很多API具有侵入性， 通常都要引入jquery ui附带的css文件，有的还需要自己补充同名的样式类
要求:
对jquery ui不但要知道表面现象，更要知道Element中的变化原理。

jquery UI第二部分 Widget:（小部件） (小重点)

1. Accordion(手风琴部件)
   引入: jquery-ui.css
   HTML: 父元素>标题+内容div
   js:$(父元素).accordion();
2. AutoComplete(自动完成)
   何时: 避免重复输入,减少键入次数
   如何:
   html: input文本框
   js: 一个保存所有备选向的数组
   $(文本框).autocomplete({source:数组})
3. datepicker:（日期选择框）
   如何使用:
   html: input文本框
   js中: $(文本框).datepicker({dateFormat:'yyyy年mm月dd日'})
   vs h5中<input type="date"...
   h5有兼容性问题，且不能修改样式
4. dialog:对话框:
   为什么: BOM中的alert,confirm,prompt样式死板，无法定制
   何时: 今后，只要弹窗，都用dialog部件
   如何:
   html中:定义外层元素，包含提示信息，其中外层元素要定义title属性
   title属性会出现在对话框的左上角
   js: $("外层元素").dialog();
   强调: 不带参数的dialog(), 只负责将容器变成对话框，不控制显示与否

如何隐藏，再弹出:
配置对话框:

    $(...).dialog({
autoOpen:false,//默认隐藏
             buttons:[
               {text:"文本",click:function(){this->dialog}},//按钮
               ...
             ]
    });
 打开: $(...).dialog("open");
 关闭: $(...).dialog("close");

5. 按钮部件: $(button/input/a).button();

6. tabs: 标签页:
   如何:
   html: 父级div>标签页ul>li>a href="#id"
   内容页div#id
   说明: li>a的href中的#id是为了匹配div的#id
   js: $(父元素).tabs();

7. tooltip: 工具提示
   为什么: 普通的title属性，浏览器之前有不一致
   何时: 只要希望所有浏览器统一title提示的样式时
   如何: tooltip，必须应用到document上