jQuery UI状态条完整教程从基础概念到高级应用轻松掌握网页进度条组件的开发技巧和最佳实践

1. jQuery UI进度条组件简介

jQuery UI进度条（Progressbar）是一个强大的用户界面组件，用于显示任务完成的百分比或进度状态。它是jQuery UI库的一部分，提供了丰富的自定义选项和事件处理机制，使开发者能够轻松创建各种风格的进度指示器。

进度条在网页应用中非常常见，例如文件上传、表单提交、数据处理等需要一定时间的操作中，进度条可以直观地向用户展示当前操作的完成情况，提升用户体验。

1.1 为什么使用jQuery UI进度条

使用jQuery UI进度条有以下几个主要优势：

易于实现：只需几行代码即可创建功能完整的进度条
高度可定制：支持自定义样式、动画和主题
跨浏览器兼容：在主流浏览器中表现一致
丰富的API：提供多种方法和事件，便于控制和交互
无障碍支持：遵循WAI-ARIA标准，支持屏幕阅读器

1.2 准备工作

在使用jQuery UI进度条之前，需要确保页面中引入了必要的文件：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery UI进度条教程</title> <!-- jQuery库 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- jQuery UI库 --> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <!-- jQuery UI CSS --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/ui-lightness/jquery-ui.css"> <style> /* 自定义样式将在这里添加 */ .container { width: 80%; margin: 50px auto; padding: 20px; } .custom-progress { margin-top: 20px; } </style> </head> <body> <div class="container"> <h1>jQuery UI进度条示例</h1> <!-- 进度条将在这里添加 --> <div id="progressbar"></div> <!-- 其他内容 --> </div> <script> // jQuery代码将在这里添加 </script> </body> </html>

2. 基础进度条创建

2.1 创建基本进度条

创建一个基本的jQuery UI进度条非常简单，只需选择一个元素并调用.progressbar()方法：

$(document).ready(function() { $("#progressbar").progressbar({ value: 37 // 设置初始值为37% }); });

这段代码会将ID为progressbar的div元素转换为一个进度条，并设置初始值为37%。

2.2 动态更新进度条

进度条的值可以通过JavaScript动态更新。以下是一个模拟进度增加的示例：

$(document).ready(function() { let progressbar = $("#progressbar"); // 初始化进度条 progressbar.progressbar({ value: 0 }); // 模拟进度增加 function updateProgress() { let value = progressbar.progressbar("value") || 0; if (value < 100) { value += 1; progressbar.progressbar("value", value); setTimeout(updateProgress, 100); } } // 开始进度更新 setTimeout(updateProgress, 1000); });

在这个示例中，我们首先初始化进度条值为0，然后定义一个updateProgress函数，每次调用将进度值增加1，直到达到100%。使用setTimeout函数来模拟异步操作中的进度更新。

2.3 获取进度条当前值

要获取进度条的当前值，可以使用以下方法：

let currentValue = $("#progressbar").progressbar("value"); console.log("当前进度值: " + currentValue + "%");

3. 进度条配置选项

jQuery UI进度条提供了多种配置选项，允许开发者自定义进度条的外观和行为。

3.1 常用配置选项

3.1.1 value选项

value选项用于设置或获取进度条的当前值，范围从0到100。

$("#progressbar").progressbar({ value: 50 // 设置初始值为50% });

3.1.2 disabled选项

disabled选项用于禁用或启用进度条。

$("#progressbar").progressbar({ value: 50, disabled: true // 禁用进度条 }); // 启用进度条 $("#progressbar").progressbar("option", "disabled", false);

3.1.3 max选项

max选项用于设置进度条的最大值，默认为100。

$("#progressbar").progressbar({ value: 50, max: 200 // 设置最大值为200 }); // 更新进度值 $("#progressbar").progressbar("value", 100); // 现在显示为50%，因为100是200的一半

3.2 完整配置示例

下面是一个使用多种配置选项的完整示例：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery UI进度条配置示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/ui-lightness/jquery-ui.css"> <style> .container { width: 80%; margin: 50px auto; padding: 20px; } .controls { margin-top: 20px; } button { margin-right: 10px; padding: 5px 10px; } #progress-value { margin-left: 10px; font-weight: bold; } </style> </head> <body> <div class="container"> <h1>jQuery UI进度条配置示例</h1> <div id="progressbar"></div> <div>当前进度: <span id="progress-value">0</span>%</div> <div class="controls"> <button id="start-btn">开始</button> <button id="pause-btn">暂停</button> <button id="reset-btn">重置</button> <button id="disable-btn">禁用/启用</button> </div> </div> <script> $(document).ready(function() { let progressTimer; let progressbar = $("#progressbar"); let progressValue = $("#progress-value"); // 初始化进度条 progressbar.progressbar({ value: 0, max: 100, disabled: false, change: function() { // 当值改变时更新显示 progressValue.text(progressbar.progressbar("value")); }, complete: function() { // 当完成时清除定时器 clearInterval(progressTimer); alert("进度完成！"); } }); // 开始按钮点击事件 $("#start-btn").click(function() { if (!progressTimer) { progressTimer = setInterval(function() { let value = progressbar.progressbar("value") || 0; if (value < 100) { progressbar.progressbar("value", value + 1); } else { clearInterval(progressTimer); progressTimer = null; } }, 100); } }); // 暂停按钮点击事件 $("#pause-btn").click(function() { clearInterval(progressTimer); progressTimer = null; }); // 重置按钮点击事件 $("#reset-btn").click(function() { clearInterval(progressTimer); progressTimer = null; progressbar.progressbar("value", 0); }); // 禁用/启用按钮点击事件 $("#disable-btn").click(function() { let isDisabled = progressbar.progressbar("option", "disabled"); progressbar.progressbar("option", "disabled", !isDisabled); $(this).text(isDisabled ? "禁用" : "启用"); }); }); </script> </body> </html>

4. 进度条事件处理

jQuery UI进度条提供了多种事件，使开发者能够对进度条的状态变化做出响应。

4.1 可用事件

4.1.1 create事件

当进度条被创建时触发。

$("#progressbar").progressbar({ value: 50, create: function(event, ui) { console.log("进度条已创建"); } });

4.1.2 change事件

当进度条的值发生变化时触发。

$("#progressbar").progressbar({ value: 0, change: function(event, ui) { let value = $(this).progressbar("value"); console.log("进度已更改为: " + value + "%"); } });

4.1.3 complete事件

当进度条的值达到最大值时触发。

$("#progressbar").progressbar({ value: 0, complete: function(event, ui) { console.log("进度已完成！"); alert("任务完成！"); } });

4.2 事件处理示例

下面是一个综合使用各种事件的示例：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery UI进度条事件示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/ui-lightness/jquery-ui.css"> <style> .container { width: 80%; margin: 50px auto; padding: 20px; } .event-log { margin-top: 20px; padding: 10px; border: 1px solid #ddd; height: 200px; overflow-y: auto; background-color: #f9f9f9; } .log-entry { margin-bottom: 5px; padding: 5px; border-bottom: 1px solid #eee; } .controls { margin-top: 20px; } button { margin-right: 10px; padding: 5px 10px; } </style> </head> <body> <div class="container"> <h1>jQuery UI进度条事件示例</h1> <div id="progressbar"></div> <div class="controls"> <button id="start-btn">开始</button> <button id="reset-btn">重置</button> </div> <h3>事件日志:</h3> <div class="event-log" id="event-log"></div> </div> <script> $(document).ready(function() { let progressTimer; let progressbar = $("#progressbar"); let eventLog = $("#event-log"); // 添加日志条目 function addLog(message) { let timestamp = new Date().toLocaleTimeString(); eventLog.append("<div class='log-entry'>[" + timestamp + "] " + message + "</div>"); // 自动滚动到底部 eventLog.scrollTop(eventLog[0].scrollHeight); } // 初始化进度条 progressbar.progressbar({ value: 0, create: function(event, ui) { addLog("进度条已创建"); }, change: function(event, ui) { let value = $(this).progressbar("value"); addLog("进度已更改为: " + value + "%"); }, complete: function(event, ui) { addLog("进度已完成！"); clearInterval(progressTimer); progressTimer = null; } }); // 开始按钮点击事件 $("#start-btn").click(function() { if (!progressTimer) { addLog("开始进度更新"); progressTimer = setInterval(function() { let value = progressbar.progressbar("value") || 0; if (value < 100) { progressbar.progressbar("value", value + 1); } }, 100); } }); // 重置按钮点击事件 $("#reset-btn").click(function() { clearInterval(progressTimer); progressTimer = null; progressbar.progressbar("value", 0); addLog("进度已重置"); }); }); </script> </body> </html>

5. 自定义进度条样式

jQuery UI进度条可以通过CSS进行样式自定义，使其符合网站的整体设计风格。

5.1 基本样式自定义

进度条由几个主要部分组成，可以通过CSS选择器进行自定义：

/* 进度条容器 */ .ui-progressbar { height: 20px; border: 1px solid #ccc; background-color: #f6f6f6; border-radius: 4px; } /* 进度条值部分 */ .ui-progressbar-value { background-color: #3399ff; border-radius: 3px; } /* 禁用状态的进度条 */ .ui-progressbar-disabled .ui-progressbar-value { background-color: #cccccc; }

5.2 高级样式自定义

下面是一个更高级的样式自定义示例，包括渐变背景和动画效果：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery UI进度条样式自定义示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/ui-lightness/jquery-ui.css"> <style> .container { width: 80%; margin: 50px auto; padding: 20px; } /* 基本进度条样式 */ .custom-progressbar { height: 30px; border: 1px solid #ddd; background-color: #f9f9f9; border-radius: 15px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 20px; } /* 进度条值部分 - 蓝色渐变 */ .custom-progressbar .ui-progressbar-value { background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); border-radius: 15px; transition: width 0.3s ease; } /* 绿色进度条 */ .green-progress .ui-progressbar-value { background: linear-gradient(to right, #43e97b 0%, #38f9d7 100%); } /* 橙色进度条 */ .orange-progress .ui-progressbar-value { background: linear-gradient(to right, #fa709a 0%, #fee140 100%); } /* 紫色进度条 */ .purple-progress .ui-progressbar-value { background: linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%); } /* 条纹进度条 */ .striped-progress .ui-progressbar-value { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px; background-color: #3399ff; animation: progress-bar-stripes 1s linear infinite; } @keyframes progress-bar-stripes { 0% { background-position: 40px 0; } 100% { background-position: 0 0; } } /* 带标签的进度条 */ .labeled-progress { position: relative; } .labeled-progress .progress-label { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; line-height: 30px; color: #333; font-weight: bold; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); } .controls { margin-top: 20px; } button { margin-right: 10px; padding: 8px 15px; background-color: #4facfe; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #3399ff; } .progress-examples { margin-top: 30px; } .progress-example { margin-bottom: 20px; } .progress-title { margin-bottom: 5px; font-weight: bold; } </style> </head> <body> <div class="container"> <h1>jQuery UI进度条样式自定义示例</h1> <div class="progress-example"> <div class="progress-title">基本自定义进度条:</div> <div id="basic-progress" class="custom-progressbar"></div> <div>当前值: <span id="basic-value">0</span>%</div> </div> <div class="progress-example"> <div class="progress-title">绿色进度条:</div> <div id="green-progress" class="custom-progressbar green-progress"></div> </div> <div class="progress-example"> <div class="progress-title">橙色进度条:</div> <div id="orange-progress" class="custom-progressbar orange-progress"></div> </div> <div class="progress-example"> <div class="progress-title">紫色进度条:</div> <div id="purple-progress" class="custom-progressbar purple-progress"></div> </div> <div class="progress-example"> <div class="progress-title">条纹进度条:</div> <div id="striped-progress" class="custom-progressbar striped-progress"></div> </div> <div class="progress-example"> <div class="progress-title">带标签的进度条:</div> <div id="labeled-progress" class="custom-progressbar labeled-progress"> <div class="progress-label">0%</div> </div> </div> <div class="controls"> <button id="start-btn">开始演示</button> <button id="reset-btn">重置</button> </div> </div> <script> $(document).ready(function() { let progressTimer; // 初始化所有进度条 $("#basic-progress").progressbar({ value: 0, change: function() { $("#basic-value").text($(this).progressbar("value")); } }); $("#green-progress").progressbar({ value: 0 }); $("#orange-progress").progressbar({ value: 0 }); $("#purple-progress").progressbar({ value: 0 }); $("#striped-progress").progressbar({ value: 0 }); $("#labeled-progress").progressbar({ value: 0, change: function() { $(this).find(".progress-label").text($(this).progressbar("value") + "%"); } }); // 开始按钮点击事件 $("#start-btn").click(function() { if (!progressTimer) { progressTimer = setInterval(function() { let value = $("#basic-progress").progressbar("value") || 0; if (value < 100) { value += 1; $("#basic-progress").progressbar("value", value); $("#green-progress").progressbar("value", value); $("#orange-progress").progressbar("value", value); $("#purple-progress").progressbar("value", value); $("#striped-progress").progressbar("value", value); $("#labeled-progress").progressbar("value", value); } else { clearInterval(progressTimer); progressTimer = null; } }, 100); } }); // 重置按钮点击事件 $("#reset-btn").click(function() { clearInterval(progressTimer); progressTimer = null; $("#basic-progress").progressbar("value", 0); $("#green-progress").progressbar("value", 0); $("#orange-progress").progressbar("value", 0); $("#purple-progress").progressbar("value", 0); $("#striped-progress").progressbar("value", 0); $("#labeled-progress").progressbar("value", 0); }); }); </script> </body> </html>

6. 进度条方法和API

jQuery UI进度条提供了多种方法和API，使开发者能够以编程方式控制进度条的行为。

6.1 常用方法

6.1.1 destroy方法

destroy方法用于完全移除进度条功能，将元素恢复到原始状态。

// 销毁进度条 $("#progressbar").progressbar("destroy");

6.1.2 disable方法

disable方法用于禁用进度条。

// 禁用进度条 $("#progressbar").progressbar("disable");

6.1.3 enable方法

enable方法用于启用已禁用的进度条。

// 启用进度条 $("#progressbar").progressbar("enable");

6.1.4 option方法

option方法用于获取或设置进度条的选项值。

// 获取选项值 let value = $("#progressbar").progressbar("option", "value"); console.log("当前值: " + value); // 设置选项值 $("#progressbar").progressbar("option", "value", 50); // 设置多个选项 $("#progressbar").progressbar("option", { value: 75, disabled: false });

6.1.5 value方法

value方法用于获取或设置进度条的当前值。

// 获取当前值 let currentValue = $("#progressbar").progressbar("value"); console.log("当前值: " + currentValue); // 设置新值 $("#progressbar").progressbar("value", 50);

6.2 方法使用示例

下面是一个综合使用各种方法的示例：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery UI进度条方法示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/ui-lightness/jquery-ui.css"> <style> .container { width: 80%; margin: 50px auto; padding: 20px; } .controls { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; } button { padding: 8px 15px; background-color: #4facfe; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #3399ff; } .status-info { margin-top: 20px; padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 4px; } .status-item { margin-bottom: 5px; } .method-section { margin-top: 30px; } .method-title { font-weight: bold; margin-bottom: 10px; } .input-group { margin-bottom: 15px; } .input-group label { display: inline-block; width: 150px; } .input-group input { padding: 5px; border: 1px solid #ddd; border-radius: 4px; } </style> </head> <body> <div class="container"> <h1>jQuery UI进度条方法示例</h1> <div id="progressbar"></div> <div class="controls"> <button id="start-btn">开始</button> <button id="pause-btn">暂停</button> <button id="reset-btn">重置</button> <button id="disable-btn">禁用</button> <button id="enable-btn">启用</button> <button id="destroy-btn">销毁</button> <button id="init-btn">初始化</button> </div> <div class="status-info"> <div class="status-item">当前值: <span id="current-value">0</span>%</div> <div class="status-item">最大值: <span id="max-value">100</span></div> <div class="status-item">状态: <span id="status">已初始化</span></div> </div> <div class="method-section"> <div class="method-title">方法测试:</div> <div class="input-group"> <label for="set-value-input">设置进度值:</label> <input type="number" id="set-value-input" min="0" max="100" value="50"> <button id="set-value-btn">设置</button> </div> <div class="input-group"> <label for="set-max-input">设置最大值:</label> <input type="number" id="set-max-input" min="1" value="100"> <button id="set-max-btn">设置</button> </div> <div class="input-group"> <label>获取选项值:</label> <button id="get-value-btn">获取值</button> <button id="get-max-btn">获取最大值</button> <button id="get-disabled-btn">获取禁用状态</button> </div> </div> </div> <script> $(document).ready(function() { let progressTimer; let progressbar = $("#progressbar"); let isInitialized = true; // 初始化进度条 progressbar.progressbar({ value: 0, change: function() { updateStatus(); }, complete: function() { clearInterval(progressTimer); progressTimer = null; $("#status").text("进度完成"); } }); // 更新状态信息 function updateStatus() { if (isInitialized) { let value = progressbar.progressbar("value"); let max = progressbar.progressbar("option", "max"); let disabled = progressbar.progressbar("option", "disabled"); $("#current-value").text(value); $("#max-value").text(max); $("#status").text(disabled ? "已禁用" : "已启用"); } } // 开始按钮点击事件 $("#start-btn").click(function() { if (isInitialized && !progressTimer) { progressTimer = setInterval(function() { let value = progressbar.progressbar("value") || 0; let max = progressbar.progressbar("option", "max"); if (value < max) { progressbar.progressbar("value", value + 1); } else { clearInterval(progressTimer); progressTimer = null; } }, 100); } }); // 暂停按钮点击事件 $("#pause-btn").click(function() { if (progressTimer) { clearInterval(progressTimer); progressTimer = null; $("#status").text("已暂停"); } }); // 重置按钮点击事件 $("#reset-btn").click(function() { if (isInitialized) { clearInterval(progressTimer); progressTimer = null; progressbar.progressbar("value", 0); $("#status").text("已重置"); } }); // 禁用按钮点击事件 $("#disable-btn").click(function() { if (isInitialized) { progressbar.progressbar("disable"); updateStatus(); } }); // 启用按钮点击事件 $("#enable-btn").click(function() { if (isInitialized) { progressbar.progressbar("enable"); updateStatus(); } }); // 销毁按钮点击事件 $("#destroy-btn").click(function() { if (isInitialized) { progressbar.progressbar("destroy"); isInitialized = false; $("#status").text("已销毁"); $("#current-value").text("N/A"); $("#max-value").text("N/A"); } }); // 初始化按钮点击事件 $("#init-btn").click(function() { if (!isInitialized) { progressbar.progressbar({ value: 0, change: function() { updateStatus(); }, complete: function() { clearInterval(progressTimer); progressTimer = null; $("#status").text("进度完成"); } }); isInitialized = true; updateStatus(); $("#status").text("已初始化"); } }); // 设置值按钮点击事件 $("#set-value-btn").click(function() { if (isInitialized) { let value = parseInt($("#set-value-input").val()); let max = progressbar.progressbar("option", "max"); if (value >= 0 && value <= max) { progressbar.progressbar("value", value); } else { alert("值必须在0和" + max + "之间"); } } }); // 设置最大值按钮点击事件 $("#set-max-btn").click(function() { if (isInitialized) { let max = parseInt($("#set-max-input").val()); if (max > 0) { progressbar.progressbar("option", "max", max); updateStatus(); } else { alert("最大值必须大于0"); } } }); // 获取值按钮点击事件 $("#get-value-btn").click(function() { if (isInitialized) { let value = progressbar.progressbar("value"); alert("当前值: " + value); } }); // 获取最大值按钮点击事件 $("#get-max-btn").click(function() { if (isInitialized) { let max = progressbar.progressbar("option", "max"); alert("最大值: " + max); } }); // 获取禁用状态按钮点击事件 $("#get-disabled-btn").click(function() { if (isInitialized) { let disabled = progressbar.progressbar("option", "disabled"); alert("禁用状态: " + (disabled ? "是" : "否")); } }); // 初始化状态 updateStatus(); }); </script> </body> </html>

7. 高级应用和技巧

7.1 文件上传进度条

文件上传是进度条的常见应用场景。下面是一个模拟文件上传进度条的示例：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery UI文件上传进度条示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/ui-lightness/jquery-ui.css"> <style> .container { width: 80%; margin: 50px auto; padding: 20px; } .upload-area { border: 2px dashed #ccc; border-radius: 5px; padding: 25px; text-align: center; margin-bottom: 20px; background-color: #f9f9f9; cursor: pointer; transition: all 0.3s; } .upload-area:hover { border-color: #4facfe; background-color: #f0f8ff; } .upload-area.dragover { border-color: #4facfe; background-color: #e6f2ff; } #file-input { display: none; } .file-info { margin-top: 15px; padding: 10px; background-color: #f0f0f0; border-radius: 4px; display: none; } .progress-container { margin-top: 20px; display: none; } .upload-progress { margin-bottom: 10px; } .progress-info { display: flex; justify-content: space-between; margin-top: 5px; } .upload-status { margin-top: 10px; font-weight: bold; } .upload-status.success { color: #4caf50; } .upload-status.error { color: #f44336; } button { padding: 8px 15px; background-color: #4facfe; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px; transition: background-color 0.3s; } button:hover { background-color: #3399ff; } button:disabled { background-color: #cccccc; cursor: not-allowed; } .file-list { margin-top: 20px; } .file-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #eee; } .file-name { flex-grow: 1; } .file-size { margin-right: 15px; color: #666; } .file-status { font-weight: bold; } .file-status.success { color: #4caf50; } .file-status.error { color: #f44336; } .file-status.uploading { color: #2196f3; } </style> </head> <body> <div class="container"> <h1>jQuery UI文件上传进度条示例</h1> <div class="upload-area" id="upload-area"> <p>点击或拖拽文件到此处上传</p> <input type="file" id="file-input" multiple> </div> <div class="file-info" id="file-info"> <div>已选择 <span id="file-count">0</span> 个文件</div> <div>总大小: <span id="total-size">0 KB</span></div> </div> <div class="progress-container" id="progress-container"> <div class="upload-progress" id="upload-progress"></div> <div class="progress-info"> <div>上传进度: <span id="progress-percent">0</span>%</div> <div>已上传: <span id="uploaded-size">0 KB</span> / <span id="file-total-size">0 KB</span></div> </div> <div class="upload-status" id="upload-status"></div> <div style="margin-top: 10px;"> <button id="start-upload">开始上传</button> <button id="cancel-upload" disabled>取消上传</button> </div> </div> <div class="file-list" id="file-list"> <!-- 上传的文件列表将显示在这里 --> </div> </div> <script> $(document).ready(function() { let uploadArea = $("#upload-area"); let fileInput = $("#file-input"); let fileInfo = $("#file-info"); let fileCount = $("#file-count"); let totalSize = $("#total-size"); let progressContainer = $("#progress-container"); let uploadProgress = $("#upload-progress"); let progressPercent = $("#progress-percent"); let uploadedSize = $("#uploaded-size"); let fileTotalSize = $("#file-total-size"); let uploadStatus = $("#upload-status"); let startUploadBtn = $("#start-upload"); let cancelUploadBtn = $("#cancel-upload"); let fileList = $("#file-list"); let selectedFiles = []; let uploadTimer = null; let isUploading = false; // 初始化进度条 uploadProgress.progressbar({ value: 0, max: 100 }); // 点击上传区域触发文件选择 uploadArea.click(function() { fileInput.click(); }); // 文件选择变化事件 fileInput.change(function() { handleFiles(this.files); }); // 拖拽事件 uploadArea.on("dragover", function(e) { e.preventDefault(); uploadArea.addClass("dragover"); }); uploadArea.on("dragleave", function() { uploadArea.removeClass("dragover"); }); uploadArea.on("drop", function(e) { e.preventDefault(); uploadArea.removeClass("dragover"); handleFiles(e.originalEvent.dataTransfer.files); }); // 处理选择的文件 function handleFiles(files) { if (files.length > 0) { selectedFiles = Array.from(files); // 显示文件信息 let totalFileSize = 0; selectedFiles.forEach(function(file) { totalFileSize += file.size; }); fileCount.text(selectedFiles.length); totalSize.text(formatFileSize(totalFileSize)); fileTotalSize.text(formatFileSize(totalFileSize)); fileInfo.show(); progressContainer.show(); // 重置进度条 uploadProgress.progressbar("value", 0); progressPercent.text("0"); uploadedSize.text("0 KB"); uploadStatus.text(""); uploadStatus.removeClass("success error"); // 启用开始上传按钮 startUploadBtn.prop("disabled", false); cancelUploadBtn.prop("disabled", true); // 显示文件列表 displayFileList(); } } // 显示文件列表 function displayFileList() { fileList.empty(); selectedFiles.forEach(function(file, index) { let fileItem = $("<div class='file-item'></div>"); let fileName = $("<div class='file-name'></div>").text(file.name); let fileSize = $("<div class='file-size'></div>").text(formatFileSize(file.size)); let fileStatus = $("<div class='file-status'></div>").text("等待上传"); fileItem.append(fileName); fileItem.append(fileSize); fileItem.append(fileStatus); fileList.append(fileItem); }); } // 开始上传按钮点击事件 startUploadBtn.click(function() { if (selectedFiles.length > 0 && !isUploading) { isUploading = true; startUploadBtn.prop("disabled", true); cancelUploadBtn.prop("disabled", false); uploadStatus.text("上传中..."); uploadStatus.removeClass("success error"); // 模拟文件上传进度 simulateUpload(); } }); // 取消上传按钮点击事件 cancelUploadBtn.click(function() { if (isUploading) { clearInterval(uploadTimer); isUploading = false; startUploadBtn.prop("disabled", false); cancelUploadBtn.prop("disabled", true); uploadStatus.text("上传已取消"); uploadStatus.addClass("error"); // 更新文件列表状态 updateFileListStatus("error"); } }); // 模拟文件上传进度 function simulateUpload() { let uploadedBytes = 0; let totalBytes = 0; selectedFiles.forEach(function(file) { totalBytes += file.size; }); // 更新文件列表状态 updateFileListStatus("uploading"); uploadTimer = setInterval(function() { // 每次增加总大小的1% uploadedBytes += totalBytes / 100; if (uploadedBytes >= totalBytes) { uploadedBytes = totalBytes; clearInterval(uploadTimer); // 上传完成 uploadProgress.progressbar("value", 100); progressPercent.text("100"); uploadedSize.text(formatFileSize(uploadedBytes)); uploadStatus.text("上传完成！"); uploadStatus.addClass("success"); isUploading = false; startUploadBtn.prop("disabled", true); cancelUploadBtn.prop("disabled", true); // 更新文件列表状态 updateFileListStatus("success"); } else { // 更新进度 let percent = Math.round((uploadedBytes / totalBytes) * 100); uploadProgress.progressbar("value", percent); progressPercent.text(percent); uploadedSize.text(formatFileSize(uploadedBytes)); } }, 100); } // 更新文件列表状态 function updateFileListStatus(status) { let statusText = { "uploading": "上传中", "success": "上传成功", "error": "上传失败" }; fileList.find(".file-status").each(function(index) { $(this).text(statusText[status]); $(this).removeClass("success error uploading").addClass(status); }); } // 格式化文件大小 function formatFileSize(bytes) { if (bytes === 0) return "0 Bytes"; const k = 1024; const sizes = ["Bytes", "KB", "MB", "GB", "TB"]; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]; } }); </script> </body> </html>

7.2 多任务进度条

在复杂应用中，可能需要同时跟踪多个任务的进度。下面是一个多任务进度条的示例：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery UI多任务进度条示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/ui-lightness/jquery-ui.css"> <style> .container { width: 80%; margin: 50px auto; padding: 20px; } .task-container { margin-bottom: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9; } .task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .task-name { font-weight: bold; } .task-status { padding: 3px 8px; border-radius: 3px; font-size: 12px; font-weight: bold; } .task-status.pending { background-color: #e6f7ff; color: #1890ff; } .task-status.running { background-color: #f6ffed; color: #52c41a; } .task-status.completed { background-color: #fff7e6; color: #fa8c16; } .task-progress { margin-bottom: 5px; } .task-info { display: flex; justify-content: space-between; font-size: 12px; color: #666; } .overall-progress { margin-top: 30px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; background-color: #f0f8ff; } .overall-title { font-weight: bold; margin-bottom: 10px; text-align: center; } .controls { margin-top: 20px; text-align: center; } button { padding: 8px 15px; background-color: #4facfe; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px; transition: background-color 0.3s; } button:hover { background-color: #3399ff; } button:disabled { background-color: #cccccc; cursor: not-allowed; } .task-custom-progress .ui-progressbar-value { background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); } .overall-custom-progress .ui-progressbar-value { background: linear-gradient(to right, #fa709a 0%, #fee140 100%); } </style> </head> <body> <div class="container"> <h1>jQuery UI多任务进度条示例</h1> <div id="tasks-container"> <!-- 任务进度条将在这里动态添加 --> </div> <div class="overall-progress"> <div class="overall-title">总体进度</div> <div id="overall-progress" class="overall-custom-progress"></div> <div class="task-info"> <div>总体进度: <span id="overall-percent">0</span>%</div> <div>已完成: <span id="completed-tasks">0</span> / <span id="total-tasks">0</span> 个任务</div> </div> </div> <div class="controls"> <button id="start-all-btn">开始所有任务</button> <button id="pause-all-btn">暂停所有任务</button> <button id="reset-all-btn">重置所有任务</button> </div> </div> <script> $(document).ready(function() { let tasks = [ { id: 1, name: "任务一: 数据预处理", duration: 3000, progress: 0, status: "pending", timer: null }, { id: 2, name: "任务二: 特征提取", duration: 5000, progress: 0, status: "pending", timer: null }, { id: 3, name: "任务三: 模型训练", duration: 8000, progress: 0, status: "pending", timer: null }, { id: 4, name: "任务四: 模型评估", duration: 4000, progress: 0, status: "pending", timer: null }, { id: 5, name: "任务五: 结果可视化", duration: 3000, progress: 0, status: "pending", timer: null } ]; let tasksContainer = $("#tasks-container"); let overallProgress = $("#overall-progress"); let overallPercent = $("#overall-percent"); let completedTasks = $("#completed-tasks"); let totalTasks = $("#total-tasks"); let startAllBtn = $("#start-all-btn"); let pauseAllBtn = $("#pause-all-btn"); let resetAllBtn = $("#reset-all-btn"); // 初始化总体进度条 overallProgress.progressbar({ value: 0, max: 100 }); // 显示总任务数 totalTasks.text(tasks.length); // 创建任务进度条 function createTaskProgressBars() { tasksContainer.empty(); tasks.forEach(function(task) { let taskContainer = $("<div class='task-container'></div>"); let taskHeader = $("<div class='task-header'></div>"); let taskName = $("<div class='task-name'></div>").text(task.name); let taskStatus = $("<div class='task-status pending'></div>").text("等待中"); taskHeader.append(taskName); taskHeader.append(taskStatus); let taskProgress = $("<div class='task-progress task-custom-progress' id='task-" + task.id + "-progress'></div>"); let taskInfo = $("<div class='task-info'></div>"); let taskPercent = $("<div></div>").text("进度: 0%"); let taskTime = $("<div></div>").text("剩余时间: 计算中..."); taskInfo.append(taskPercent); taskInfo.append(taskTime); taskContainer.append(taskHeader); taskContainer.append(taskProgress); taskContainer.append(taskInfo); tasksContainer.append(taskContainer); // 初始化进度条 taskProgress.progressbar({ value: 0, max: 100 }); }); } // 开始所有任务 function startAllTasks() { tasks.forEach(function(task) { if (task.status === "pending" || task.status === "paused") { startTask(task); } }); startAllBtn.prop("disabled", true); pauseAllBtn.prop("disabled", false); } // 开始单个任务 function startTask(task) { task.status = "running"; updateTaskStatus(task); let startTime = Date.now(); let remainingTime = task.duration * (1 - task.progress / 100); task.timer = setInterval(function() { let elapsed = Date.now() - startTime; let progressIncrement = (elapsed / task.duration) * 100; task.progress = Math.min(100, task.progress + progressIncrement); // 更新进度条 let taskProgress = $("#task-" + task.id + "-progress"); taskProgress.progressbar("value", task.progress); // 更新任务信息 let taskContainer = taskProgress.closest(".task-container"); taskContainer.find(".task-info div:first").text("进度: " + Math.round(task.progress) + "%"); // 计算剩余时间 remainingTime = task.duration * (1 - task.progress / 100); if (remainingTime > 0) { taskContainer.find(".task-info div:last").text("剩余时间: " + formatTime(remainingTime)); } else { taskContainer.find(".task-info div:last").text("剩余时间: 完成"); } // 更新总体进度 updateOverallProgress(); // 检查任务是否完成 if (task.progress >= 100) { clearInterval(task.timer); task.status = "completed"; updateTaskStatus(task); // 检查是否所有任务都已完成 if (tasks.every(t => t.status === "completed")) { startAllBtn.prop("disabled", false); pauseAllBtn.prop("disabled", true); } } // 重置开始时间 startTime = Date.now(); }, 100); } // 暂停所有任务 function pauseAllTasks() { tasks.forEach(function(task) { if (task.status === "running") { clearInterval(task.timer); task.status = "paused"; updateTaskStatus(task); } }); startAllBtn.prop("disabled", false); pauseAllBtn.prop("disabled", true); } // 重置所有任务 function resetAllTasks() { tasks.forEach(function(task) { if (task.timer) { clearInterval(task.timer); } task.progress = 0; task.status = "pending"; // 重置进度条 let taskProgress = $("#task-" + task.id + "-progress"); taskProgress.progressbar("value", 0); // 重置任务信息 let taskContainer = taskProgress.closest(".task-container"); taskContainer.find(".task-info div:first").text("进度: 0%"); taskContainer.find(".task-info div:last").text("剩余时间: 计算中..."); updateTaskStatus(task); }); // 重置总体进度 overallProgress.progressbar("value", 0); overallPercent.text("0"); completedTasks.text("0"); startAllBtn.prop("disabled", false); pauseAllBtn.prop("disabled", true); } // 更新任务状态显示 function updateTaskStatus(task) { let taskContainer = $("#task-" + task.id + "-progress").closest(".task-container"); let statusElement = taskContainer.find(".task-status"); statusElement.removeClass("pending running completed"); switch (task.status) { case "pending": statusElement.addClass("pending").text("等待中"); break; case "running": statusElement.addClass("running").text("运行中"); break; case "paused": statusElement.addClass("pending").text("已暂停"); break; case "completed": statusElement.addClass("completed").text("已完成"); break; } } // 更新总体进度 function updateOverallProgress() { let totalProgress = 0; let completedCount = 0; tasks.forEach(function(task) { totalProgress += task.progress; if (task.status === "completed") { completedCount++; } }); let averageProgress = totalProgress / tasks.length; overallProgress.progressbar("value", averageProgress); overallPercent.text(Math.round(averageProgress)); completedTasks.text(completedCount); } // 格式化时间 function formatTime(milliseconds) { let seconds = Math.ceil(milliseconds / 1000); let minutes = Math.floor(seconds / 60); seconds = seconds % 60; if (minutes > 0) { return minutes + " 分 " + seconds + " 秒"; } else { return seconds + " 秒"; } } // 绑定按钮事件 startAllBtn.click(startAllTasks); pauseAllBtn.click(pauseAllTasks); resetAllBtn.click(resetAllTasks); // 初始化任务进度条 createTaskProgressBars(); }); </script> </body> </html>

7.3 进度条与动画结合

将进度条与动画效果结合可以增强用户体验。下面是一个进度条与动画结合的示例：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery UI进度条与动画结合示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/ui-lightness/jquery-ui.css"> <style> .container { width: 80%; margin: 50px auto; padding: 20px; } .animation-container { position: relative; height: 300px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; margin-bottom: 20px; background-color: #f9f9f9; } .animated-object { position: absolute; width: 50px; height: 50px; background-color: #4facfe; border-radius: 50%; top: 20px; left: 20px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .progress-container { margin-top: 20px; } .animated-progress { margin-bottom: 10px; } .progress-info { display: flex; justify-content: space-between; margin-top: 5px; } .controls { margin-top: 20px; text-align: center; } button { padding: 8px 15px; background-color: #4facfe; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px; transition: background-color 0.3s; } button:hover { background-color: #3399ff; } button:disabled { background-color: #cccccc; cursor: not-allowed; } .animation-path { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .animated-progress .ui-progressbar-value { background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); transition: width 0.3s ease; } .status-message { margin-top: 15px; padding: 10px; border-radius: 4px; text-align: center; font-weight: bold; display: none; } .status-message.success { background-color: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; } .status-message.info { background-color: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff; } </style> </head> <body> <div class="container"> <h1>jQuery UI进度条与动画结合示例</h1> <div class="animation-container" id="animation-container"> <svg class="animation-path" id="animation-path"> <!-- 动画路径将在这里动态生成 --> </svg> <div class="animated-object" id="animated-object">0%</div> </div> <div class="progress-container"> <div id="animated-progress" class="animated-progress"></div> <div class="progress-info"> <div>动画进度: <span id="progress-percent">0</span>%</div> <div>当前位置: <span id="current-position">起点</span></div> </div> </div> <div class="status-message" id="status-message"></div> <div class="controls"> <button id="start-animation">开始动画</button> <button id="pause-animation" disabled>暂停动画</button> <button id="reset-animation">重置动画</button> <select id="path-select"> <option value="linear">直线路径</option> <option value="circle">圆形路径</option> <option value="zigzag">锯齿路径</option> <option value="spiral">螺旋路径</option> </select> </div> </div> <script> $(document).ready(function() { let animationContainer = $("#animation-container"); let animatedObject = $("#animated-object"); let animationPath = $("#animation-path"); let animatedProgress = $("#animated-progress"); let progressPercent = $("#progress-percent"); let currentPosition = $("#current-position"); let statusMessage = $("#status-message"); let startAnimationBtn = $("#start-animation"); let pauseAnimationBtn = $("#pause-animation"); let resetAnimationBtn = $("#reset-animation"); let pathSelect = $("#path-select"); let animationTimer = null; let currentProgress = 0; let isAnimating = false; let pathType = "linear"; // 初始化进度条 animatedProgress.progressbar({ value: 0, max: 100, change: function() { let value = $(this).progressbar("value"); progressPercent.text(value); animatedObject.text(value + "%"); }, complete: function() { showStatus("动画完成！", "success"); isAnimating = false; startAnimationBtn.prop("disabled", false); pauseAnimationBtn.prop("disabled", true); } }); // 显示状态消息 function showStatus(message, type) { statusMessage.text(message); statusMessage.removeClass("success info").addClass(type); statusMessage.fadeIn(); setTimeout(function() { statusMessage.fadeOut(); }, 3000); } // 生成路径 function generatePath(type) { animationPath.empty(); let containerWidth = animationContainer.width(); let containerHeight = animationContainer.height(); let path = ""; switch (type) { case "linear": // 直线路径 path = `M 20,${containerHeight / 2} L ${containerWidth - 70},${containerHeight / 2}`; currentPosition.text("直线路径"); break; case "circle": // 圆形路径 let centerX = containerWidth / 2; let centerY = containerHeight / 2; let radius = Math.min(containerWidth, containerHeight) / 2 - 50; path = `M ${centerX + radius},${centerY} A ${radius},${radius} 0 1,1 ${centerX + radius - 0.1},${centerY}`; currentPosition.text("圆形路径"); break; case "zigzag": // 锯齿路径 let segments = 5; let segmentWidth = (containerWidth - 90) / segments; let amplitude = containerHeight / 3; path = `M 20,${containerHeight / 2}`; for (let i = 1; i <= segments; i++) { let x = 20 + i * segmentWidth; let y = (i % 2 === 0) ? containerHeight / 2 + amplitude : containerHeight / 2 - amplitude; path += ` L ${x},${y}`; } currentPosition.text("锯齿路径"); break; case "spiral": // 螺旋路径 let spiralCenterX = containerWidth / 2; let spiralCenterY = containerHeight / 2; let spiralRadius = Math.min(containerWidth, containerHeight) / 2 - 50; let turns = 3; path = `M ${spiralCenterX + 10},${spiralCenterY}`; for (let i = 0; i <= 100; i++) { let angle = 0.1 * i * turns; let radius = 10 + (spiralRadius - 10) * (i / 100); let x = spiralCenterX + radius * Math.cos(angle); let y = spiralCenterY + radius * Math.sin(angle); path += ` L ${x},${y}`; } currentPosition.text("螺旋路径"); break; } // 创建SVG路径元素 let pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path"); pathElement.setAttribute("d", path); pathElement.setAttribute("fill", "none"); pathElement.setAttribute("stroke", "#ddd"); pathElement.setAttribute("stroke-width", "2"); pathElement.setAttribute("stroke-dasharray", "5,5"); animationPath.append(pathElement); return path; } // 获取路径上的点 function getPointAtLength(path, length) { let svg = animationPath[0]; let pathElement = svg.querySelector("path"); if (pathElement) { return pathElement.getPointAtLength(length); } return { x: 20, y: animationContainer.height() / 2 }; } // 开始动画 function startAnimation() { if (!isAnimating) { isAnimating = true; startAnimationBtn.prop("disabled", true); pauseAnimationBtn.prop("disabled", false); // 生成路径 let path = generatePath(pathType); let svg = animationPath[0]; let pathElement = svg.querySelector("path"); if (pathElement) { let pathLength = pathElement.getTotalLength(); animationTimer = setInterval(function() { if (currentProgress < 100) { currentProgress += 1; animatedProgress.progressbar("value", currentProgress); // 计算对象位置 let length = pathLength * (currentProgress / 100); let point = getPointAtLength(path, length); // 更新对象位置 animatedObject.css({ left: point.x - 25, top: point.y - 25 }); } else { clearInterval(animationTimer); animationTimer = null; } }, 50); } } } // 暂停动画 function pauseAnimation() { if (isAnimating) { clearInterval(animationTimer); animationTimer = null; isAnimating = false; startAnimationBtn.prop("disabled", false); pauseAnimationBtn.prop("disabled", true); showStatus("动画已暂停", "info"); } } // 重置动画 function resetAnimation() { if (animationTimer) { clearInterval(animationTimer); animationTimer = null; } currentProgress = 0; isAnimating = false; animatedProgress.progressbar("value", 0); // 重置对象位置 animatedObject.css({ left: 20, top: 20 }); startAnimationBtn.prop("disabled", false); pauseAnimationBtn.prop("disabled", true); // 重新生成路径 generatePath(pathType); } // 绑定按钮事件 startAnimationBtn.click(startAnimation); pauseAnimationBtn.click(pauseAnimation); resetAnimationBtn.click(resetAnimation); // 路径选择变化事件 pathSelect.change(function() { pathType = $(this).val(); resetAnimation(); }); // 初始化路径 generatePath(pathType); }); </script> </body> </html>

8. 最佳实践和常见问题解决方案

8.1 最佳实践

8.1.1 合理使用进度条

进度条应该用于需要一定时间的操作，向用户展示操作进度。对于瞬间完成的操作，不需要使用进度条。

// 不好的做法 - 瞬间完成的操作使用进度条 function quickOperation() { $("#progressbar").progressbar({ value: 0 }); // 瞬间完成的操作 $("#progressbar").progressbar("value", 100); } // 好的做法 - 只为耗时操作使用进度条 function longRunningOperation() { $("#progressbar").progressbar({ value: 0 }); // 模拟耗时操作 let progress = 0; let timer = setInterval(function() { progress += 5; $("#progressbar").progressbar("value", progress); if (progress >= 100) { clearInterval(timer); } }, 200); }

8.1.2 提供有意义的反馈

进度条应该提供有意义的反馈，告诉用户当前正在进行的操作以及预计完成时间。

function meaningfulProgress() { $("#progressbar").progressbar({ value: 0 }); $("#status-message").text("正在初始化..."); // 模拟不同阶段的操作 setTimeout(function() { $("#progressbar").progressbar("value", 25); $("#status-message").text("正在加载数据..."); }, 1000); setTimeout(function() { $("#progressbar").progressbar("value", 50); $("#status-message").text("正在处理数据..."); }, 2000); setTimeout(function() { $("#progressbar").progressbar("value", 75); $("#status-message").text("正在生成结果..."); }, 3000); setTimeout(function() { $("#progressbar").progressbar("value", 100); $("#status-message").text("操作完成！"); }, 4000); }

8.1.3 使用适当的更新频率

进度条的更新频率应该适中，过于频繁的更新可能会影响性能，过于稀疏的更新则会导致用户体验不佳。

// 不好的做法 - 过于频繁的更新 function badUpdateFrequency() { $("#progressbar").progressbar({ value: 0 }); let progress = 0; let timer = setInterval(function() { progress += 0.1; $("#progressbar").progressbar("value", progress); if (progress >= 100) { clearInterval(timer); } }, 10); // 每10毫秒更新一次，过于频繁 } // 好的做法 - 适中的更新频率 function goodUpdateFrequency() { $("#progressbar").progressbar({ value: 0 }); let progress = 0; let timer = setInterval(function() { progress += 1; $("#progressbar").progressbar("value", progress); if (progress >= 100) { clearInterval(timer); } }, 100); // 每100毫秒更新一次，适中 }

8.2 常见问题解决方案

8.2.1 进度条不显示

如果进度条不显示，可能是由于以下原因：

未正确引入jQuery UI库：确保已正确引入jQuery和jQuery UI库。

<!-- jQuery库 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- jQuery UI库 --> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <!-- jQuery UI CSS --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/ui-lightness/jquery-ui.css">

元素未正确初始化：确保在DOM加载完成后初始化进度条。

// 好的做法 - 确保DOM加载完成后初始化 $(document).ready(function() { $("#progressbar").progressbar({ value: 37 }); }); // 或者使用简写形式 $(function() { $("#progressbar").progressbar({ value: 37 }); });

CSS样式问题：检查是否有CSS样式影响了进度条的显示。

/* 确保进度条容器有明确的高度 */ #progressbar { height: 20px; }

8.2.2 进度条值不更新

如果进度条的值不更新，可能是由于以下原因：

未正确调用value方法：确保使用正确的方法更新进度条值。

// 正确的更新方法 $("#progressbar").progressbar("value", 50); // 错误的更新方法 $("#progressbar").progressbar({ value: 50 }); // 这样会重新初始化进度条，而不是更新值

变量作用域问题：确保在正确的上下文中访问进度条元素。

// 不好的做法 - 变量作用域问题 function badScope() { let timer; $("#start-btn").click(function() { timer = setInterval(function() { let value = $("#progressbar").progressbar("value") || 0; if (value < 100) { $("#progressbar").progressbar("value", value + 1); } else { clearInterval(timer); // timer可能不是同一个变量 } }, 100); }); $("#stop-btn").click(function() { clearInterval(timer); // timer可能不是同一个变量 }); } // 好的做法 - 使用正确的变量作用域 function goodScope() { let timer; $("#start-btn").click(function() { if (!timer) { timer = setInterval(function() { let value = $("#progressbar").progressbar("value") || 0; if (value < 100) { $("#progressbar").progressbar("value", value + 1); } else { clearInterval(timer); timer = null; } }, 100); } }); $("#stop-btn").click(function() { if (timer) { clearInterval(timer); timer = null; } }); }

8.2.3 进度条样式不正确

如果进度条的样式不正确，可能是由于以下原因：

CSS优先级问题：确保自定义样式有足够的优先级。

/* 不好的做法 - 优先级可能不够 */ .ui-progressbar-value { background-color: #3399ff; } /* 好的做法 - 增加选择器特异性 */ #progressbar .ui-progressbar-value { background-color: #3399ff; } /* 或者使用!important（不推荐，除非必要） */ .ui-progressbar-value { background-color: #3399ff !important; }

主题冲突：确保没有多个jQuery UI主题冲突。

<!-- 确保只引入一个jQuery UI主题 --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/ui-lightness/jquery-ui.css"> <!-- 不要同时引入多个主题 --> <!-- <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> -->

8.2.4 进度条与异步操作同步

在处理异步操作时，确保进度条与操作状态同步。

// 不好的做法 - 进度条与异步操作不同步 function badAsyncSync() { $("#progressbar").progressbar({ value: 0 }); // 模拟异步操作 setTimeout(function() { // 操作完成，但进度条可能还未更新到100% console.log("操作完成"); }, 2000); // 更新进度条 let progress = 0; let timer = setInterval(function() { progress += 10; $("#progressbar").progressbar("value", progress); if (progress >= 100) { clearInterval(timer); } }, 200); } // 好的做法 - 进度条与异步操作同步 function goodAsyncSync() { $("#progressbar").progressbar({ value: 0 }); // 更新进度条 let progress = 0; let timer = setInterval(function() { progress += 10; $("#progressbar").progressbar("value", progress); if (progress >= 100) { clearInterval(timer); // 进度条完成后执行操作 operationComplete(); } }, 200); } function operationComplete() { console.log("操作完成"); // 执行完成后的操作 }