메뉴 건너뛰기

Zeroclipboard 적용하기

Average Rating:
10.0/10 1명 참여
Rate this page:
익명 (10)  
평점 한줄평 글쓴이 작성날짜
10
0 (-50939) 02/02 18:37

준비물 : 파일 2개 (ZeroClipboard.js, ZeroClipboard.swf)



http://zeroclipboard.org/


위의 홈페이지에서 ZeroClipboard 패키지 파일을 다운 받습니다.


다운받을 파일을 압축해제 하면 여러 폴더가 생성됩니다. 그중 dist 폴더에서 ZeroClipboard.jsZeroClipboard.swf 를 복사해 자신의 웹페이지에 올립니다.


zeroclipboard2.PNG




일쌤은 xe/modules/board/skins/rest_default/js/ 에 위의 두 파일을 복사해 넣었습니다.



xe/modules/board/skins/rest_default/view_document.html


<load target="js/ZeroClipboard.js" />



--중략--



<h3>

    <span id="copy-me">게시물 평점을 프로그래스바로 표현할 때, executeQuery를 사용해서 평점 바로 가져오는 방법<span>

    <i class="fa fa-clipboard btn" id="copy-button" data-clipboard-text="Copy Me!" data-toggle="tooltip" data-placement="top" title="Copy the title to Clipboard." data-clipboard-target="copy-me"></i>

</h3>



--중략--



<script>
// 자바스크립트는 html 파일의 가장 아래에 위치해야 잘 작동하는 것 같습니다.

// data-clipboard-target 을 정의해 주면, id가 copy-me 인 요소의 내용을 복사합니다.

// data-clipboard-target 를 정의하지 않으면, data-clipboard-text 의 내용을 클립보드에 복사합니다.


var client = new ZeroClipboard( document.getElementById("copy-button") );

client.on( "ready", function( readyEvent ) {
  // alert( "ZeroClipboard SWF is ready!" );

  client.on( "aftercopy", function( event ) {
    // `this` === `client`
    // `event.target` === the element that was clicked
    //event.target.style.display = "none";
    alert("Copied text to clipboard: " + event.data["text/plain"] );
  } );
} );

</script>



결과 :


zeroclipboard.PNG





제목줄 우측에 있는 클립보드 아이콘을 클릭하면

'게시물 평점을 프로그래스바로 표현할 때, executeQuery를 사용해서 평점 바로 가져오는 방법'이라는 제목이

클립보드에 복사됩니다.



제목 날짜
Star Rating 별점 위젯 업데이트 정보   2014.03.09
modules/editor/tpl.js/uploader.js  
Zeroclipboard 적용하기   file
    10
xe jQuery 최신버전 사용하기 CDN  
    10
http://www.bootstrapcdn.com/   file
태그 목록