>  기사  >  웹 프론트엔드  >  jQuery zclip 플러그인은 브라우저 간 복사 function_jquery를 구현합니다.

jQuery zclip 플러그인은 브라우저 간 복사 function_jquery를 구현합니다.

WBOY
WBOY원래의
2016-05-16 15:34:051306검색

jQuery-zclip은 콘텐츠를 클립보드에 복사하는 jQuery 플러그인입니다. 이를 사용하면 서로 다른 브라우저와 브라우저 버전 간의 호환성 문제를 고려할 필요가 없습니다. jQuery-zclip 플러그인을 사용하려면 Flash 지원이 필요합니다. 사용 시 Adobe Flash Player를 설치해야 합니다.

1. jQuery-zclip 사용법

//引入jQuery-zclip相关js及swf文件
<script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/resources/js/jquery.zclip.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#cp-btn").zclip({
    path:'<%=path%>/resources/js/ZeroClipboard.swf', //记得把ZeroClipboard.swf引入到项目中 
    copy:function(){
      return $('#inviteUrl').val();
    }
  });
});
</script>

<div class=form-row>
  <div class=col-md-5>
    <input class=form-control value="" id="inviteUrl"/>
  </div>
  <div class=col-md-1>
    <a href="javascript:void(0)" id="cp-btn"
      class="btn btn-default btn-block btn-clean">复  制</a>
  </div>
</div>

구성 지침
경로:swf의 경로(복사는 주로 플래시를 사용하여 다른 브라우저의 복사를 해결합니다.)
복사:복사할 콘텐츠는 정적 콘텐츠일 수도 있고 동적 콘텐츠를 반환할 수도 있습니다
beforeCopy:전에 수행할 기능을 복사합니다.
afterCopy:복사 후 수행할 기능;

3가지 방법 제공
show:$(selected).zclip('show');//복사 기능이 유효합니다
hide:$(selected).zclip('hide');//복사 기능이 유효하지 않습니다
Remove:$(selected).zclip('remove');//복사 기능 완전 제거

2. 시연효과
작업이 성공한 후 복사 버튼을 클릭하면 다음과 같이 클립보드에 복사가 적용되었음을 알리는 프롬프트 상자가 나타납니다.

팝업 상자에 "Copied text to clipsboard"라는 영어 문자가 나타나는데 이는 중국어 사용 습관과 약간 일치하지 않습니다. jquery에서 "Copied"를 찾으세요. .zclip.min.js 파일 "텍스트를 클립보드에 복사"를 "클립보드에 성공적으로 복사됨" 으로 바꾸면 효과는 다음과 같습니다.

위 내용은 모두 jQuery zclip 플러그인의 크로스 브라우저 복사 기능에 대해 편집자가 정리한 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.