So verwenden Sie das browserübergreifende JQuery-Textkopier-Plug-In Zero Clipboard_jquery

Wenn Entwickler auf einen bestimmten Teil des Textes klicken und ihn kopieren müssen, ist die Implementierung im IE relativ einfach. Es ist jedoch schwieriger, browserübergreifend zu arbeiten. Zero Clipboard verwendet Flash zum Kopieren, kann also ausgeführt werden, solange Flash im Browser installiert ist, und ist flexibler als document.execCommand("Copy") des IE.

Das Implementierungsprinzip von Zero Clipboard

Zero Clipboard verwendet Flash zum Kopieren. Es gab zuvor eine Lösung zum Kopieren der Zwischenablage, die einen versteckten Flash verwendete. Der neueste Flash Player 10 erlaubt jedoch nur Vorgänge in Flash, um die Zwischenablage zu aktivieren. Deshalb hat Zero Clipboard dies verbessert und einen transparenten Flash verwendet, der über der Schaltfläche schwebt. Auf diese Weise wird tatsächlich nicht auf die Schaltfläche, sondern auf den Flash geklickt, und die Kopierfunktion von Flash kann verwendet werden.

Keine Zwischenablagefunktionen:
Kompatibel mit Flash 10
Vermeiden Sie die Verwendung von Browser-Plugins von Drittanbietern (Sicherheitskonflikte in Adobe Flash-Browsern)
Unsichtbare Abdeckung, keine Beeinträchtigung, Seitendesign
Unterstützt CSS-Zustände „Hover“ und „Aktiv“
Behält die Ereignisse „click“, „mouseenter“ und „mouseleave“ des Zielelements bei
Bietet Rückruffunktionen „Kopieren vor“ und „Kopieren“
Extrem geringes Gewicht! (7 KB komprimiert)

Laden Sie zuerst Zero Clipboard herunter und entpacken Sie es. Es sind zwei Dateien erforderlich: ZeroClipboard.js und ZeroClipboard.swf. Fügen Sie diese beiden Dateien in Ihr Projekt ein.
Zum Herunterladen klicken: jquery.zclip.1.1.1

Verwendung:

1. ) Stellen Sie zunächst die Kerndatei vor

Der Code lautet wie folgt:

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

2.) Schreiben Sie den Funktionsbaustein in den Seitencode und definieren Sie die Attributinformationen des Kopierschaltflächenelements

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

Beispiel 1:

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

Beispiel 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.) Stellen Sie eine benutzerdefinierte Rückruffunktion bereit.

<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.) Standardparameter.

Einführung in die Erweiterung:
1.) Getestet auf Kompatibilität mit IE6, IE7, IE8, FF 3.6, Chrome 8, Safari 5, Opera 11
2.) Passende CSS-Effekte:

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

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

Zu diesem Zeitpunkt ist die Einführung in die Verwendung des Plug-Ins abgeschlossen. Für Benutzerentwickler müssen die verbleibenden Erweiterungen auf den Anforderungen basieren . Es ist erledigt.

Das Obige ist die Verwendungsmethode des browserübergreifenden Textkopier-Plug-ins Zero Clipboard_jquery. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!