close

ZeroClipboard  原理是在 DOM元件上覆蓋一層flash ,在各家瀏覽器上較為通用
   本範例由 使用C#後台丟串字到前台(  tb_link.Text) ,再經由 button 進行複製動作 IE9 ,CHrome 測試OK,
1.到 ZeroClipBoard 網站 下庫javascript 程式 ,並將程式解開放入專案中

2.在 <HEAD></HEAD> 中插入

 <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> 中插入

<asp:TextBox ID="tb_link" runat="server" Width="300"  text="要被複製的文字"></asp:TextBox>
<br />
<asp:Button ID="btn_copy" runat="server" Text="複製連結" />

 
2011/12/23更新:
在覆蓋DOM元件的FLASH 有時不會在正確位置上 , 目前已知原因有 page 的resize 事件,
zerocipboard 有提供相對應的元件
reposition()
有查到用法
window.onresize = function() {clip.reposition();};

而我遇到的是在上方加一個圖片時,FLASH 還停留在上方,我想應該該是載入順序的問題,
想說用 window.onload 解決 , 可惜java 真的跟他不是很熟,轉個方向先把高成先定出來,倒也可以解決
所以當使用使效語法又沒有錯時 , 可以上該元件的附近找找有沒有可以點擊的地方 , 有可能是位置跑掉了 ...
arrow
arrow
    創作者介紹
    創作者 jason0324 的頭像
    jason0324

    Js 片段記憶回顧中心

    jason0324 發表在 痞客邦 留言(0) 人氣()