JS 點擊複製Copy外掛程式--Zero Clipboard

來源:互聯網
上載者:User

寫部落格就是一周工作中遇到哪些問題,一個好處就是可以進行一個總結,另外一個好處就是下次遇到同樣的問題即使那你記不住,也可以翻看你的部落格解決了。同樣也可以幫到別人遇到與你一樣問題的人。或者別人有比你更好的解決辦法,可以一起討論,分析出更好的解決方案。所以這是個好習慣。既然是好習慣,那就得堅持。


但是想寫好一篇部落格好像不是那麼容易的,因為你得有問題,不然你寫什麼,手放在鍵盤上不知道敲啥。或者是你自己主動學習了,對你的學習進行了總結。然後你得有得寫。

這周公司同事分享的《貝葉斯方法》對我的感觸挺大的。好像對我的見識一下拓寬了。裡面涉及到的統計學,心理學等等很多學科,然後 我總結了自己,學東西好像都學到的是皮毛。沒有深入進去。貝葉斯演算法還沒完全理清,在網上看了一些資料,只能說略懂。當然這麼好的東西一下子沒弄懂,那我就多花點時間唄。但是在沒完全弄懂之前,讓我寫一篇關於貝葉斯方法的部落格我想對於我來說是有一定難度的。我試著去理解,還拿PPT給我女朋友大概講了一遍,方便自己增強記憶。她貌似是懂了。她一直認為自己智商比我高。好吧,扯遠了。


這周還是寫一個工作中遇到的問題吧。

問題如下:

表格裡面有很多列,每一列的URL我都得複製。點複製則複製當前列的URL;

網上找了很多方法。發現雖然功能可以實現,但瀏覽器安全色性不行。

然後想到去找js外掛程式,找到了一款各個瀏覽器都相容得不錯的JS複製外掛程式 Zero Clipboard 。

Zero Clipboard 的實現原理 Zero Clipboard 利用 Flash 進行複製,之前有 Clipboard Copy 解決方案,其利用的是一個隱藏的 Flash。但最新的 Flash Player 10 只允許在 Flash 上進行操作才能啟動剪貼簿。所以 Zero Clipboard 對此進行了改進,用了一個透明的 Flash ,讓其漂浮在按鈕之上,這樣其實點擊的不是按鈕而是 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++;

 <td id='fe_text<?php echo $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的。




聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.