Comment utiliser le plug-in de copie de texte multi-navigateur Jquery Zero Clipboard_jquery

Lorsque les développeurs doivent cliquer et copier une certaine partie du texte, il est relativement simple de l'implémenter sous IE. Mais il est plus difficile de réaliser un cross-browser. Zero Clipboard utilise Flash pour la copie, il peut donc s'exécuter tant que Flash est installé sur le navigateur et est plus flexible que document.execCommand("Copy") d'IE.

Le principe de mise en œuvre de Zero Clipboard

Zero Clipboard utilise Flash pour copier Il existait une solution précédente de copie de presse-papiers, qui utilisait un Flash caché. Mais le dernier Flash Player 10 autorise uniquement les opérations sur Flash pour activer le presse-papiers. Zero Clipboard a donc amélioré cela et utilisé un Flash transparent pour flotter au-dessus du bouton. De cette façon, ce qui est réellement cliqué n'est pas le bouton mais le Flash, et la fonction de copie de Flash peut être utilisée.

Fonctionnalités zéro presse-papiers :
Compatible avec Flash 10
Évitez d'utiliser des plug-ins de navigateur tiers (conflits de sécurité dans les navigateurs Adobe Flash)
Couverture invisible, aucune interférence, conception de page
Prend en charge les états CSS "hover" et "active"
Préserve les événements "click", "mouseenter" et "mouseleave" de l'élément cible
Fournit les fonctions de rappel "copier avant" et "copier"
Extrêmement poids léger ! (7 Ko condensé)

Téléchargez d'abord Zero Clipboard et décompressez-le. Deux fichiers sont requis : ZeroClipboard.js et ZeroClipboard.swf. Mettez ces deux fichiers dans votre projet.
Cliquez pour télécharger : jquery.zclip.1.1.1

Utilisation :

1. ) Présentez d'abord le fichier principal

Le code est le suivant :

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

2.) Écrivez le module fonction dans le code de la page et définissez les informations d'attribut de l'élément du bouton de copie

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

Exemple 1 :

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

Exemple 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.) Fournir une fonction de rappel personnalisée.

<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.) Paramètres par défaut.

Présentation de l'extension :
1.) Testé pour être compatible avec IE6, IE7, IE8, FF 3.6, Chrome 8, Safari 5, Opera 11
2.) Effets CSS appropriés :

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

Démo en ligne :
1 http://demo.jb51.net/js/2016/jquery_zclip/demo1.html
2. .jb51.net/js/2016/jquery_zclip/demo2.html

À ce stade, l'introduction de la façon d'utiliser le plug-in est terminée. Pour les développeurs utilisateurs, les extensions restantes doivent être basées sur les besoins. .C’est réglé.

Ce qui précède est la méthode d'utilisation du plug-in de copie de texte multi-navigateur Jquery Zero Clipboard_jquery content. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !