按照http://www.steamdev.com/zclip/我實現一個簡單的zclip test
以下是我的測試code:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test jquery</title> <script type="text/javascript" src="/kk/script/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="/kk/script/jquery.zclip.min.js"></script> <script type="text/javascript"> $(function($){ $('#clip_order_id').zclip({ path:'/kk/script/ZeroClipboard.swf', copy:$('#value_order_id').text(), beforeCopy:function(){ $(this).css('color','#c0c0c0'); }, afterCopy:function(){ $(this).css('color','green'); } }); }); </script> </head> <body> <ul class="order_info_list"> <li class="info_label">orderId</li> <li id="value_order_id">201354</li> <li><input type="button" class="button_copy" id="clip_order_id" value="copy"></li> </ul> </body> </html>
但它不能實現預期的效果。分析原因有兩個：
1》ZeroClipboard.swf有問題，需要重新下載一個。
2》但是我放入復雜的框架里，它不能實現相應效果。檢查我發現它的位置有問題：就是說我所點擊的按鈕和zclip的位置並不重合，所以沒有起作用。
<div class="zclip" id="zclip-ZeroClipboardMovie_1" style="position: absolute; left: 48px; top: 56px; width: 44px; height: 22px; z-index: 99;"><embed id="ZeroClipboardMovie_1" src="/kk/script/ZeroClipboard10.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="44" height="22" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=44&height=22" wmode="transparent"></div>
詳細修改可以參照：http://cheny.sh.blog.163.com/blog/static/49675535201305111141867/