jQuery UI 实例 - 切换（Toggle）
jQuery UI 实例 - 切换（Toggle）
jQuery UI 是 jQuery 基础之上的一个可扩展的用户界面插件库，其中之一的功能是切换（Toggle），可以快速地使页面元素显示或隐藏。
引入 jQuery UI
通过以下代码链接 CSS 和 JavaScript 文件，在 HTML 文档中引入 jQuery UI：
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
toggle() 方法
toggle() 是 jQuery 中的一个方法，可以在多个状态之间切换。在 jQuery UI 中，toggle() 可以调用显示（show）和隐藏（hide）方法，实现快捷的显示和隐藏效果。
以下是一段示例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Toggle Demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.toggle-demo {
border: 2px solid #999;
padding: 10px;
margin-bottom: 10px;
}
</style>
<script>
$( function() {
$(".toggle-demo").click( function() {
$(this).toggle( "blind", 1000 );
});
});
</script>
</head>
<body>
<div class="toggle-demo">我是一个切换元素</div>
</body>
</html>
上述代码中，点击页面中的“我是一个切换元素”会显示或隐藏这个 div 元素，并以盲目式（blind）动画效果完成这个切换过程。在代码中，toggle() 方法第一个参数传递了动画效果名（可以是内置的或者限制渐变或滑动参照点的动画效果），第二个参数则是动画时间。
事件绑定
在上面的示例中，通过 click() 方法为元素绑定了“click”事件，但是我们还可以使用其他类型的事件。
例如，在以下示例中，我们使用 hover 事件来使一个按钮在鼠标悬停时切换图像：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Toggle Demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.toggle-demo {
width: 100px;
height: 100px;
background: url('button.png') no-repeat center center;
}
</style>
<script>
$( function() {
$(".toggle-demo").hover(
function() {
$(this).css("background-image", "url('button-hover.png')");
}, function() {
$(this).css("background-image", "url('button.png')");
}
);
});
</script>
</head>
<body>
<div class="toggle-demo"></div>
</body>
</html>
上述示例中的 toggle 功能是通过 jQuery 的 hover() 方法实现的。
小结
这份技术文档介绍了 jQuery UI 中的切换（Toggle）功能，包括通过 toggle() 方法实现动画效果和使用不同类型的事件绑定以及实例代码的演示。熟练掌握这些技巧可以使你快速开发各种 toggle 功能并丰富页面效果。