JqueryクロスブラウザテキストコピープラグインZero Clipboard

JqueryクロスブラウザテキストコピープラグインZero Clipboard_jqueryの使い方

PHP中文网

リリース： 2016-05-16 15:13:11

オリジナル

1363 人が閲覧しました

開発者がテキストの特定の部分をクリックしてコピーする必要がある場合、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のコピー機能が利用できるようになりました。

クリップボード機能なし:
Flash 10 と互換性があります
サードパーティのブラウザプラグインの使用を回避します (Adobe Flash ブラウザではセキュリティの競合)
目に見えない範囲、干渉なし、ページデザイン
CSS の「hover」および「active」状態をサポート
ターゲット要素の「click」、「mouseenter」、および「mouseleave」イベントを保持
コールバック関数「copy before」および「copy」を提供
非常に優れています軽量！ (7KB 圧縮)

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

使用法:

) まず、コアファイルを導入します

コードは次のとおりです。

<script type="text/javascript" 
src="js/jquery.js"></script>
<script type="text/javascript" 
src="js/jquery.zclip.js"></script>

ログイン後にコピー

2.) ページコードに汎用モジュールを記述し、コピーボタン要素の属性情報を定義します

<script language="javascript">
$(document).ready(function(){
   
    $(&#39;a#copy-description&#39;).zclip({
        path:&#39;js/ZeroClipboard.swf&#39;,
        copy:$(&#39;p#description&#39;).text()
    });
   
    // The link with ID "copy-description" will copy
    // the text of the paragraph with ID "description"
   
   
    $(&#39;a#copy-dynamic&#39;).zclip({
        path:&#39;js/ZeroClipboard.swf&#39;,
        copy:function(){return $(&#39;input#dynamic&#39;).val();}
    });
   
    // The link with ID "copy-dynamic" will copy the current value
    // of a dynamically changing input with the ID "dynamic"
   
});
</script>

ログイン後にコピー

例 1:

<a href="#" id="copy-description">点击复制效果预览</a>
<p 
id="description">文本源……</p>

ログイン後にコピー

例 2:

<a href="#" id="copy-dynamic">点击复制效果预览:</a><input 
style="width:300px; margin-left:15px;" type="text" id="dynamic" value="Insert 
any text here." onfocus="if(this.value==&#39;Insert any text here.&#39;){this.value=&#39;&#39;}" 
onblur="if(this.value==&#39;&#39;){this.value=&#39;Insert any text here.&#39;}" />

ログイン後にコピー

3.) カスタマイズされたコールバック関数を提供します。

<script language="javascript">
$(document).ready(function(){
   
    $("a#copy-callbacks").zclip({
        path:&#39;js/ZeroClipboard.swf&#39;,
        copy:$(&#39;#callback-paragraph&#39;).text(),
        beforeCopy:function(){
            $(&#39;#callback-paragraph&#39;).css(&#39;background&#39;,&#39;yellow&#39;);
            $(this).css(&#39;color&#39;,&#39;orange&#39;);
        },
        afterCopy:function(){
            $(&#39;#callback-paragraph&#39;).css(&#39;background&#39;,&#39;green&#39;);
            $(this).css(&#39;color&#39;,&#39;purple&#39;);
            $(this).next(&#39;.check&#39;).show();
        }
    });
   
});
</script>

ログイン後にコピー

3.) デフォルトのパラメータ。

拡張機能の紹介:
1.) IE6、IE7、IE8、FF 3.6、Chrome 8、Safari 5、Opera 11 との互換性をテスト済み
2.) 適切な CSS 効果:

/* zClip is a flash overlay, so it must provide */
/* the target element with 
"hover" and "active" classes */
/* to simulate native :hover and :active 
states. */
/* Be sure to write your CSS as follows for best results: 
*/
 
/*大概意思就是说 
ZeroClip是flash叠加……就是说flash叠加在了text文本上，其实显示文字可以根据css来定义*/
a:hover, a.hover 
{...}
a:active, a.active {...}

ログイン後にコピー

オンラインデモ:
1. http://demo.jb51.net/js/2016/jquery_zclip/demo1.html
2. .jb51.net/js/2016/jquery_zclip/demo2.html

この時点で、ユーザー開発者にとって、プラグインの使用方法の紹介は完了しました。残りの拡張機能はニーズに基づいて行う必要があります。決まりました。

上記は、Jquery クロスブラウザテキストコピープラグイン Zero Clipboard_jquery の使用方法です。その他の関連コンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) をご覧ください。