최근에는 버튼을 클릭하여 링크를 복사하여 이 문제를 해결해야 했습니다. 마침내 클립보드 작업
을 구현하는 오픈 소스 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를 사용하여 스타일을 동적으로 추가하는 효과는 그리 좋지 않습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
