（1）下载jQuery UI 组件库
将下载好的jquery-ui-1.12.1.zip进行解压，这是我用的最新的版本。
（2）把相关文件复制到项目中
打开解压好的文件夹，把jquery-ui.css 复制到自己项目的css文件夹下面，把jQuery-ui.js复制到自己项目的js文件夹下面。
（3）调用相关文件
在自己的html文件中，需要引入jquery-ui.css 和 jQuery-ui.js，当然还要有jQuery.js。
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/jquery-ui.css" />
</head>
<script type="text/javascript" src="js/jQuery3.5.1.js" ></script>
<script type="text/javascript" src="js/jquery-ui.js" ></script>
（4）找到自己心怡的组件
使用浏览器打开里面的index.html，找到心怡的组件之后，然后查看网页源代码。
（5）复制组件源代码
查看网页源代码，然后使用ctrl+f，开始搜索组件名，找到组件的html部分进行复制。粘贴到自己的html文件中。
例如：
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<h3>First</h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
<h3>Second</h3>
<div>Phasellus mattis tincidunt nibh.</div>
<h3>Third</h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
（6）调用组件的对应方法
查看网页源代码，在上一次使用ctrl+f查询到的结果，在找下一个，便是该组件的调用方法。调用后，便可生效。
例如：$( "#accordion" ).accordion();
<script>
$(function(){
$( "#accordion" ).accordion();
})
</script>
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/jquery-ui.css" />
</head>
<body>
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<h3>First</h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
<h3>Second</h3>
<div>Phasellus mattis tincidunt nibh.</div>
<h3>Third</h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/jQuery3.5.1.js" ></script>
<script type="text/javascript" src="js/jquery-ui.js" ></script>
<script>
$(function(){
$( "#accordion" ).accordion();
$( "#tabs" ).tabs();
})
</script>
网友评论