이 기사에서는 크로스 브라우저 라이브러리 클래스인 Zero Clipboard를 소개합니다. 복사에 Flash를 사용하므로 브라우저에 Flash가 설치되어 있는 한 실행할 수 있으며 IE의 document.execCommand("Copy")보다 더 유연합니다.
제로클립보드 구현원리
Zero Clipboard는 복사에 Flash를 사용합니다. 이전에는 숨겨진 Flash를 사용하는 클립보드 복사 솔루션이 있었습니다. 그러나 최신 Flash Player 10에서는 클립보드를 활성화하기 위한 Flash 작업만 허용됩니다. 그래서 Zero Clipboard는 이를 개선하여 투명한 Flash를 사용하여 버튼 위에 떠 있게 만들었습니다. 이렇게 하면 실제로 클릭되는 것은 버튼이 아닌 Flash이며, Flash의 복사 기능을 사용할 수 있습니다.
제로클립보드 사용법
먼저 Zero Clipboard를 다운로드하고 압축을 풀어주세요. ZeroClipboard.js와 ZeroClipboard.swf라는 두 개의 파일이 필요합니다. 이 두 파일을 프로젝트에 넣으세요.
제로 클립보드: [홈] [다운로드] [데모]
핵심 기능
1단계 , ZeroClipboard.js 파일을 가져옵니다.
그런 다음 ZeroClipboard.swf 파일의 경로를 설정합니다. :
ZeroClipboard.setMoviePath( "ZeroClipboard.swf" )
참고: 위의 두 파일 ZeroClipboard.js 및 ZeroClipboard.swf의 경로를 해당 파일의 경로로 바꿔야 합니다. 당신의 프로젝트에서. 아니면 절대 경로일 수도 있습니다.
그런 다음
varclip = new ZeroClipboard.Client(); // 새 객체 생성
clip.setHandCursor( true ); // 마우스를 손 모양으로 설정
clip.setText("haha") // 텍스트 설정 복사할 수 있습니다.
// 버튼을 등록합니다. 매개변수는 id입니다. 이 버튼을 클릭하면 복사됩니다.
// 이 버튼은 반드시 입력 버튼일 필요는 없으며 다른 DOM 요소일 수도 있습니다.
clip.glue("copy-botton"); // 이전 문장과 위치를 바꿀 수 없습니다.
이렇게 하면 기본 기능이 구현되고, 설정된 텍스트를 버튼을 클릭하면 복사됩니다. 복사할 텍스트가 고정되어 있다는 것을 눈치채셨을 것입니다. 입력 상자의 내용을 복사하는 것과 같이 동적으로 변경하고 싶다면 어떻게 해야 할까요? 걱정하지 마세요. 아래에서 다루겠습니다.
기타 기능
Zero Clipboard는 몇 가지 다른 기능도 제공하며 그 중 일부는 매우 유용합니다.
reposition() 메소드
버튼 위에 플래시 버튼이 떠 있기 때문에 페이지 크기가 변경되면 플래시 버튼이 잘못 배치되어 클릭이 되지 않을 수 있습니다. 문제가 되지 않습니다. Zero Clipboard는 플래시 버튼의 위치를 다시 계산할 수 있는 reposition() 메서드를 제공합니다. 이를 크기 조정 이벤트에 바인딩할 수 있습니다.
bind(window, "resize", function (){
clip.reposition();
});
bind는 브라우저 간 이벤트 바인딩 기능입니다. 자세한 내용은
4가지 필수 크로스 브라우저 기능
을 참조하세요. hide() 및 show() 메소드
이 두 메소드는 Flash 버튼을 숨기거나 표시할 수 있습니다. show() 메서드는 reposition() 메서드를 호출합니다.
setCSSEffects() 메서드
마우스를 버튼 위로 이동하거나 클릭하면 CSS ":hover", ":active"와 같은 의사 클래스 및 기타 의사 클래스가 플래시 버튼을 방해합니다. setCSSEffects() 메서드는 이 문제를 해결합니다. 먼저 의사 클래스를 클래스로 변경해야 합니다. 예를 들어
#copy-botton:hover{
border-color:#FF6633
}
/*는 다음과 같습니다. 다음과 같이 변경되었습니다. " :hover"에서 ".hover" */
#copy-botton.hover{
border-color:#FF6633;
}
clip.setCSSEffects( true를 호출할 수 있습니다. ); 그러면 Zero Clipboard가 이를 자동으로 처리합니다. 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 (클라이언트) {
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("복사 성공!");
})
자, 여기서 멈추겠습니다. 지금 직접 사용해 보세요.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
