Zero Clipboard js swfに実装されたコピー機能の使い方_基礎知識

コピー機能は開発でよく使用され、IE では比較的簡単に実装できます。しかし、クロスブラウザを実現するのはさらに困難です。この記事では、クロスブラウザー ライブラリ クラス Zero Clipboard を紹介します。コピーには Flash を使用するため、ブラウザに Flash がインストールされていれば実行でき、IE の document.execCommand("Copy") よりも柔軟です。

Zero Clipboard の実装原理
Zero Clipboard はコピーに Flash を使用します 以前の Clipboard Copy ソリューションでは、非表示の Flash が使用されていました。ただし、最新の Flash Player 10 では、Flash 上でクリップボードをアクティブにする操作のみが可能です。そこでZero Clipboardではこれを改良し、ボタンの上に透明なFlashをフロートさせることで、実際にクリックされるのはボタンではなくFlashとなり、Flashのコピー機能が利用できるようになりました。

Zero Clipboardの使い方
まずZero Clipboardをダウンロードし、解凍します。 ZeroClipboard.js と ZeroClipboard.swf の 2 つのファイルが必要です。これらの 2 つのファイルをプロジェクトに配置します。

ダウンロード アドレス
Zero Clipboard オープン ソース JavaScript フラッシュ コピー ライブラリ クラス

デモ アドレス:
http://demo.jb51.net /js/ZeroClipboard/index.html

コア関数
最初のステップは、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 は、クロスブラウザー イベント バインディング関数です。
=========================================== === ==========
これは誰もが知っているはずです。 IE のイベント バインディング関数はattachEvent ですが、Firefox と Safari は addEventListener です。カプセル化は以下で行われます。

コードをコピー コードは次のとおりです:

/*************************************
* イベント バインディングを追加
* @param obj:イベントがバインドされる要素
* @param type: イベント名。 「on」を追加しないでください。例: 「onclick」の代わりに「click」。 ******* *****************/
function binding( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e' type fn] = fn;
obj[type fn] = function(){obj; ['e ' type fn]( window.event );}
obj.attachEvent( 'on' type, obj[type fn] );
} else
obj.addEventListener( type, fn, false );
}


たとえば、ページ クリック イベントを追加します:

コードをコピーします コードは次のとおりです:

bind(document, "click", function() {

alert("Hello, World!!");
}); >

=========================================== === ==========
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;
}

Zero Clipboard が自動的に処理するように、clip.setCSSEffects( true ) を呼び出すことができます。私たちの場合: class.hover を疑似クラス :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("Flashloaded!");
});
Zero Clipboard はクリップ オブジェクトをパラメータとして渡します。入力。上記の例では「クライアント」がそれです。
「load」も「onLoad」と書くこともできますし、他のイベントもこのように書くことができます。

その他のイベントには次のものがあります:

mouseOver マウス アップ イベント
mouseOut マウス アウト イベント
mouseDown マウス ダウン イベント
mouseUp マウス アップ イベント
complete Copy Success イベント
このうち、mouseOverイベントとcompleteイベントがよく使われます。
前に述べたように、コピーするコンテンツを動的に変更する必要がある場合は、mouseOver イベントが便利です。たとえば、id が test の入力ボックスの値を動的にコピーする必要がある場合、マウスを置いたときに値をリセットできます。

clip.addEventListener( "mouseOver", function(client) {
var test = document.getElementById("test");
client.setText( test.value ); // 値をリセット
});
コピーに成功しました:

clip.addEventListener( "complete", function(){
alert("コピーに成功しました!");
} );
さて、ここで紹介しましょう。今すぐ自分で試してみてください。