首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >用<li>代替fineUploader附加到表中

用<li>代替fineUploader附加到表中
EN

Stack Overflow用户
提问于 2013-04-02 05:55:21
回答 1查看 794关注 0票数 0

基本上,我使用的jQuery插件是:http://fineuploader.com/

上传器模板的HTML模型如下所示

代码语言:javascript
运行
复制
<div class="span9">
      <h2>Upload file</h2>
      <div id="bootstrapped-fine-uploader">
        <noscript>
                <p>Please enable JavaScript to use file uploader.</p>
        </noscript>
       </div>
</div>
<div class="span9" style="padding-top:50px;">
       <table class="table table-bordered table-condensed">
                <thead>
                    <tr>
                        <th>Filename</th>
                        <th>Filesize</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                      <tr>
                         <td colspan="3">No active uploads</td>
                      </tr>
                 </tbody>
       </table>
</div>

我想要做的是将文件列表添加到一个独立的表行中,而不是默认的(这是某种警告),它们用于此的模型是

代码语言:javascript
运行
复制
    template: '<div class="qq-uploader">' +
        ((!this._options.dragAndDrop || !this._options.dragAndDrop.disableDefaultDropzone) ? '<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' : '') +
        (!this._options.button ? '<div class="qq-upload-button"><div>{uploadButtonText}</div></div>' : '') +
        '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
        (!this._options.listElement ? '<ul class="qq-upload-list"></ul>' : '') +
        '</div>',

    // template for one item in file list
    fileTemplate: '<li>' +
        '<div class="qq-progress-bar"></div>' +
        '<span class="qq-upload-spinner"></span>' +
        '<span class="qq-upload-finished"></span>' +
        '<span class="qq-upload-file"></span>' +
        '<span class="qq-upload-size"></span>' +
        '<a class="qq-upload-cancel" href="#">{cancelButtonText}</a>' +
        '<a class="qq-upload-retry" href="#">{retryButtonText}</a>' +
        '<a class="qq-upload-delete" href="#">{deleteButtonText}</a>' +
        '<span class="qq-upload-status-text">{statusText}</span>' +
        '</li>',

实际上,我不知道他们如何称呼这个函数,尽管如果在这个应用程序中有经验的人能为我指明如何实现我的请求的正确方向,我将非常感激。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-04-02 13:23:46

您将希望使用所需的标记提供fileTemplate选项的替代版本。您还需要将listElement选项设置为指向文件项的容器。当前,文件列表是无序列表中包含的一组列表项。您需要将listElement设置为您的<tbody>,每个文件项(由fileTemplate选项表示)都是<tr>

FineUploader模式下的上传器样式在造型精巧Uploader文档中有更多描述。另一种选择是使用FineUploaderBasic模式,它仍然为您处理跨浏览器上传,但允许您轻松定义自己的UI。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15757120

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档