Fine Uploader 4 以及如何使用 jquery ui 为进度条设置主题

Question

我想知道在 Fine Uploader 中使用 JQuery UI 进度条的推荐方式是什么。

在我的模板中，我有以下 div：

           <div class="qq-progress-bar-container-selector">
              <div class="qq-progress-bar-selector tu-progress-bar"></div>
           </div>

我遇到的第一个问题是如何以及何时指定进度条 div 应该是 jquery ui 小部件。由于它是模板的一部分，因此在 Fine Uploader 创建第一个项目之前，它在技术上并不存在。所以在“提交”事件中，我有以下代码：

           .on('submitted', function(event, id, name) {
              var item = $("#fineuploader-s3").fineUploaderS3("getItemByFileId", id);
              item.data('itemid', id);

              var progressBar = item.find(".tu-progress-bar");
              progressBar.progressbar();
              progressBar.progressbar("option", "max", 100);
              progressBar.progressbar("option", "value", 0);
           })

虽然创建了进度条，但进度条的宽度会发生变化，而不是进度条中的值。内部 div 的宽度需要 Fine Uploader 定期更新，或以其他方式更新。

所以在我开始破解这个方法之前，我想知道是否有更好的方法来做到这一点。

谢谢。

Answer 1

如果您希望 Fine Uploader 为您更新进度条，您需要为其提供一个元素。正如您所提到的，Fine Uploader 会随着文件上传的进行调整此元素的宽度。如果您想使用 jQuery UI 进度条小部件，您需要提供一个“进度”事件处理程序并通过小部件的 API 适当地更新进度条。您可以在文档中阅读有关进度事件的更多信息，例如 progress bar feature page 或 corresponding entry on the events page。

Answer 2

我能够通过 JQuery UI 选择器跳过进度条的实际指定来完成使用 JQuery UI 进度条，而是手动嵌入 JQuery UI 添加到 div 开始的相同类。然后我将 qq-progress-bar-selector 添加到相当于传统 JQuery UI 进度条的“内部”div 中。

最后，Fine Uploader 默认进度条模板 div 所需的唯一更改如下：

           <div class="qq-progress-bar-container-selector">
              <div class="tu-progress-bar ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width: 300px;">
                 <div class="qq-progress-bar-selector ui-progressbar-value ui-widget-header ui-corner-left" style="width: 0%;"></div>
              </div>
           </div>

如果有人能想到任何理由这样做会以某种方式成为不好的形式，或者在其他情况下造成灾难性后果，我非常想知道。