Zclip不工作在引导模式

我使用的是zclip页面提供的干净的示例代码:

$('a#copy-dynamic').zclip({
    path:'js/ZeroClipboard.swf',
    copy:function(){return $('input#dynamic').val();}
});

这是HTML:

<a href="#" id="copy-dynamic" class="">Click here to copy the value of this input:</a>
<input type="text" id="dynamic" value="Insert any text here." onfocus="if(this.value=='Insert any text here.'){this.value=''}" onblur="if(this.value==''){this.value='Insert any text here.'}">

如果HTML在bootstrap主页内，它可以正常工作，但如果我将HTML移动到bootstrap模态窗口内(即模态的div元素内)，它就会停止工作。

我怎样才能使它工作?

我有同样的问题与zclip和bootstrap模式。我应用的修复是双重的:

将zclip附加到modal' show'函数中的元素上。
在将zclip附加到元素之前添加250ms延迟

这将正确地将zclip置于模态中。如果你在模态中有多个选项卡，它也可以工作。

<div id="myModal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <a class="btn" href="#" id="modal_body_button">Copy Undo Config To Clipboard</a>
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

JavaScript

$('#myModal').on('show', function () { $("#modal_body_button").delay(250).queue(function(next){ $(this).zclip({ path: "/static/javascript/ZeroClipboard.swf", copy: "copied text OK!" }); next(); }); });

在上面的例子中也可以使用on('show')来代替on('show')事件，后者会在模态完全显示时调用。这有助于防止使用诸如delay(250)

之类的肮脏技巧

相关内容

最新更新

热门标签：