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

var Clip = new ZeroClipboard.Client(); // 新しいオブジェクトを作成します
clip.setHandCursor( true ); // マウスをハンドタイプに設定します
clip.setText("Haha "); // コピーするテキストを設定します。
// ボタンを登録します。パラメータは id です。このボタンをクリックするとコピーされます。
//このボタンは必ずしも入力ボタンである必要はなく、他の DOM 要素でも構いません。
clip.glue("copy-botton"); // 前の文と位置を入れ替えることはできません

bind(window, "resize", function (){
clip.reposition();
});

/*************************************
* イベント バインディングを追加
* @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 );
}


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

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

=========================================== === ==========
hide() メソッドと show() メソッド
これら 2 つのメソッドは、Flash ボタンを非表示にしたり表示したりできます。 show() メソッドは reposition() メソッドを呼び出します。

setCSSEffects() メソッド
マウスがボタン上に移動するかクリックすると、css ":hover"、":active" などの疑似クラスやその他の疑似クラスが無効になる場合があります。フラッシュボタンが邪魔になる。 setCSSEffects() メソッドはこの問題を解決します。まず、疑似クラスをクラスに変更する必要があります。例:

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("コピーに成功しました!");
} );
さて、ここで紹介しましょう。今すぐ自分で試してみてください。