ホームページ >ウェブフロントエンド >jsチュートリアル >JQuery zClip プラグインは、ページ コンテンツを Clipboard_jquery にコピーする機能を実装します。
インターネットをサーフィンしているときにこの機能によく遭遇すると思いますが、私はプロジェクトで必要になるまで、これを実装する方法にあまり注意を払いませんでした。
最終効果:
インターネットでいろいろ調べた結果、単純に 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>
これは、簡単な小さなアプリケーションなので、すぐに使いこなせると思います。