ZeroClipboard 原理是在 DOM元件上覆蓋一層flash ,在各家瀏覽器上較為通用
本範例由 使用C#後台丟串字到前台( tb_link.Text) ,再經由 button 進行複製動作 IE9 ,CHrome 測試OK,
1.到 ZeroClipBoard 網站 下庫javascript 程式 ,並將程式解開放入專案中
2.在 <HEAD></HEAD> 中插入
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script src="ZeroClipboard.js" type="text/javascript"></script> <script type="text/javascript"> ZeroClipboard.setMoviePath('ZeroClipboard.swf'); //指定code 所在路徑路徑</script> <script type = "text/javascript"> $(function() { ZeroClipboardInit(); }); function ZeroClipboardInit() { var clip = new ZeroClipboard.Client(); //複製完成彈出訊息 clip.addEventListener('complete', function(client, text) { alert("已複製到剪貼簿"); }); //指定複製來源ID clip.setText(document.getElementById('tb_link').value);/ clip.glue('btn_copy');//'BtnExport'指某个DOM元素（如：Button）的ID } </script> |
3. 在 <body></body> 中插入
|
1 2 3 |
<asp:TextBox ID="tb_link" runat="server" Width="300" text="要被複製的文字"></asp:TextBox> <br /> <asp:Button ID="btn_copy" runat="server" Text="複製連結" /> |
|
1 |
|
1 |
2011/12/23更新: |
|
1 |
在覆蓋DOM元件的FLASH 有時不會在正確位置上 , 目前已知原因有 page 的resize 事件, |
|
1 |
zerocipboard 有提供相對應的元件 |
|
1 |
reposition() |
|
1 |
有查到用法 |
|
1 |
<span>window.onresize = function() {clip.reposition();};</span> |
|
1 |
<span><br /></span> |
|
1 |
而我遇到的是在上方加一個圖片時,FLASH 還停留在上方,我想應該該是載入順序的問題, |
|
1 |
想說用 window.onload 解決 , 可惜java 真的跟他不是很熟,轉個方向先把高成先定出來,倒也可以解決 |
|
1 |
所以當使用使效語法又沒有錯時 , 可以上該元件的附近找找有沒有可以點擊的地方 , 有可能是位置跑掉了 ... |
(Visited 56 times, 1 visits today)