JavaScript 플래시 복사 라 이브 러 리 클래스 제로 클립보드

본 고 는 브 라 우 저 를 뛰 어 넘 는 라 이브 러 리 제로 클립 보드 를 소개 할 것 이다.플래시 를 이용 하여 복사 하기 때문에 브 라 우 저 에 플래시 가 설치 되 어 있 으 면 실행 할 수 있 으 며 IE 의 document.execCommand("Copy")보다 더욱 유연 합 니 다.
제로 클립 보드 의 실현 원리
Zero Clipboard 는 Flash 를 이용 하여 복 제 했 는데 이전 에는Clipboard Copy솔 루 션 이 있 었 고 숨겨 진 Flash 를 이용 했다.그러나 최신 Flash Player 10 은 Flash 에서 만 조작 이 가능 해 야 클립보드 가 시 작 됩 니 다.그래서 Zero Clipboard 는 이 를 개선 하고 투명 한 Flash 를 사용 하여 버튼 위 에 떠 있 게 했다.그러면 버튼 이 아니 라 Flash 를 클릭 하면 Flash 의 복사 기능 을 사용 할 수 있다.
제로 클립 보드 를 어떻게 사용 합 니까?
먼저 제로 클립 보드 를 다운로드 하고 압축 을 풀 어 줍 니 다.두 개의 파일 이 필요 합 니 다:ZeroClipboard.js 와 ZeroClipboard.swf.이 두 파일 을 프로젝트 에 넣 으 십시오.Zero Clipboard:[홈 페이지][다운로드]핵심 기능 첫 번 째 단계,ZeroClipboard.js 파일 가 져 오기:ZeroClipboard.swf 파일 을 다시 설정 하 는 경로:ZeroClipboard.setMoviePath("ZeroClipboard.swf");메모:위의 ZeroClipboard.js,ZeroClipboard.swf 두 파일 의 경 로 는 프로젝트 에 대응 하 는 파일 의 경로 로 바 꿔 야 합 니 다.아니면 절대적 인 경로 일 수도 있 습 니 다.그 다음 에 사용 했다.

 
var clip = new ZeroClipboard.Client(); //        
clip.setHandCursor( true ); //         
clip.setText("  "); //         。 
//      button，    id。     button     。 
//    button          input   ，       DOM   。 
clip.glue("copy-botton"); //            

이렇게 하면 기본 적 인 기능 이 실현 되 고 단 추 를 누 르 면 설 정 된 텍스트 를 복사 할 수 있다.복사 할 텍스트 가 고정 되 어 있 음 을 알 수 있 습 니 다.동적 으로 바 꾸 려 면 어떻게 해 야 합 니까?예 를 들 어 입력 상자 의 내용 을 복사 하 는 것 입 니 다.걱정 마 세 요.다음 에 말씀 드 리 겠 습 니 다.다른 함수 Zero Clipboard 는 다른 함수 도 제공 하 는데 그 중 일 부 는 매우 유용 합 니 다.reposition()방법 은 단추 에 Flash 단추 가 떠 있 기 때문에 페이지 크기 가 변 할 때 Flash 단추 가 잘못 눌 릴 수 있 습 니 다.이렇게 하면 켜 지지 않 습 니 다.괜 찮 습 니 다.Zero Clipboard 는 플래시 단추 의 위 치 를 다시 계산 할 수 있 는 reposition()방법 을 제공 합 니 다.우 리 는 그것 을 resize 이벤트 에 연결 할 수 있 습 니 다.

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

bid 는 브 라 우 저 를 뛰 어 넘 는 이벤트 바 인 딩 함수 입 니 다.자세 한 내용 은[시연]을 보십시오.hide()와 show()방법 은 플래시 단 추 를 숨 기 고 표시 할 수 있 습 니 다.그 중에서 show()방법 은 reposition()방법 을 호출 합 니 다.setCSSEffects()방법 은 마우스 가 단추 로 이동 하거나 클릭 할 때 Flash 단추 가 가 려 져 있 기 때문에 css":hover","active"등 위 류 는 효력 을 잃 을 수 있 습 니 다.setCSSEffects()방법 은 바로 이 문 제 를 해결 하 는 것 이다.우선 위 류 를 클래스 로 바 꿔 야 합 니 다.예 를 들 어\#copy-botton:hover{border-color:\#FF 6633;}/*다음":hover"를"hover"*/\#copy-botton.hover{border-color:\#FF 6633;}으로 변경 할 수 있 습 니 다.클립.setCSSEffects(true)를 호출 할 수 있 습 니 다.이렇게 하면 Zero Clipboard 는 자동 으로 처리 합 니 다.클래스.hover 를 가짜 클래스 로 생각 합 니 다:hover.getHTML()방법 은 플래시 를 실례 하고 싶다 면 제로 클립 보드 의 부착 방법 을 사용 하지 않 으 면 이 방법 이 도움 이 될 것 입 니 다.그것 은 Flash 의 너비 와 높이 로 두 개의 인 자 를 받 아들 입 니 다.플래시 에 대응 하 는 HTML 코드 를 되 돌려 줍 니 다.예 를 들 어 var html=clip.getHTML(150,20);innerHTML 이나 직접 document.write()를 사용 할 수 있 습 니 다.출력 을 진행 하 다.다음은 제 가 출력 한 HTML 코드 를 테스트 해 보 겠 습 니 다.

 
<embed id="ZeroClipboardMovie_1" src="zeroclipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="150" height="20" name="ZeroClipboardMovie_1" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&amp;width=150&amp;height=20" wmode="transparent" /> 

IE 의 Flash JavaScript 통신 인터페이스 에 bug 가 있 습 니 다.존재 하 는 DOM 요소 에 object 탭 을 삽입 해 야 합 니 다.또한 innerHTML 을 쓰기 전에 이 요소 가 appendChild 방법 으로 DOM 에 삽입 되 었 는 지 확인 하 십시오.Zero Clipboard 이벤트 처리 Zero Clipboard 는 이 벤트 를 사용자 정의 함수 로 처리 할 수 있 는 이 벤트 를 제공 합 니 다.제로 클립 보드 이벤트 처리 함 수 는 addEventListener()입 니 다.예 를 들 어 플래시 가 완전히 불 러 오 면 이벤트"load"가 실 행 됩 니 다.

 
clip.addEventListener( "load", function(client) { 
alert("Flash     ！"); 
}); 

제로 클립 보드 는 클립 대상 을 매개 변수 로 전달한다.상례 의"client"입 니 다.그리고'load'도'onLoad'라 고 쓸 수 있 고 다른 사건 도 그 럴 수 있 습 니 다.다른 이 벤트 는 mouseover 마우스 로 이벤트 mouseout 마 우 스 를 옮 겨 이벤트 mouseover 마 우 스 를 누 르 고 이벤트 mouseover 마 우 스 를 놓 으 면 이벤트 complete 복사 성공 이벤트 중 mouseover 이벤트 와 complete 이벤트 가 자주 사 용 됩 니 다.앞서 말 했 듯 이 복사 할 내용 을 동적 으로 바 꿔 야 한다 면 mouseover 사건 이 도움 이 될 것 이다.예 를 들 어 id 를 test 로 하 는 입력 상자 의 값 을 동적 으로 복사 해 야 합 니 다.마우스 오 버 를 할 때 값 을 다시 설정 할 수 있 습 니 다.

 
clip.addEventListener( "mouseOver", function(client) { 
var test = document.getElementById("test"); 
client.setText( test.value ); //           
}); 

복사 성공:

 
clip.addEventListener( "complete", function(){ 
alert("    ！"); 
}); 

됐 습 니 다.여기까지 소개 하 겠 습 니 다.어서 스스로 시험 해 보 세 요.