Jquery 크로스 브라우저 텍스트 복사 플러그인 Zero Clipboard_jquery를 사용하는 방법

개발자가 텍스트의 특정 부분을 클릭하여 복사해야 하는 경우 IE에서 구현하는 것이 비교적 간단합니다. 그러나 크로스 브라우저를 구현하는 것이 더 어렵습니다. Zero Clipboard는 복사에 Flash를 사용하므로 브라우저에 Flash가 설치되어 있는 한 실행할 수 있으며 IE의 document.execCommand("Copy")보다 더 유연합니다.

Zero Clipboard의 구현 원리

Zero Clipboard는 Flash를 사용하여 복사합니다. 이전에는 숨겨진 Flash를 사용하는 Clipboard Copy 솔루션이 있었습니다. 그러나 최신 Flash Player 10에서는 클립보드를 활성화하기 위한 Flash 작업만 허용됩니다. 그래서 Zero Clipboard는 이를 개선하여 투명한 Flash를 사용하여 버튼 위에 떠 있게 만들었습니다. 이렇게 하면 실제로 클릭되는 것은 버튼이 아닌 Flash이며, Flash의 복사 기능을 사용할 수 있습니다.

제로 클립보드 기능:
Flash 10과 호환
타사 브라우저 플러그인 사용 방지(Adobe Flash 브라우저의 보안 충돌)
보이지 않는 적용 범위, 간섭 없음, 페이지 디자인
CSS "hover" 및 "active" 상태 지원
대상 요소의 "click", "mouseenter" 및 "mouseleave" 이벤트 유지
"copy before" 및 "copy" 콜백 기능 제공
극도로 가벼운 무게! (7KB 축약)

먼저 제로클립보드를 다운받고 압축을 풀어주세요. ZeroClipboard.js와 ZeroClipboard.swf라는 두 개의 파일이 필요합니다. 이 두 파일을 프로젝트에 넣으세요.
다운로드 클릭: jquery.zclip.1.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 중국어 홈페이지(www.php.cn)를 참고해주세요!