案例:
<!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()——显示事件;