3

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がブートストラップメインページ内にある場合は正常に機能しますが、HTMLをブートストラップモーダルウィンドウ内（つまり、モーダルのdiv要素内）に移動すると機能しなくなります。

どうすれば動作させることができますか？

4

2 に答える 2

3

zclip と bootstrap モーダルでも同じ問題がありました。私が適用した修正は 2 つあります。

  • モーダルの 'show' 関数内の要素に zclip をアタッチします。
  • zclip を要素にアタッチする前に 250 ミリ秒の遅延を追加します

これにより、zclip がモーダル内に適切に配置されます。モーダルに複数のタブがある場合にも機能します。

HTML

<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…&lt;/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();
    });
});
于 2013-02-05T20:54:30.273 に答える
2

上記の例では、モーダルが完全に表示されたときに呼び出される on('show') イベントの代わりに on('shown') を使用することもできます。これは、delay(250) のような汚いハックの使用を防ぐのに役立ちます。

于 2013-04-10T13:07:17.217 に答える