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 功能并丰富页面效果。