クリップボードコピー

rails

Rails で、http://www.steamdev.com/zclip/ を使って、クリップボードコピーを行った際のメモ。

必要なファイルのダウンロード



$ wget http://www.steamdev.com/zclip/js/jquery.zclip.js

$ wget http://zeroclipboard.googlecode.com/svn-history/r10/trunk/ZeroClipboard.swf

rails のプロジェクト配下にコピー



$ cp jquery.zclip.js app/assets/javascripts/jquery.zclip.js

$ cp ZeroClipboard.swf public/swf/zero_clipboard.swf

コピー対象データを テンプレートに記載

  • コピーする際のリンクを、 id="copy-table"で指定。
  • コピー対象をid="copy-to-clipbord"で指定。
<a href="#" id="copy-table" class="btn">コピー</a>
<div id="copy-to-clipbord">
  <table class="table table-striped table-bordered table-condensed">
     .....
  </table>
</div>

コピー処理を application.js に記述

  • さっき、指定した id を定義。
  • コピー前後で、スタイルを変えて、コピーしたことをが明示的にわかるようにしています。
// app/assets/javascripts/application.js 
$(document).ready(function(){
    $('a#copy-table').zclip({
        path:'/swf/zero_clipboard.swf',
        copy:$('#copy-to-clipbord').html(),
        beforeCopy:function(){
          $("#copy-table").removeClass("btn-success").addClass("btn-warning");
        },  
        afterCopy:function(){
          $("#copy-table").removeClass("btn-warning").addClass("btn-success");
        }   
    }); 
});