jQuery UI

Posted 2020-10-05 胡卓

1、jQuery UI:
是以jQuery为基础的javascript网页用户界面的开源库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。
2、jQuery UI :
包含了许多维持状态的小部件（Widget），因此，他与定性的jQuery插件使用模式略有不同。所有的jQuery UI 小部件（Widget）使用相同的模式，所以，只要学会使用其中一个，就知道如何使用其他小部件（Widget）。
3、jQuery UI：
IE 6.0+ , Firefox 3+ , safari 3.1+ , Opera 9.6+ , 和 Google Chrome 。

4、jQuery UI 主要分三个部分：交互、小部件和效果库。
a): 交互 Interactions
交互部件是一些与鼠标交互相关的内容，包括Draggable，Droppable，Resizable，Selectable和Sortable等。
draggable : 给目标元素.draggable() 就能使其可以随意拖动
droppable : 给目标元素.droppable() 代表能够放置，此时就可以绑定一个drop事件
当触发事件时调用后面的方法，方法有两个参数，第一个是event 第二个是ui
resizable : 给目标元素.resizable() 就能使其可以随意调整大小
selectable : 给ul添加一个.selectable() 那么当选中其中一个li时 这个li就会获得一个class ui-selected.
sortable : 给ul添加一个.sortable() 就可以拖动其中的li来更换位置
b):小部件 Widgets
主要是一些界面的扩展，包括AutoComplete，ColorPicker，Dialog，Slider，Tabs，ProgressBar，Spinner等
accordion : 给目标div.accordion() 就能使其中呈现手风琴样式 <h3> <p> 当选中一个h3时 它下面的P就呈现出来，其他的就关闭
autocomplete : 自动补全 使用方法 .autocomplete({source:数据源})注意source后面不能加分号
datepicker : .datepicker() 可以选择日期
button : .button() 让目标a标签呈现按钮的样子
dialog ：.dialog() 弹出一个对话框
progressbar : .progressbar() 进度条，可以设置value max
menu : 菜单
slider : 拖动进度条 change 和slide change是在拖动完之后显示 slide边拖动边显示变化
spinner ：.spinner() 在input 输入框后面加入一个加减的按钮，按上边是把输入框中的值加一，按下边是把输入框中的值减一，还可以设置输入框中的处置 通过value
tab : .tab() 给一个div设置tab后 里面ul 下的三个li的a的href分别对应的三个div都会放到同一个地方重叠着当点击选中那个li时对应的那个div显示出来其他两个隐藏
c):效果
用于提供丰富的动画效果，包括 ：Add Class 、 Color Animation 、 Toggle等