javascript
JS 点击复制Copy插件--Zero Clipboard
寫博客就是一周工作中遇到哪些問題，一個優點就是能夠進行一個總結，另外一個優點就是下次遇到相同的問題即使那你記不住，也能夠翻看你的博客攻克了。相同也能夠幫到別人遇到與你一樣問題的人。或者別人有比你更好的解決的方法，能夠一起討論，分析出更好的解決方法。所以這是個好習慣。既然是好習慣，那就得堅持。
可是想寫好一篇博客好像不是那么easy的，由于你得有問題，不然你寫什么，手放在鍵盤上不知道敲啥?；蛘呤悄阕詣訉W習了，對你的學習進行了總結。然后你得有得寫。
這周公司同事分享的《貝葉斯方法》對我的感觸挺大的。好像對我的見識一下拓寬了。里面涉及到的統計學，心理學等等非常多學科，然后 我總結了自己，學東西好像都學到的是皮毛。沒有深入進去。貝葉斯算法還沒全然理清，在網上看了一些資料，僅僅能說略懂。當然這么好的東西一下子沒弄懂，那我就多花點時間唄。可是在沒全然弄懂之前，讓我寫一篇關于貝葉斯方法的博客我想對于我來說是有一定難度的。我試著去理解，還拿PPT給我女朋友大概講了一遍，方便自己增強記憶。她貌似是懂了。她一直覺得自己智商比我高。好吧，扯遠了。
這周還是寫一個工作中遇到的問題吧。
問題例如以下：
表格里面有非常多列，每一列的URL我都得復制。點復制則復制當前列的URL；
網上找了非常多方法。發現盡管功能能夠實現，但瀏覽器兼容性不行。
然后想到去找js插件，找到了一款各個瀏覽器都兼容得不錯的JS復制插件?Zero Clipboard?。
Zero Clipboard 的實現原理?
Zero Clipboard 利用 Flash 進行復制，之前有 Clipboard Copy 解決方式，其利用的是一個隱藏的 Flash。但最新的 Flash Player 10 僅僅同意在 Flash 上進行操作才干啟動剪貼板。所以 Zero Clipboard 對此進行了改進，用了一個透明的 Flash ，讓其漂浮在button之上，這樣事實上點擊的不是button而是 Flash ，也就能夠使用 Flash 的復制功能了。?怎樣使用 Zero Clipboard?
首先下載Zero Clipboard，并解壓縮。當中須要兩個文件：ZeroClipboard.js 和 ZeroClipboard.swf ，將這兩個文件放入到你的項目中。?下載下來后里面有個小樣例。例如以下：
<!DOCTYPE html> <html> <head> <title>Zero Clipboard Test</title> <meta charset="utf-8"> </head> <body> <!-- 說明：1.data-clipboard-target 輸入要復制的對象的ID --> <button id="d_clip_button" class="my_clip_button" data-clipboard-target="fe_text"><b>拷貝到剪貼板</b></button> <br/> <textarea id="fe_text" cols="50" rows="3">輸入須要復制的內容</textarea> </body> </html> <script type="text/javascript" src="ZeroClipboard.js"></script> <script type="text/javascript"> // 定義一個新的復制對象 var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {moviePath: "ZeroClipboard.swf" } );// 復制內容到剪貼板成功后的操作 clip.on( 'complete', function(client, args) {alert("復制成功，復制內容為："+ args.text); } );</script>效果例如以下圖：
然后在你須要的地方CTRL+V就能夠粘貼了。
然后把功能用到實際項目中，
效果例如以下圖：
代碼例如以下：
在TR中要復制的內容中的TD標簽里面加：
注明：$i是循環數據出來的。循環一次，$i++;
樣式是例如以下引入的：
<script type="text/javascript" src="/misc/js/ZeroClipboard.js"></script> <script type="text/javascript"><?php for($r=0;$r<$i;$r++): ?>var clip = new ZeroClipboard( document.getElementById("d_clip_button<?php echo ($r+1); ?>"), {moviePath: "/misc/js/ZeroClipboard.swf"} );clip.on( 'complete', function(client, args) {alert("復制成功，復制內容為："+ args.text);} );<?php endfor; ?> </script>
最后，就OK了，測試了幾個瀏覽器功能都是OK的。
總結
以上是生活随笔為你收集整理的JS 点击复制Copy插件--Zero Clipboard的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jquery.prompt.js 弹窗的
- 下一篇： 查看mysql状态常用命令