[jQuery] 자바스크립트 클립보드 복사하기 (ZeroClipboard / zclip 라이브러리 이용)

기본적으로 자바스크립트에서 제공하는 함수로는 IE 에서만 클립보드 복사가 가능하다고 한다

그런데 웹앱에서 클립보드 복사 기능을 넣어야 하는 경우가 생겨서 알아보았더니

어떤 좋은분께서 플래시를 이용해서 클립보드 복사 기능을 사용할 수 있도록 만들어 놓았단 사실을 알았다 (재수!)

간단히 테스트를 해본 후에 실제 만들고 있는 jQuery Mobile을 이용한 웹앱 프로젝트에 적용했더니 동작이 안된다..

jQuery Mobile을 사용했다고 해서 무조건 적용 안되는 것이 아니라..

data-role="collapsible-set" 이런 문법을 사용한 곳에 적용이 안된다

이 방식은 아코디언(?) 메뉴를 만드는 것인데.. 기본적으로 접혀 있다가 제목을 클릭하면 하위 메뉴를 보여줄때 사용하면 좋다

몇시간 삽질한 결과.. ZeroClipBoard를 이용해서 이벤트를 등록해줄때는 당연히 미리 만들어진 엘리먼트에 적용해야 하는데

collapsible-set 이란 것을 사용하면 제목을 클릭했을때 엘리먼트를 만들어주기 때문에 동작이 안된다는 것을 알았다

뭐 어쨌든 그래서 결론은.. 

제목이 클릭될때 ZeroClipBoard 가 동작할수 있도록 이벤트 등록을 해주면 되는 것이다

대충 구조는 이렇게 생겨먹었다

<div data-role="content">

    <div data-role="collapsible-set">

        <div data-role="collapsible">

            // 내용

        </div>

        <div data-role="collapsible" id="info">

            <h3>여러정보</h3>

            <ul data-role="listview">

                <li>

                    <h4>ID</h4>

                    <p><a>꼬렙</a></p>

                </li>

                <li>

                    <h4>e-mail</h4>

                    <p><a>ggoreb@tistory.com</a></p>

                </li>

            </ul>

        </div>

    </div>

</div>

ID 와 e-mail 을 클릭하면 클립보드로 복사하는 기능을 구현한다고 가정하면..

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

<script type="text/javascript">

var makeFlag = false; // 클릭시 클립보드 복사 영역 한번만 생성

$(document).ready(function() {

$("#info").click(function() {

if(!makeFlag) {

$("#info a").each(function(i) {

if(i > 0) {

$(this).zclip({

path:'/js/mobile/ZeroClipboard.swf',

copy:$(this).text()

});

}

});

makeFlag = true;

}

});

});

</script>

이런 방법으로 만들어주면 된다

더 효율적인 방법도 많겠지만.. 일단 기능 구현이 우선이므로 -_-

번거롭게도 makeFlag 라는 변수를 만든 이유는 이렇게 하지 않으면 제목을 클릭할때 마다 이벤트를 등록하기 때문이다

그리고 each 문을 돌면서 i >0 이란 조건을 준 이유는 JQM이 자동으로 <a>엘리먼트를 하나 더 만들기 때문에 첫번째 <a> 는 무시하기 위해서이다

위 문법을 사용하려면 jquery.zclip.js 와 ZeroClipboard.swf 파일이 필요하다

jquery.zclip.js

ZeroClipboard.zip

자세한 정보는 아래 사이트를 참고하면 된다 

ZeroClipboard : http://code.google.com/p/zeroclipboard/

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