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进度条的'inside'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>

如果有人能够想到这样做会以某种方式形成不良形式，或在其他情况下造成灾难性后果，我非常想知道。

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

2 个答案: