[jQuery] "copy to clipboard" 개발하기

클립보드로 복사하기 (zClip)

zClip는 "copy to clipboard" 기능을 만들어내는 jQuery 플러그인입니다. 

몇 줄의 코드를 삽입하는 작업으로 간단하게 "copy to clipboard" 기능을 만들어 낼 수 있습니다.

플러그인 파일은 아래 사이트에서 받을 수 있습니다.

http://www.steamdev.com/zclip/

페이지 하단에 보면은 다운로드와 사용 방법이 적혀있습니다.

jquery.zclip.min.js , ZeroClipboard.swf 파일을 다운받습니다.

사용법

1) jQuery 와 zClip 삽입 스크립트를 소스 상단에 추가합니다.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zclip.js"></script> 

2) <script> 블록 안에서, "copy button" 이 될 요소에 zClip 기능을 추가해 줍니다. 기본기능으로 클립보드에 내용 카피후 카피 된 내용이 alert 창으로 뜨게 됩니다.

$(document).ready(function(){

    $('a#copy-description').zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('p#description').text()
    });

    // The link with ID "copy-description" will copy
    // the text of the paragraph with ID "description"


    $('a#copy-dynamic').zclip({
        path:'js/ZeroClipboard.swf',
        copy:function(){return $('input#dynamic').val();}
    });

    // The link with ID "copy-dynamic" will copy the current value
    // of a dynamically changing input with the ID "dynamic"

}); 

3) 기본 alert 창을 수정하고 싶은경우 아래와 같이 사용자 정의 콜백을 사용합니다.

$(document).ready(function(){

    $("a#copy-callbacks").zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('#callback-paragraph').text(),
        beforeCopy:function(){
            $('#callback-paragraph').css('background','yellow');
            $(this).css('color','orange');
        },
        afterCopy:function(){
            $('#callback-paragraph').css('background','green');
            $(this).css('color','purple');
            $(this).next('.check').show();
        }
    });

}); 

4) 파라미터 & 기본값

Setting
Variable	Default Value	Available Values
path*	"ZeroClipboard.swf"	"path/to/ZeroClipboard.swf"
copy*	null	any string, or any javascript expression or function that returns a string
afterCopy	null	specify a function to call after text is copied.  (your afterCopy function will overwrite the default alert box.)
beforeCopy	null	specify a function to call before text is copied.
clickAfter	true	true  false
setHandCursor	true	true  false
setCSSEffects	true	true  false
* required