この記事では、クロスブラウザー ライブラリ クラス Zero Clipboard を紹介します。コピーには Flash を使用するため、ブラウザに Flash がインストールされていれば実行でき、IE の document.execCommand("Copy") よりも柔軟です。
Zero Clipboard の実装原理
Zero Clipboard はコピーに Flash を使用します。 以前は、非表示の Flash を使用する Clipboard Copy ソリューションがありました。ただし、最新の Flash Player 10 では、Flash 上でクリップボードをアクティブにする操作のみが可能です。そこでZero Clipboardではこれを改良し、ボタンの上に透明なFlashをフロートさせることで、実際にクリックされるのはボタンではなくFlashとなり、Flashのコピー機能が利用できるようになりました。
ゼロ クリップボードの使用方法
まず、Zero Clipboard をダウンロードして解凍します。 ZeroClipboard.js と ZeroClipboard.swf の 2 つのファイルが必要です。これらの 2 つのファイルをプロジェクトに配置します。
ゼロ クリップボード: [ホーム] [ダウンロード] [デモ]
コア関数
ステップ 1 、 ZeroClipboard.js ファイルをインポートします:
次に、ZeroClipboard.swf ファイルのパスを設定します。 :
ZeroClipboard.setMoviePath( "ZeroClipboard.swf" );
注: 上記の 2 つのファイル、ZeroClipboard.js と ZeroClipboard.swf のパスは、対応するファイルのパスに置き換える必要があります。あなたのプロジェクトで。または、絶対パスを指定することもできます。
次に使用します:
var Clip = new ZeroClipboard.Client(); // 新しいオブジェクトを作成します
clip.setHandCursor( true ); // マウスを手の形に設定します
clip.setText("haha"); // テキストを設定しますコピーされること。
// ボタンを登録します。パラメータは id です。このボタンをクリックするとコピーされます。
// このボタンは必ずしも入力ボタンである必要はなく、他の DOM 要素でも構いません。
clip.glue("copy-botton"); // 前の文と位置を入れ替えることはできません
このようにして、基本的な機能が実現され、設定されたテキストはボタンをクリックするとコピーされます。コピーされるテキストが固定されていることに気づいたかもしれませんが、入力ボックスの内容をコピーするなど、テキストを動的に変更したい場合はどうすればよいでしょうか。心配しないでください。それについては以下で説明します。
その他の機能
Zero Clipboard には他にもいくつかの機能があり、その中には非常に便利なものもあります。
reposition() メソッド
ボタン上に Flash ボタンがフローティングしているため、ページサイズが変わると Flash ボタンが位置を間違えてクリックできなくなる場合があります。 関係ありませんが、Zero Clipboard には、Flash ボタンの位置を再計算できる reposition() メソッドが用意されています。これをサイズ変更イベントにバインドできます。
bind(window, "resize", function (){
clip.reposition();
});
bind は、クロスブラウザー イベント バインディング関数です。詳細については、
4 つの重要なクロスブラウザ機能 を参照してください。
hide() メソッドと show() メソッド
これら 2 つのメソッドは、Flash ボタンを非表示にしたり表示したりできます。 show() メソッドは reposition() メソッドを呼び出します。
setCSSEffects() メソッド
マウスがボタンの上に移動するかクリックすると、CSS の「:hover」、「:active」などの疑似クラスやその他の疑似クラスが無効になる場合があります。フラッシュボタンが邪魔になる。 setCSSEffects() メソッドはこの問題を解決します。まず、疑似クラスをクラスに変更する必要があります。例:
#copy-botton:hover{
border-color:#FF6633;
/*次の「 :hover」を「.hover」に変更しました */
#copy-botton.hover{
border-color:#FF6633;
}
clip.setCSSEffects( true ); したがって、Zero Clipboard はそれを自動的に処理します: class.hover を擬似 class:hover として扱います。
getHTML() メソッド
Zero Clipboard 添付メソッドを使用せずに自分で Flash をインスタンス化したい場合は、このメソッドが役に立ちます。フラッシュの幅と高さという 2 つのパラメータを受け入れます。返されるのはFlashに対応したHTMLコードです。例:
var html = Clip.getHTML( 150, 20 );
出力には innerHTML または document.write(); を直接使用できます。
以下は、私のテストで出力された HTML コードです:
コードをコピーします コードは次のとおりです。
IE の Flash JavaScript 通信インターフェイスにバグがあります。既存の DOM 要素にオブジェクト タグを挿入する必要があります。 innerHTML を記述する前に、appendChild メソッドを使用して要素が DOM に挿入されていることを確認してください。
Zero Clipboard イベントの処理
Zero Clipboard にはいくつかのイベントが用意されており、これらのイベントを処理するために関数をカスタマイズできます。 Zero Clipboard イベント処理関数は addEventListener() です。たとえば、Flash が完全にロードされると、イベント「load」がトリガーされます。
clip.addEventListener( "load", function (client) {
alert("Flash がロードされました!")
});
ゼロ クリップボードはパラメータとしてクリップ オブジェクトを渡します。上記の例では「クライアント」がそれです。
「load」も「onLoad」と書くこともできますし、他のイベントもこのように書くことができます。
その他のイベントには次のものがあります:
mouseOver マウス移動イベント
mouseOut マウス移動イベント
mouseDown マウスダウンイベント
mouseUp マウスリリースイベント
完全コピー成功イベント
より一般的には、mouseOver イベントと complete イベントが使用されます。
前に述べたように、コピーするコンテンツを動的に変更する必要がある場合は、mouseOver イベントが便利です。たとえば、id が test の入力ボックスの値を動的にコピーする必要がある場合、マウスを置いたときに値をリセットできます。
clip.addEventListener( "mouseOver", function (client) {
var test = document.getElementById("test");
client.setText( test.value ) // コピーする値をリセットします
コピーが成功しました:
クリップ。 addEventListener( "complete", function(){
alert("コピーに成功しました!");
});
さて、ここで終わりにしましょう。今すぐ自分で試してみてください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
