jQuery-zclip は、コンテンツをクリップボードにコピーする jQuery プラグインです。これを使用すると、異なるブラウザーやブラウザーのバージョン間の互換性の問題を考慮する必要がなくなります。 jQuery-zclip プラグインを使用するには、Flash サポートが必要です。Adobe Flash Player を忘れずにインストールしてください。
1. jQuery-zclip の使用法
//引入jQuery-zclip相关js及swf文件 <script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script> <script type="text/javascript" src="<%=path%>/resources/js/jquery.zclip.min.js"></script> <script type="text/javascript"> $(function(){ $("#cp-btn").zclip({ path:'<%=path%>/resources/js/ZeroClipboard.swf', //记得把ZeroClipboard.swf引入到项目中 copy:function(){ return $('#inviteUrl').val(); } }); }); </script> <div class=form-row> <div class=col-md-5> <input class=form-control value="" id="inviteUrl"/> </div> <div class=col-md-1> <a href="javascript:void(0)" id="cp-btn" class="btn btn-default btn-block btn-clean">复 制</a> </div> </div>
設定手順
path:swf のパス (コピーでは主に Flash を使用して、異なるブラウザのコピーを解決します)
copy:コピーされるコンテンツは静的コンテンツであることも、動的コンテンツを返すこともできます
beforeCopy:前に実行する関数をコピーします;
afterCopy:コピー後に実行される関数;
3 つのメソッド
を提供します
show:$(selected).zclip('show');//コピー機能は有効です
Hide:$(selected).zclip('hide');//コピー機能は無効です
Remove:$(selected).zclip('remove');//コピー機能を完全に削除します
2. デモンストレーション効果
操作が成功したら、コピー ボタンをクリックすると、次のようなプロンプト ボックスがポップアップ表示され、クリップボードへのコピーが有効になったことを示します。
ポップアップ ボックスに「テキストをクリップボードにコピーしました」という英語の文字が表示されますが、これは中国語の使用習慣と少し矛盾します。jQuery で「コピーされました」を見つけます。 .zclip.min.js ファイル 「クリップボードへのテキスト」を「クリップボードに正常にコピーされました」 に置き換えるだけで、効果は次のようになります:
上記は、jQuery zclip プラグインのクロスブラウザー コピー機能について編集者がまとめた内容であり、皆様の学習に役立つことを願っています。