概述
jQuery UI 进度条(progressbar
)组件是一个可用于指示进度变化的 UI 元素。在进度条发生改变时,可以使用进度条的 change
事件来做出响应。
用法
监听change
事件
使用 on
方法监听进度条的 change
事件,传入回调函数,该函数会在进度条每次发生改变时触发。
$( "#progressbar" ).progressbar({
// 设置进度条的初始值
value: 25,
change: function( event, ui ) {
// 当进度条的值改变时,触发该函数
console.log( "进度条的值改变了,当前值为:", ui.value );
}
});
上面的代码中,我们对进度条添加了 value
属性,并在初始化时将值设为 25
。然后,我们使用 change
事件监听器来监控进度条的变化,当进度条数值发生变化时,会触发回调函数。回调函数中,我们使用 console.log
语句输出进度条当前的值。
修改change
处理函数
我们也可以通过 off
方法去掉进度条的默认的 change
处理函数,然后再用 on
方法绑定自己的处理函数。
$( "#progressbar" ).progressbar({
value: 25,
change: function() {
console.log( "ProgressBar 发生了改变!" );
}
}).off( "progressbarchange" )
.on( "progressbarchange", function() {
console.log( "进度条改变了" );
});
上述代码中,我们首先定义了一个默认的 change
处理函数,然后通过调用 off
方法来去掉这个默认处理函数,接着调用 on
方法添加自己的处理函数。
示例
示例一 — 实时显示进度百分比
该示例展示如何使用 change
事件来实时显示进度条的进度百分比。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
<meta charset="utf-8">
<title>jQuery UI 进度条示例</title>
<style>
#progressbar {
position: relative;
width: 80%;
margin: 20px auto;
}
#progress-label {
position: absolute;
left: 50%;
top: 50%;
font-size: 20px;
font-family: "微软雅黑";
margin-left: -50px;
margin-top: -20px;
text-align: center;
}
</style>
</head>
<body>
<div id="progressbar"></div>
<div id="progress-label">0%</div>
<script>
$( function() {
// 获取进度条元素
var progressbar = $( "#progressbar" );
// 初始化进度条并设置最大值为 100
progressbar.progressbar({
max: 100,
value: 0, // 初始值为 0
// 注册 change 事件
change: function( event, ui ) {
// 获取当前进度 (仍然是 0~100)
var currentProgress = progressbar.progressbar( "value" );
// 显示当前进度的百分比
$( "#progress-label" ).text( currentProgress + "%" );
}
});
// 模拟进度条动态变化 (1 秒内达到 100%)
var progressBarValue = 0;
var intervalId = setInterval( function() {
progressBarValue++;
progressbar.progressbar( "value", progressBarValue );
if ( progressBarValue === 100 ) {
clearInterval( intervalId );
}
}, 10 );
});
</script>
</body>
</html>
示例二 — 匹配品牌广告
该示例展示如何使用 change
事件来匹配品牌广告。在这个示例中,假设一个公司在制作广告并将其输出到网络页面上。当进度条到达某个特定的值时,我们将显示一个与品牌相匹配的广告。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
<meta charset="utf-8">
<title>jQuery UI 进度条示例</title>
<style>
#progressbar {
position: relative;
width: 80%;
margin: 20px auto;
}
#output {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
backgroud-color: #EEE;
border: 2px solid black;
border-radius: 50%;
top: 75px;
}
</style>
</head>
<body>
<div id="progressbar"></div>
<div id="output"></div>
<script>
$( function() {
// 获取进度条元素
var progressbar = $( "#progressbar" );
// 初始化进度条并设置最大值为 100
progressbar.progressbar({
max: 100,
value: 0, // 初始值为 0
// 注册 change 事件
change: function( event, ui ) {
// 判断总进度(0~100)是否达到阈值
if ( progressbar.progressbar( "value" ) >= 60 ) {
// 如果达到阈值,则更换输出结果
$( "#output" ).css( "background-color", "red" );
$( "#output" ).text( "匹配的品牌广告" );
} else {
// 否则,恢复默认输出结果
$( "#output" ).css( "background-color", "#EEE" );
$( "#output" ).text( "" );
}
}
});
// 模拟进度条动态变化 (1 秒内达到 100%)
var progressBarValue = 0;
var intervalId = setInterval( function() {
progressBarValue++;
progressbar.progressbar( "value", progressBarValue );
if ( progressBarValue === 100 ) {
clearInterval( intervalId );
}
}, 10 );
});
</script>
</body>
</html>