Zero Clipboard에서 구현한 복사 기능 사용법 js swf_기본지식

복사 기능은 개발 시 자주 사용되며 IE에서 구현하는 것이 비교적 간단합니다. 그러나 크로스 브라우저를 구현하는 것이 더 어렵습니다. 이 기사에서는 크로스 브라우저 라이브러리 클래스인 Zero Clipboard를 소개합니다. 복사에 Flash를 사용하므로 브라우저에 Flash가 설치되어 있는 한 실행할 수 있으며 IE의 document.execCommand("Copy")보다 더 유연합니다.

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

제로클립보드 사용법
먼저 제로클립보드를 다운받고 압축을 풀어주세요. ZeroClipboard.js와 ZeroClipboard.swf라는 두 개의 파일이 필요합니다. 이 두 파일을 프로젝트에 넣으세요.

다운로드 주소
제로 클립보드 오픈 소스 JavaScript 플래시 카피 라이브러리 클래스

데모 주소:
http://demo.jb51.net /js/ZeroClipboard/index.html

핵심 기능
첫 번째 단계는 ZeroClipboard.js 파일을 가져오는 것입니다.


ZeroClipboard.swf 파일의 경로를 설정합니다:

ZeroClipboard.setMoviePath( "ZeroClipboard.swf" );
참고: 위의 두 파일인 ZeroClipboard.js와 ZeroClipboard.swf의 경로는 프로젝트의 해당 파일 경로로 대체되어야 합니다. 아니면 절대 경로일 수도 있습니다.

그런 다음 다음을 사용하세요.

코드 복사 코드는 다음과 같습니다.

varclip = new ZeroClipboard.Client(); // 새 객체 생성
clip.setHandCursor( true ) // 마우스를 손 유형으로 설정
clip.setText("하하 "); / / 복사할 텍스트를 설정합니다.
// 버튼을 등록합니다. 매개변수는 id입니다. 이 버튼을 클릭하면 복사됩니다.
//이 버튼은 반드시 입력 버튼일 필요는 없으며 다른 DOM 요소일 수도 있습니다.
clip.glue("copy-botton"); // 이전 문장과 위치를 바꿀 수 없습니다.

이렇게 하면 기본 기능이 구현되고, 설정된 텍스트를 버튼을 클릭하면 복사됩니다. 복사할 텍스트가 고정되어 있다는 것을 눈치채셨을 것입니다. 입력 상자의 내용을 복사하는 것과 같이 동적으로 변경하고 싶다면 어떻게 해야 할까요? 걱정하지 마세요. 아래에서 다루겠습니다.

기타 기능
Zero Clipboard는 몇 가지 다른 기능도 제공하며 그 중 일부는 매우 유용합니다.

reposition() 메소드
버튼 위에 플래시 버튼이 떠 있기 때문에 페이지 크기가 변경되면 플래시 버튼이 잘못 배치되어 클릭이 되지 않을 수 있습니다. 문제가 되지 않습니다. Zero Clipboard는 플래시 버튼의 위치를 ​​다시 계산할 수 있는 reposition() 메서드를 제공합니다. 이를 크기 조정 이벤트에 바인딩할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

bind(window, "resize", function (){
clip.reposition();
});

bind는 브라우저 간 이벤트 바인딩 기능입니다.
============================================= === ==========
이건 다들 아셔야 합니다. IE의 이벤트 바인딩 기능은 attachmentEvent이고, Firefox와 Safari는 addEventListener입니다. Opera는 둘 다 지원합니다. 캡슐화는 아래에서 수행됩니다.

코드 복사 코드는 다음과 같습니다.

/************************************
* 이벤트 바인딩 추가
* @param obj: The 이벤트가 바인딩될 요소
* @param 유형: 이벤트 이름. "on"을 추가하지 마세요. 예: "onclick" 대신 "click".
* @param fn: 이벤트 처리 기능
******************** ***** *****************/
function 바인딩( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e' type fn] = fn
obj[type fn] = function(){obj; ['e ' type fn]( window.event );}
obj.attachEvent( 'on' type, obj[type fn] )
} else
obj.addEventListener( type, fn, false );
}

예를 들어 페이지 클릭 이벤트를 추가합니다.

코드 복사 코드는 다음과 같습니다.

bind(document, "click", function() {
alert("Hello, World!!");
}); >

============================================= === ==========
hide() 및 show() 메소드
이 두 메소드는 Flash 버튼을 숨기거나 표시할 수 있습니다. show() 메서드는 reposition() 메서드를 호출합니다.

setCSSEffects() 메서드
마우스를 버튼 위로 이동하거나 클릭하면 CSS ":hover", ":active"와 같은 의사 클래스 및 기타 의사 클래스가 다음으로 인해 유효하지 않게 될 수 있습니다. 플래시 버튼을 방해합니다. setCSSEffects() 메서드는 이 문제를 해결합니다. 먼저 의사 클래스를 클래스로 변경해야 합니다. 예를 들어

코드 복사 코드는 다음과 같습니다.

#copy-botton:hover{
border-color:#FF6633;
}
// ":hover"에서 ".hover"로 변경 가능
#copy-botton.hover {
border-color:#FF6633;
}

Zero Clipboard가 자동으로 처리하도록 clips.setCSSEffects( true )를 호출할 수 있습니다. 우리를 위해: class.hover를 가상 클래스인 hover로 취급합니다.

getHTML() 메소드
Zero Clipboard 첨부 메소드를 사용하지 않고 Flash를 직접 인스턴스화하려는 경우 이 메소드가 도움이 될 수 있습니다. 이는 플래시의 너비와 높이라는 두 가지 매개변수를 허용합니다. 반환되는 것은 Flash에 해당하는 HTML 코드입니다. 예를 들면 다음과 같습니다.

var html = clips.getHTML( 150, 20 )
innerHTML 또는 document.write()를 직접 사용할 수 있습니다.
다음은 내 테스트에서 출력된 HTML 코드입니다.


IE의 Flash JavaScript 통신 인터페이스에 버그가 있습니다. 기존 DOM 요소에 객체 태그를 삽입해야 합니다. 그리고 innerHTML을 작성하기 전에 요소가appendChild 메소드를 사용하여 DOM에 삽입되었는지 확인하세요.

Zero Clipboard 이벤트 처리
Zero Clipboard는 일부 이벤트를 제공하며, 이러한 이벤트를 처리하기 위해 기능을 사용자 정의할 수 있습니다. Zero Clipboard 이벤트 처리 함수는 addEventListener()입니다. 예를 들어 Flash가 완전히 로드되면 이벤트 "load"가 트리거됩니다.

clip.addEventListener( "load", function(client) {
alert("Flash added!");
})
Zero Clipboard는 클립 개체를 매개변수로 전달합니다. 입력하다. 위의 예에서는 "클라이언트"입니다.
또한 "load"는 "onLoad"로 쓸 수 있고, 다른 이벤트도 이렇게 쓸 수 있습니다.

기타 이벤트는 다음과 같습니다.

mouseOver 마우스 업 이벤트
mouseOut 마우스 아웃 이벤트
mouseDown 마우스 다운 이벤트
mouseUp 마우스 업 이벤트
완료 복사 성공 이벤트
그 중 mouseOver 이벤트와 Complete 이벤트가 더 많이 사용됩니다.
앞서 언급했듯이 복사할 콘텐츠를 동적으로 변경해야 하는 경우 mouseOver 이벤트가 유용할 수 있습니다. 예를 들어, 테스트 ID를 사용하여 입력 상자의 값을 동적으로 복사해야 하는 경우 마우스가 위에 있을 때 값을 재설정할 수 있습니다.

clip.addEventListener( "mouseOver", function(client) {
var test = document.getElementById("test");
client.setText( test.value ); // 값 재설정
});
복사 성공:

clip.addEventListener( "complete", function(){
alert("복사 성공!");
} );
자, 여기서 소개하겠습니다. 지금 직접 사용해 보세요.