天天看點

JS 點選複制Copy插件--Zero ClipboardZero Clipboard 的實作原理 如何使用 Zero Clipboard 

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

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

這周公司同僚分享的《貝葉斯方法》對我的感觸挺大的。好像對我的見識一下拓寬了。裡面涉及到的統計學,心理學等等很多學科,然後 我總結了自己,學東西好像都學到的是皮毛。沒有深入進去。貝葉斯算法還沒完全理清,在網上看了一些資料,隻能說略懂。當然這麼好的東西一下子沒弄懂,那我就多花點時間呗。但是在沒完全弄懂之前,讓我寫一篇關于貝葉斯方法的部落格我想對于我來說是有一定難度的。我試着去了解,還拿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>
           

效果如下圖:

JS 點選複制Copy插件--Zero ClipboardZero Clipboard 的實作原理 如何使用 Zero Clipboard 

然後在你需要的地方CTRL+V就可以粘貼了。

然後把功能用到實際項目中,

效果如下圖:

JS 點選複制Copy插件--Zero ClipboardZero Clipboard 的實作原理 如何使用 Zero Clipboard 

代碼如下:

在TR中要複制的内容中的TD标簽裡面加:

注明:$i是循環資料出來的。循環一次,$i++;

<td id='fe_text<?php echo $i; ?>'>
           
JS 點選複制Copy插件--Zero ClipboardZero Clipboard 的實作原理 如何使用 Zero Clipboard 

樣式是如下引入的:

<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的。