0

Twitterのブートストラップcssフレームワークを使い始めるまで、zclipのクリップボードへのコピー機能をうまく使っていました。今、私はもうzclipを使用できないようです.誰かがその解決策を持っていますか?

いくつかのテスト結果:

これが私がzclipを使用する方法です：

    $('.test').zclip({
        path:"{{ asset('bundles/yopyourownpoet/flash/ZeroClipboard.swf') }}",
        copy: 'test',
        afterCopy:function(){
            alert('The poem has been copied to the clipboard.');
        },
    });

これは、次の html で正常に機能します。

<div class='test'>test</div>

しかし、画像を使用しようとするたびに、それが機能しなくなり、フラッシュが表示されなくなります:

<div class='test'><img src="{{ asset('bundles/yopyourownpoet/images/Star.png') }}" alt="Star" height="100" width="100" /></div>

これは、ブートストラップの使用を開始する前にうまく機能していました... zclip とブートストラップを使用するためのヒントはありますか? どうもありがとう。

4

1 に答える 1

2

さて、いろいろ試行錯誤した結果、やっと動くようになりました。zeroclipboard に戻して、もう zclip を使わないようにしなければなりませんでした。動作しているコードは次のとおりです。

    <div id="d_clip_container" style="position:relative; bottom: 25px; display: inline;">
        <img id='d_clip_button' style="position:relative; top: 25px;" src="{{ asset('bundles/yopyourownpoet/images/CopyPoemPage8.png') }}" alt="Copy Poem" height="71" width="300" />
    </div>

-

    ZeroClipboard.setMoviePath("{{ asset('bundles/yopyourownpoet/flash/ZeroClipboard.swf') }}");
    var clip = new ZeroClipboard.Client();
    clip.setText( 'text to copy' );
    clip.glue( 'd_clip_button', 'd_clip_container' );
    clip.setHandCursor( true );

フラッシュが画像に重なるように、コンテナーの下部 25 ピクセル、画像の上部 25 ピクセルというトリックを使用する必要があったことに注意してください。

これはうまく機能していますが、画像をホバリングしたときにカーソルが常にポインターに変わるとは限りません。

ただし、この解決策は少し怪しいと思うので、誰かがより良い解決策を持っている場合は共有してください。

于 2012-07-08T03:39:11.750 に答える