ホームページ >ウェブフロントエンド >jsチュートリアル >JQuery zClip プラグインは、ページ コンテンツを Clipboard_jquery にコピーする機能を実装します。

JQuery zClip プラグインは、ページ コンテンツを Clipboard_jquery にコピーする機能を実装します。

WBOY
WBOYオリジナル
2016-05-16 15:34:061370ブラウズ

インターネットをサーフィンしているときにこの機能によく遭遇すると思いますが、私はプロジェクトで必要になるまで、これを実装する方法にあまり注意を払いませんでした。

最終効果:

インターネットでいろいろ調べた結果、単純に js メソッドを使用することは不可能ではありませんが、各ブラウザのセキュリティ機構が異なるため、クロスブラウザではありません。一般的に使用されている Web サイトをいくつか確認しましたが、いずれも [クリップボードにコピー] ボタンを隠すために透明な Flash を使用しているため、[クリップボードにコピー] をクリックすると、実際には Flash が使用され、コピーする必要のあるコンテンツがコピーされます。これはフラッシュに渡され、受信したコンテンツはフラッシュのコピー機能を通じてクリップボードにコピーされます。
JQuery ライブラリと zclip プラグイン
をロードします

<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> 
<script src="js/jquery.zclip.min.js"></script> 

以下は小さなデモで、主にテキスト ボックス内のリンクをクリップボードにコピーします。
HTML

<input type="text" value="www.jb51.net" id="link"> 
<span id="copyBtn">复制链接</span> 

次に、スクリプト
を追加します。

<script> 
    $('#copyBtn').zclip({ 
      path: "ZeroClipboard.swf", 
      copy: function(){ 
        return $('#link').val(); 
       } 
    }); 
</script> 

これは、簡単な小さなアプリケーションなので、すぐに使いこなせると思います。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。