Cara menggunakan pemalam salinan teks silang penyemak imbas Jquery Zero Clipboard_jquery

Apabila pembangun perlu mengklik dan menyalin bahagian tertentu teks, agak mudah untuk melaksanakannya di bawah IE. Tetapi lebih sukar untuk mencapai penyemak imbas silang. Papan Klip Sifar menggunakan Flash untuk menyalin, jadi ia boleh dijalankan selagi penyemak imbas mempunyai Flash dipasang, dan lebih fleksibel daripada document.execCommand IE("Salin").

Prinsip pelaksanaan Papan Klip Sifar

Papan Klip Sifar menggunakan Flash untuk menyalin Terdapat penyelesaian Salin Papan Klip sebelumnya, yang menggunakan Flash tersembunyi. Tetapi Flash Player 10 terkini hanya membenarkan operasi pada Flash untuk mengaktifkan papan keratan. Jadi Zero Clipboard menambah baik ini dan menggunakan Flash lutsinar untuk terapung di atas butang Dengan cara ini, apa yang sebenarnya diklik bukanlah butang tetapi Flash, dan fungsi salinan Flash boleh digunakan.

Ciri Papan Klip Sifar:
Serasi dengan Flash 10
Elakkan menggunakan pemalam penyemak imbas pihak ketiga (konflik keselamatan dalam pelayar Adobe Flash)
Liputan tidak kelihatan, tiada gangguan, Reka Bentuk halaman
Menyokong keadaan "legar" dan "aktif" CSS
Memelihara peristiwa "klik", "masuk tetikus" dan "mouseleave" elemen sasaran
Menyediakan fungsi panggil balik "salin sebelum" dan "salin"
Amat sangat ringan! (7KB pekat)

Muat turun Papan Klip Sifar dan nyahzipnya. Dua fail diperlukan: ZeroClipboard.js dan ZeroClipboard.swf Letakkan kedua-dua fail ini ke dalam projek anda.
Klik untuk memuat turun: jquery.zclip.1.1.1

Penggunaan:

1. ) Mula-mula perkenalkan fail teras

Kod adalah seperti berikut:

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

2.) Tulis modul fungsi dalam kod halaman dan tentukan maklumat atribut elemen butang salin

<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>

Contoh 1:

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

Contoh 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.) Menyediakan fungsi panggil balik tersuai.

<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.) Parameter lalai.

Pengenalan sambungan:
1.) Diuji untuk serasi dengan IE6, IE7, IE8, FF 3.6, Chrome 8, Safari 5, Opera 11
2.) Kesan CSS yang sesuai:

/* 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 {...}

Demo dalam talian:
1 http://demo.jb51.net/js/2016/jquery_zclip/demo1.html
2 .jb51.net/js/2016/jquery_zclip/demo2.html

Pada ketika ini, pengenalan cara menggunakan pemalam telah selesai Bagi pembangun pengguna, sambungan yang tinggal mestilah berdasarkan keperluan Ia telah diselesaikan.

Di atas ialah kaedah penggunaan kandungan Jquery salin teks silang pelayar Sifar Clipboard_jquery untuk kandungan yang lebih berkaitan, sila perhatikan tapak web PHP Cina (www.php.cn)!