jQuery外掛程式：跨瀏覽器複製jQuery-zclip

標籤：blog   http   io   使用   java   ar   strong   for   檔案   

jQuery-zclip是一個複製內容到剪貼簿的jQuery外掛程式，使用它我們不用考慮不同瀏覽器和瀏覽器版本之間的相容問題。jQuery-zclip外掛程式需要Flash的支援，使用時記得安裝Adobe Flash Player。

1、jQuery-zclip外掛程式官網
ZeroClipboard.swf

2、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">複&nbsp;&nbsp;制</a>    </div></div>

 

配置說明
path:swf的路徑(複製主要是用flash解決不同瀏覽器的複製)
copy:待覆制的內容, 可以是靜態內容, 也可以 return 動態內容
beforeCopy:複製之前要做的function;
afterCopy:複製之後要做的function;

提供了3個方法
show:$(selected).zclip(‘show‘);//複製功能有效
hide:$(selected).zclip(‘hide‘);//複製功能無效
remove:$(selected).zclip(‘remove‘);//完全移除複製功能

3、示範效果
運行成功後，點擊複製按鈕，會彈出一個提示框，表示複製到剪下板生效了，如下：

彈出框出現“Copied text to clipboard”英文字元，有點不符國人使用習慣，把它改為“成功複製到剪下板”，在jquery.zclip.min.js檔案中找到“Copied text to clipboard”替換成“成功複製到剪下板”就可以了，效果如下：

jQuery外掛程式：跨瀏覽器複製jQuery-zclip