1. JQuery UI 概述
1.1 JQuery UI 主要分为三部分:
- 交互部件(interactions):是一些与鼠标交互相关的内容;
- 小部件(widgets): 主要是一些页面的扩展;
- 效果库(effects):用于提供丰富的动画效果;
2. 交互部件
// index.html
<head>
<script src="jquery-3.2.1.min.js"></script> //必须第一个被引入,因为 UI 依赖 jquery 库
<script src="jquery-ui.min.js"></script>
<script src="app.js"></script>
<link text="text/css" href="jquery-ui.min.css" rel="stylesheet"/>
</head>
<body>
<a href="#" id="btn">点击这里</a>
<div style="width:100px;height:100px;border:2px solid #FF0000" id="div1"></div>
<div style="width:300px;height:300px;border:2px solid #FF0000" id="div2"></div>
<ul id="st">
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>山竹</li>
</ul>
</body>
// app.js
$(document).ready(function(){
// 按钮效果
$("#btn").button();
// div 拖动效果
$("#div1").draggable();
// div 里面能放 div
$("#div2").droppable();
// div 尺寸可以任意改变
$("#div1").resizable();
// 可以对列表中的两个值通过鼠标拖动,互换位置
$("#st").sortable();
})3. 小部件
accordion():可折叠显示;autocoplete(): 自动补全;datepicker(): 日期选择;dialog():对话框;progressbar(): 进度条;menu():菜单;slider():可拖动进度条;spinner():下拉列表;tabs()
参考资料
- JQuery 入门视频
- JQuery UI dome