jQuery zclip插件實現(xiàn)跨瀏覽器復制功能
jQuery-zclip是一個復制內(nèi)容到剪貼板的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:待復制的內(nèi)容, 可以是靜態(tài)內(nèi)容, 也可以 return 動態(tài)內(nèi)容
beforeCopy:復制之前要做的function;
afterCopy:復制之后要做的function;
提供了3個方法
show:$(selected).zclip('show');//復制功能有效
hide:$(selected).zclip('hide');//復制功能無效
remove:$(selected).zclip('remove');//完全移除復制功能
2、演示效果
運行成功后,點擊復制按鈕,會彈出一個提示框,表示復制到剪切板生效了,如下:
彈出框出現(xiàn)“Copied text to clipboard”英文字符,有點不符國人使用習慣,把它改為“成功復制到剪切板”,在jquery.zclip.min.js文件中找到“Copied text to clipboard”替換成“成功復制到剪切板”就可以了,效果如下:
以上就是小編整理的關于jQuery zclip插件實現(xiàn)跨瀏覽器復制功能的全部內(nèi)容,希望對大家的學習有所幫助。
相關文章
Javascript中封裝window.open解決不兼容問題
window.open不兼容,其實不是, 因為不能直接執(zhí)行, 必須通過用戶手動觸發(fā)才行,下面有個實例,大家可以看看2014-09-09jquery UI實現(xiàn)autocomplete在獲取焦點時得到顯示列表功能示例
這篇文章主要介紹了jquery UI實現(xiàn)autocomplete在獲取焦點時得到顯示列表功能,結合實例形式分析了jquery UI實現(xiàn)autocomplete事件響應及顯示下拉列表功能操作技巧,需要的朋友可以參考下2019-06-06jQuery實現(xiàn)DIV響應鼠標滑過由下向上展開效果示例【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)DIV響應鼠標滑過由下向上展開效果,涉及jQuery基于事件響應結合stop與animate方法控制頁面元素屬性動態(tài)變換相關操作技巧,需要的朋友可以參考下2018-04-04javascript向后臺傳送相同屬性的參數(shù)即數(shù)組參數(shù)
在傳送參數(shù)時,經(jīng)常會碰到向后臺傳送一些相同屬性的參數(shù),最好的選擇是采用數(shù)組的方式,下面有個不錯的示例,大家可以參考下2014-02-02jQuery-1.9.1源碼分析系列(十一)DOM操作續(xù)之克隆節(jié)點
這篇文章主要介紹了jQuery-1.9.1源碼分析系列(十一)DOM操作續(xù)之克隆節(jié)點的相關資料,需要的朋友可以參考下2015-12-12jQuery+Ajax+js實現(xiàn)請求json格式數(shù)據(jù)并渲染到html頁面操作示例
這篇文章主要介紹了jQuery+Ajax+js實現(xiàn)請求json格式數(shù)據(jù)并渲染到html頁面操作,結合實例形式分析了jQuery+Ajax請求json格式數(shù)據(jù)并渲染到html頁面相關步驟與操作技巧,需要的朋友可以參考下2020-06-06