开始之前,请下载好两个文件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、第二步下面有很多可以设置的选项,设置完毕后到第三步下载所设置的主题即可