开始之前，请下载好两个文件jquery-ui-1.11.4.custom和jquery-ui-themes-1.11.4
1、引入正确的CSS库文件和JS文件，如引入文件夹jquery-ui-1.11.4.custom下的jquery-ui.css和jquery-ui.js文件，此外还要引入jQuery的核心文件jquery.js。
（注意要先引入jQuery库文件，再引入jQuery UI库文件，否则不会出现效果）
2、书写调用UI组件的代码(以选项卡面板为例)：
<script type="text/javascript">
$(function(){
$("#tabs").tabs();
});
</script>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">选项卡1</a></li>
<li><a href="#tabs-2">选项卡2</a></li>
<li><a href="#tabs-3">选项卡3</a></li>
</ul>
<div id="tabs-1">
<p>选项卡1 测试内容1 </p>
</div>
<div id="tabs-2">
<p>选项卡2 测试内容2 </p>
</div>
<div id="tabs-3">
<p>选项卡3 测试内容3 </p>
</div>
</div>
</body>
3、效果如下：(图1)
4、文件夹jquery-ui-1.11.4.custom下还有jquery-ui.structure.css和jquery-ui.theme.css，若将上述的jquery-ui.css替换掉，则分别有以下效果：实际上jquery-ui.cs包含了jquery-ui.structure.css和jquery-ui.theme.css这两个文件
5、若不喜欢图1的颜色，可从文件夹jquery-ui-themes-1.11.4下的themes文件夹中任选一个你喜欢的颜色，将其中的jquery-ui.css文件复制到项目中替换以前的jquery-ui.css即可
6、若不喜欢jquery-ui-themes-1.11.4下的themes文件夹中所有主题，还可以自定义样式，步骤如下：
1、进入官网http://jqueryui.com/themeroller/，选中选项卡Roll Your Own
2、第二步下面有很多可以设置的选项，设置完毕后到第三步下载所设置的主题即可
439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
