jQuery UI是jQuery的一个插件集，为jQuery的核心库添加了新的功能。
jQUery UI库可以从http://jquery.com下载。
下载一个ZIP文件jquery-ui-1.9.2.custom.zip，它包含了jQuery UI的源代码、示例及文档。
解压后的目录jquery-ui-1.9.2.custom中包含4部分内容：
一个css子目录，包含与jQuery UI相关的CSS文件；
一个js目录，包含jQuery UI的JavaScript文件；
一个development-bundle子目录；
一个index.html文件。
示例：
1.新建一个Web工程JQueryUIDemo。
2.将上面的css文件夹和js文件夹复制到IntelliJ的Web目录下（或者eclipse的WebContent目录）。
3.新建index.jsp页面，在<head></head>中导入以下3个文件。
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.9.2.custom.css"/> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
4.index.jsp的代码：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Accordion</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.9.2.custom.css"/>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tab1">Tab1</a> </li>
<li><a href="#tab2">Tab2</a> </li>
</ul>
<div id="tab1">Contents of first tab</div>
<div id="tab2">Contents of the second tab</div>
</div>
</body>
</html>
5.将工程部署到tomcat上，运行结果为
jQuery UI 组件之---选项卡（标签）tab
要使用jQuery UI创建这种类型的页面，需要以下内容：
一个包含整个选项卡的<div>块；
一个构成选项卡栏的<ul>元素；
每个选项卡对应的一个<li>元素；
每个选项卡的窗口对应的一个<div>元素。
此外，还必须使用jQuery UI的tabs()方法。
示例如上。