>웹 프론트엔드 >JS 튜토리얼 >Js Flash는 클립보드 Operation_javascript 기술에 대한 액세스를 구현합니다.

Js Flash는 클립보드 Operation_javascript 기술에 대한 액세스를 구현합니다.

WBOY
WBOY원래의
2016-05-16 17:48:071196검색

최근에는 버튼을 클릭하여 링크를 복사하여 이 문제를 해결해야 했습니다. 마침내 클립보드 작업
을 구현하는 오픈 소스 js Flash인 ZeroClipBoard 솔루션을 찾았습니다. 그러나 많은 예제를 검색한 결과 대부분 페이지에 대해 하나의 고정 복사 작업만 도입하는 것으로 나타났습니다
.
그리고 내 요구사항은
동적 리피터가 각 주소와 복사 버튼을 동적으로 로드합니다.
이 솔루션의 원리는 다음과 같습니다.
js를 사용하여 투명 플래시를 동적으로 로드한 다음 클릭하려는 버튼 위에 덮고 이벤트를 플래시의 호스팅 요소에 바인딩하여 값을 동적으로 전송합니다. 플래시로 이동하여 플래시를 사용하여 클립보드에 액세스합니다.
이 때 문제가 발생합니다. 플래시에 여러 개의 버튼을 추가하면 메모리가 많이 소모되고 동적 코드를 작성하기가 쉽지 않습니다.
최종 해결 방법은 다음과 같습니다.

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



1. Body Absolute 위치에 숨겨진 플래시 컨테이너
코드 복사 코드는 다음과 같습니다.

varLocalUrlManage ={
Clip:null,
ClipContainer:null,
InitClip:function(){
LocalUrlManage.Clip=newZeroClipboard.Client()
LocalUrlManage.ClipContainer=$("#ClipSwf ");
LocalUrlManage.Clip .setHandCursor(true);
LocalUrlManage.Clip.setCSSEffects(true);
LocalUrlManage.Clip.addEventListener("complete",function(client,text){
Tip.RightTip("#UrlAdd", text "," "복사 성공!");
LocalUrlManage.ClipContainer.html(LocalUrlManage.Clip.getHTML(80,25)); }}


2. 페이지 로딩 시 js를 이용하여 클립보드 객체를 초기화하고 마우스 제스처와 호스팅 컨테이너를 설정한 후 플래시를 html로 출력하여 컨테이너에 출력합니다


onmouseover="LocalUrlManage.SetClipValue(this,' #copyUrlValue<%#Eval("Id")%>')" >복사하려면 클릭하세요



SetClipValue:function(obj,SelectorEl){
//BrowserClip.IEClip($(SelectorEl).val()) ;
varoffset=$(obj).offset();
LocalUrlManage.ClipContainer.offset({left:offset.left,top:offset.top})
LocalUrlManage.Clip.setText($( SelectorEl).val());
}.


3. 이벤트를 각 복사 버튼에 동적으로 바인딩하고 해당 값이나 컨트롤을 함수에 전달합니다. 숨겨진 플래시 컨테이너의 상단 여백에 이벤트를 트리거하는 버튼 위에 떠 있도록 복사할 값을
Clip.setText('text')(플러그인에서 제공하는 메서드)를 통해 플래시에 전달합니다. ) 이는 여러 버튼을 복사하는 기능을 구현합니다.
버튼의 원래 hovercss 전환 효과는 그 이후에는 덜 유연해집니다. jquery를 사용하여 스타일을 동적으로 추가하는 효과는 그리 좋지 않습니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:클릭 화살표 이미지 전환_이미지 특수 효과를 구현하는 간단한 js 코드다음 기사:클릭 화살표 이미지 전환_이미지 특수 효과를 구현하는 간단한 js 코드

관련 기사

더보기