在元素内创建新元素

时间:2016-04-09 12:49:26

标签: javascript jquery dropzone.js

我想在dropzone js中设置按钮删除链接。我只是希望它看起来像带有glyphicon的bootstrap按钮。

而不是像这样的默认dropzone代码

!

结果如下

var myModule = (function(window, undefined) {

我想要这样的结果

Dropzone.prototype.defaultOptions = {
    dictRemoveFile: "Remove file",
        if (this.options.addRemoveLinks) {
            file._removeLink = Dropzone.createElement("<a class=\"dz-remove btn btn-default\" href=\"javascript:undefined;\" data-dz-remove>" + this.options.dictRemoveFile + "</a>");
            var custom = Dropzone.createElement("<div class=\"custom\"></div>");
            custom.appendChild(file._removeLink);
            file.previewElement.appendChild(custom);
        }

所以我在dropzone.js中添加了一个像这样的代码

  <a class="dz-remove btn btn-default" href="javascript:undefined;" data-dz-remove="">Remove file</a>

现在我只能成功

<div class="custom">
<button type="button" class="dz-remove btn btn-default" href="javascript:undefined;" data-dz-remove aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
</div>

问题只有按钮左侧的标签跨度(它没有显示)。

1 个答案:

答案 0 :(得分:0)

file._removeLink = Dropzone.createElement("<button type=\"button\" class=\"dz-remove btn btn-default\" href=\"javascript:undefined;\" data-dz-remove aria-label=\"Left Align\">" + this.options.dictRemoveFile + "</button>");
var custom = Dropzone.createElement("<div class=\"custom-btn\"></div>");
var span = Dropzone.createElement("<span class=\"glyphicon glyphicon-align-left\" aria-hidden=\"true\"></span>");
file._removeLink.appendChild(span);
custom.appendChild(file._removeLink);
file.previewElement.appendChild(custom);

试试上面的代码。应该工作