jQueryUI Progressbar插件
时间：2020-02-23 14:46:17 来源:igfitidea点击:
在先前的文章中，我们讨论了有关不同的jQuery UI插件，例如datepicker，手风琴和自动完成。
我们将在本文中讨论另一个有趣的插件，Progressbar插件。
进度条旨在指示流程的完整性百分比。
jQuery UI提供了一个插件，可以在您的应用程序中合并此功能。
我们可以将progressbar分为两种：确定的和不确定的。
如果可以计算实际状态，则在应用程序中使用确定进度条，否则使用不确定进度条。
进度列插件选项
在本节中，我们将讨论自定义progressbar插件的可用选项。
我们在"操作"部分的"进度条"插件中使用了许多这些选项。
| Options | Syntax | Description |
|---|---|---|
| disabled | $( ".selector"; ).progressbar({ disabled: true }); | Setting this option to true disables the progressbar. |
| max | $( ".selector"; ).progressbar({ max: 1024 }); | This option denotes the maximum value of the progressbar. |
| value | $( ".selector"; ).progressbar({ value: 25 }); | Integer or Boolean value of the progressbar.Integer value between zero max and indeterminate progressbar can be created if the boolean value is set to false. |
上表简要描述了可用于自定义progressbar插件的选项。
Progressbar插件方法
在本节中，我们将讨论与jQueryUI progressbar插件关联的不同方法。
我们在"操作"部分的"进度条"插件中使用了许多方法。
| Methods | Usage | Description |
|---|---|---|
| destroy() | $( “.selector” ).progressbar( “destroy” ); | This method will completely remove the progressbar functionality. |
| disable() | $( “.selector” ).progressbar( “disable” ); | This method is used to disable the progressbar functionality. |
| enable() | $( “.selector” ).progressbar( “enable” ); | This method enables the progressbar functionality. |
| instance() | $( “.selector” ).progressbar( “instance” ); | This method is used to get the progressbar’s instance object |
| option( optionName, value ) | $( “.selector” ).progressbar( “option”, “disabled”, true ); | This method is used to set the value of the progressbar option associated with the optionName. |
| value() | $( “.selector” ).progressbar( “value”); | This method is used to get the value of the progressbar. |
| widget() | $( “.selector” ).progressbar( “widget” ); | This method will return a jQuery object which contains the progressbar. |
上表简要描述了用于自定义progressbar插件的不同方法。
进度列插件事件
在本节中，我们将讨论与jQueryUI progressbar插件相关的不同事件。
我们在"操作"部分中使用了许多此类事件Progressbar插件。
| Events | Usage | Description |
|---|---|---|
| change( event, ui ) | $( ".selector"; ).progressbar({,change: function( event, ui ) {}}); | This event is fired when the value is changed and executes the callback function. |
| complete( event, ui ) | $( ".selector"; ).progressbar({,complete: function( event, ui ) {}}); | This event is fired when the value of the progressbar reaches it's maximum. |
| create( event, ui ) | $( ".selector"; ).progressbar({,create: function( event, ui ) {}}); | This event is fired when the progressbar is created. |
上表简要描述了与progressbar插件关联的事件。
进度列插件的使用
在本节中，我们将尝试不同的示例来探索jQueryUI Progressbar插件的用法。
默认功能
以下示例演示了确定进度条的默认功能。
在此示例中，您可以看到指定了一个整数"值"来演示确定过程的进度条。
progressbar-determinate.html
<!doctype html>
<html>
<head>
<title>jQuery UI Progressbar - Default Determinate</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 60
});
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
您将在浏览器中看到以下输出。
以下示例演示了不确定进度条的默认功能。
在此示例中，我们将value设置为false来演示不确定进程的进度条。
progressbar-indeterminate.html
<!doctype html>
<html>
<head>
<title>jQuery UI Progressbar - Default Indeterminate</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: false
});
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
带有自定义标签的进度列
以下示例演示了带有自定义标签的progressbar插件。
progressbar-customlabel.html
<!doctype html>
<html>
<head>
<title>jQuery UI Progressbar - Custom Label</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<style>
.ui-progressbar{
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function() {
var progressbar = $( "#progress-bar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Loading Completed!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 2 );
if ( val < 99 ) {
setTimeout( progress, 90 );
}
}
setTimeout( progress, 2500 );
});
</script>
</head>
<body>
<div id="progress-bar"><div class="progress-label">Loading...</div></div>
</body>
</html>
