首頁 > web前端 > js教程 > jQuery zclip外掛程式實作跨瀏覽器複製功能_jquery

jQuery zclip外掛程式實作跨瀏覽器複製功能_jquery

WBOY
發布: 2016-05-16 15:34:05
原創
1320 人瀏覽過

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

1、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">复  制</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');//完全移除複製功能

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

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

以上就是小編整理的關於jQuery zclip插件實現跨瀏覽器複製功能的全部內容,希望對大家的學習有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板