1、第一步,引用 ZeroClipboard.js 文件:
<script type="text/javascript" src="ZeroClipboard.js"></script>
注意:同时,还需要引用jquery的js文件。
2、再设置 ZeroClipboard.swf 文件的路径:
ZeroClipboard.setMoviePath("ZeroClipboard.swf");
注意: ZeroClipboard.js, ZeroClipboard.swf 两个文件的路径都需要替换为你项目中对应文件的路径。
3、代码如下:
var clip = null;
ZeroClipboard.setMoviePath("../../_js/ZeroClipboard.swf");
$().ready(function() {
init("www.baidu.com", "da_clip_button");
});
function init(text1, glue) {
clip = new ZeroClipboard.Client(); // 新建一个对象
clip.setHandCursor(true); // 设置鼠标为手型
clip.addEventListener('load', function(client) {
});
clip.addEventListener('mouseOver', function(client, text) {
client.setText(text1); // 设置要复制的文本。
});
clip.addEventListener('complete', function(client) {
alert("复制到剪贴板成功");
});
clip.glue(glue);
}
HTML代码如下:
<body>
<div style="margin: 30px 10px 10px 10px; text-align: center" width="100%" cellspacing="0" border="0" cellpadding="2">
<input id="viewUrl" type="text" disabled="true" style="width: 450px" readonly="true" value="www.baidu.com" />
<br />
<button id="da_clip_button" style="margin-top: 10px;" title="复制内容到剪切板">复制内容</button>
</div>
</body>
注意:其他更加详细的函数使用,可以参考如下网站