网页中偶尔需要复制链接到粘贴板里,然后粘贴分享。为了用户体验都不好意思对客户说“请使用右键复制粘贴”,都需要给一个按钮点一下就复制了内容。此做法常常用到的就是execCommand("Copy")。可惜只IE支持,但无法兼容。今天介绍一款FLASH粘贴板,兼容所有浏览器,但必须得安装了FLASH插件哦。
jQuery ZeroClipboard v1.1.1
官网:http://steamdev.com/zclip 全英文哦,英语要是好点就直接进去看看
事先请准备三个文件:
1、jquery.js
2、jquery.zclip.js ~16KB 源始版 或者下载压缩版jquery.zclip.min.js ~7KB
3、ZeroClipboard.swf ~1KB
使用例子:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
- <title>jquery.zclip</title>
- <script type="text/javascript" src="jquery1.4.2.js"></script>
- <script type="text/javascript" src="jquery.zclip.js"></script>
- <body><input type="text" name="text" id="text" value="http://www.baidu.com" />
- <a href="javascript:void(0)" id="dynamic">复制</a>
- <script type="text/javascript">
- $(document).ready(function(){
- $("#dynamic").zclip({
- path:'ZeroClipboard.swf',
- copy:$('#text').text()
- });
- </script>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>jquery.zclip</title> <script type="text/javascript" src="jquery1.4.2.js"></script> <script type="text/javascript" src="jquery.zclip.js"></script> <body><input type="text" name="text" id="text" value="http://www.baidu.com" /> <a href="javascript:void(0)" id="dynamic">复制</a> <script type="text/javascript"> $(document).ready(function(){ $("#dynamic").zclip({ path:'ZeroClipboard.swf', copy:$('#text').text() }); </script> </body> </html>
文件打包下载:点击下载
使用注意:我们曾做一个案例时,发觉只有第一次复制有效,之后就无法复制。原来是我们多次运行$(id).zclip();造成的,也就是说针对同一个id你只能执行一次$(id).zclip(),假如你非要执行第二次,请你删除这个id再建一个相同的id来执行$(id).zclip()。
其他参数设置:
Settings | ||
---|---|---|
Variable | Default Value | Available Values |
path * | "ZeroClipboard.swf" | "path/to/ZeroClipboard.swf" |
copy * | null | any string, or any javascript expression or function that returns a string |
afterCopy | null | specify a function to call after text is copied. (your afterCopy function will overwrite the default alert box.) |
beforeCopy | null | specify a function to call before text is copied. |
clickAfter | true | true false |
setHandCursor | true | true false |
setCSSEffects | true | true false |
* required |