案例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link href="jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet">
<script src="jquery-ui-1.12.1/external/jquery/jquery.js">
</script>
<script src="jquery-ui-1.12.1/jquery-ui.js">
</script>
</head>
<style>
#mySliderDiv {
background-color: green;
width: 150px;
}
</style>
<body>
<div id="mySliderDiv">
</div>
</body>
<script>
$(
function() {
$("#mySliderDiv").progressbar(
{
value: 37
}
);
}
);
</script>
</html>
|
总结：
a)Interactions 交互：
Draggable+Droppable——拖放事件、
Resizeable——尺寸改变事件、
Selectable——选中事件、
Sortable——排序事件;
b)Widgets小部件：
Accordion——手风琴、
Autocomplete——自动补全、
Button——按钮、
DatePicker——日期控件、
Dialog——对话框、
Menu——菜单栏、
Progressbar——进度条、
Slider——拖动条、
Spinner——可上下增减输入框、
toolTip——提示框、
tabs——切换菜单栏;
c)Effects事件：
addClass()——添加类动画、
removeClass()——移除类动画、
toggleClass()——切换类动画、
blind()——百叶窗、
Color Animation——颜色动画、
hide()——隐藏事件、
show()——显示事件；
本文早期发布于个人 CSDN 博客：查看原文
