3

ページでjqueryuiダイアログを使用していますが、驚くべきことに、ゼロクリップボードのコピーからクリップボードへの機能がjqueryダイアログボックス内から機能しません。

これは私のコード全体です...

<html>
<head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" 
    type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://davidwalsh.name/dw-content/ZeroClipboard.js"></script>

    <script type="text/javascript"> 
    $(function(){
        $('#ex1').click(function(){
            var div = $('#div1');
            div.dialog(
                {
                    title:'Dialog1',
                    width: 300,
                    height: 150,
                    closeOnEscape: false
                });
        });
    });

    function toClipboard(me, msg_id) {
                        ZeroClipboard.setMoviePath('http://davidwalsh.name/dw-content/ZeroClipboard.swf');
                        var clip = new ZeroClipboard.Client();
                        //clip.setHandCursor( true );
                        var txt = $("#msg_p_span_"+msg_id).html();

                        console.log("Text: "+txt);
                            clip.addEventListener('mousedown',function() {
                            clip.setText(txt);
                            console.log("Copied");
                            });
                            clip.addEventListener('complete',function(client,text) {
                            alert('copied: ' + text);
                            });
                        clip.glue(me);
                }
    </script>

<title>jQuery UI dialog extra demo</title>
</head>
<body>

  <span id="msg_p_span_1" style="display:none;">Testing the clipboard copy 1.</span>
  <span title="Copy to clipboard" style="cursor: pointer; text-decoration:underline;" onmouseOver="toClipboard(this, 1)">Copy</span>
  <button id="ex1">Launch dialog</button>

<div id="div1" style="display:none;">

<p style="padding: 10px 3px; font-size: 12px;" id="msg_p_2">
<span id="msg_p_span_2">Testing the clipboard copy 2.</span>
<span style="float: right; width: 25px; margin-right: 10px;">
<span title="Copy to clipboard" style="cursor: pointer; text-decoration:underline;" onmouseOver="toClipboard(this, 2)">Copy</span>
</span>
</p>

</div>  
</body>
</html>

最初の「コピー」リンクをクリックすると、テキストが適切にコピーされ、アラートが生成されます。しかし、jqueryダイアログボックスを起動してその中の[コピー]リンクをクリックすると、テキストがコピーされません。

おそらく誰かが上記のコード（コピー＆ペースト）で問題を再現して見つけることができます。

注：Davidwalshサイトのコア例に従っています

4

2 に答える 2

7

さて、私はグーグル検索をたくさんした後、私の問題の解決策を見つけました。

これらの公式のグーグルコードプロジェクトページで述べられているように： こことここ（申し訳ありませんが、リンクが壊れていました）、コピー要素として設定した要素（私の場合は「コピー」リンク）を指定することをお勧めしますjqueryダイアログボックス内）、z-indexのより高い値（たとえば9999）。

私が見つけたもう1つの方法は、jqueryダイアログdivに与えるz-index値を小さくすると、クリップボードへのコピー機能が正常に機能することでした。

これが将来誰かに役立つことを願っています。

于 2012-05-21T11:07:57.743 に答える
2

ここに画像の説明を入力してください

コードは正常に機能しています。ホストでコードをテストしていることを確認してください。他のhtmlファイルのようには機能しません。ファイルを機能させるには、ローカルホストなどのホストにファイルを配置する必要があります。

PSダイアログのコピーボタンについては読んでいませんでした。今それをチェックしています。

于 2012-05-21T09:06:36.733 に答える