转自http://www.ipmtea.net/css_ie_firefox/201107/07_499.html

1、ZeroClipboard其实是国外的一个js类库,源码结构如:
var ZeroClipboard = {
//这里是属性和方法.....
}; ZeroClipboard.Client.prototype = {
//扩展方法
};

2、创建对象,如:
var clip = new ZeroClipboard.Client();
//调用扩展方法
点击这里下载文件,查看github源码百度文库
三、简单配置 下载下来的ZeroClipboard文件有一个js和swf文件,在js文件中需要正确配置moviePath路径,可以配置相对和绝对路径,也可以调用实例对象的moviePath()设置正确的路径;
另一个需要注意的地方是本地测试时,需要Apache服务器
四、domo实例

CSS:
.box { width: 300px; height: 100px; margin: 100px auto; }
 
Html
<div class="box">
<textarea id="J_share_text" class="share-text"></textarea>
<input class="btn" id="J_copy_clipboard_data" type="button" value="复制">
</div>
 
JavaScript:
(function() {
$(function() {
var clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
clip.glue('J_copy_clipboard_data');
clip.addEventListener('mouseDown',function() {
clip.setText(ZeroClipboard.$('#J_share_text').val());
});
});
})()
 

完整demo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ZeroClipboard demo实例</title>
<link href="http://a.tbcdn.cn/apps/e/tms/120951/bootstrap.css" rel="stylesheet">
<style>
.box { width: 300px; height: 100px; margin: 100px auto; }
</style>
</head> <div class="box">
<textarea id="J_share_text" class="share-text"></textarea>
<input class="btn" id="J_copy_clipboard_data" type="button" value="复制">
</div> <body>
<script src="http://a.tbcdn.cn/apps/e/tms/120951/zeroclipboard.js"></script>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://a.tbcdn.cn/apps/e/tms/120951/bootstrap.js"></script> <script>
(function() {
$(function() {
var clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
clip.glue('J_copy_clipboard_data');
clip.addEventListener('mouseDown',function() {
clip.setText($('#J_share_text').val());
});
});
})()
</script> </body>
</html>

其他功能:

核心功能

第一步,导入 ZeroClipboard.js 文件:

  

<script type="text/javascript" src="ZeroClipboard.js"></script>   

第二步, 再设置 ZeroClipboard.swf 文件的路径:

ZeroClipboard.setMoviePath( "ZeroClipboard.swf" );  

注意:以上 ZeroClipboard.js, ZeroClipboard.swf 两个文件的路径都需要替换为你项目中对应文件的路径。或者也可以是一个绝对路径。

第三步,然后就使用了:

var clip = new ZeroClipboard.Client(); // 新建一个对象
clip.setHandCursor( true ); // 设置鼠标为手型
clip.setText("哈哈"); // 设置要复制的文本。
// 注册一个 button,参数为 id。点击这个 button 就会复制。
//这个 button 不一定要求是一个 input 按钮,也可以是其他 DOM 元素。
clip.glue("copy-botton"); // 和上一句位置不可调换

这样,这样基本功能实现了,点击按钮就可以复制设置好的文本了。你可能注意到了,待复制的文本是固定的,如果想要动态改变的怎么办,比如复制一个输入框中的内容。不用担心,下面会讲到的。

其他函数

Zero Clipboard 还提供了一些其他的函数,其中有一些非常有用。

reposition() 方法 
      因为按钮上漂浮有一个 Flash 按钮,所以当页面大小发生变化时,Flash 按钮可能会错位,这样就点不着了。 不要紧,Zero Clipboard 提供了一个 reposition() 方法,可以重新计算 Flash 按钮的位置。我们可以将它绑定到 resize 事件上。

bind(window, "resize", function(){
clip.reposition();
});

bind 是一个跨浏览器的事件绑定函数。

这个想必大家都已知道。IE 的事件绑定函数是 attachEvent;而 Firefox, Safari 是 addEventListener;Opera 则两种都支持。下面进行封装。

/************************************
* 添加事件绑定
* @param obj : 要绑定事件的元素
* @param type : 事件名称。不加 "on". 如 : "click" 而不是 "onclick".
* @param fn : 事件处理函数
************************************/
function bind( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}

例如添加一个页面点击事件:

bind(document, "click", function() {
alert("Hello, World!!");
});

hide() 和 show() 方法

这两个方法可以隐藏和显示 Flash 按钮 。其中 show() 方法会调用 reposition() 方法。

setCSSEffects() 方法 
      当鼠标移到按钮上或点击时,由于有 Flash 按钮的遮挡,所以像 css ":hover", ":active" 等伪类可能会失效。setCSSEffects() 方法就是解决这个问题。首先我们需要将伪类改成类,比如:

  1. #copy-botton:hover{
  2. border-color:#FF6633;
  3. }
  4. // 可以改成下面的 ":hover" 改成 ".hover"
  5. #copy-botton.hover{
  6. border-color:#FF6633;
  7. }

我们可以调用 clip.setCSSEffects( true ); 这样 Zero Clipboard 会自动为我们处理:将类 .hover 当成伪类 :hover 。

getHTML() 方法 
      如果你想自己实例一个 Flash ,不用 Zero Clipboard 的附着方法,那么这个方法就可以帮上忙了。它接受两个参数,分别为 Flash 的宽度和高度。返回的是 Flash 对应的 HTML 代码。例如:

  1. var html = clip.getHTML( 150, 20 );

你可以用 innerHTML 或直接 document.write(); 进行输出。 
以下是我测试下输出的 HTML 代码:

  1. <embed id="ZeroClipboardMovie_1" src="zeroclipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="150" height="20" 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=150&height=20" wmode="transparent" />

IE 的 Flash JavaScript 通信接口上有一个 bug 。你必须插入一个 object 标签到一个已存在的 DOM 元素中。并且在写入 innerHTML 之前请确保该元素已经 appendChild 方法插入到 DOM 中。

Zero Clipboard 事件处理

Zero Clipboard 提供了一些事件,你可以自定义函数处理这些事件。Zero Clipboard 事件处理函数为 addEventListener(); 例如当 Flash 完全载入后会触发一个事件 "load" 。

clip.addEventListener( "load", function(client) {
alert("Flash 加载完毕!");
});

Zero Clipboard 会将 clip 对象作为参数传入。即上例中的 "client" 。 
还有 "load" 也可以写成 "onLoad",其他的事件也可以这样。

其他事件还包括:

mouseOver 鼠标移上事件 
mouseOut 鼠标移出事件 
mouseDown 鼠标按下事件 
mouseUp 鼠标松开事件 
complete 复制成功事件 
其中 mouseOver 事件和 complete 事件比较常用。 
前面说过,如果需要动态改变待复制的内容,那 mouseOver 事件就可以派上用场了。例如需要动态复制一个 id 为 test 的输入框中的值,我们可以在鼠标 over 的时候重新设置值。

  1. clip.addEventListener( "mouseOver", function(client) {
    var test = document.getElementById("test");
    client.setText( test.value ); // 重新设置要复制的值
    });

复制成功:

  1. clip.addEventListener( "complete", function(){
    alert("复制成功!");
    });

好了,就介绍到这里吧。赶快自己试验下吧。

JS+Zero Clipboard swf复制到剪贴板 兼容浏览器(bind事件绑定函数)的更多相关文章

  1. 兼容IE9以下和非IE浏览器的原生js事件绑定函数

    事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...

  2. js事件绑定函数

    js中事件绑定方法大致有三种: 1.在DOM元素中绑定 <input onclick="alert('在DOM中绑定')" type="button" v ...

  3. JS中事件绑定函数,事件捕获,事件冒泡

    1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <scr ...

  4. ie低版本内核事件兼容问题(事件绑定,绑定事件自动执行,文档模式问题)

    问题情况 搜狗等,兼容模式下,以前前端写的点击事件的代码没有, 后来一看是因为兼容模式为9,导致点击事件失效 解决办法,步骤 1,处理绑定事件兼容问题 ie低版本绑定事件只支持attactevent, ...

  5. JS实现复制到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

  6. clipboard.js实现页面内容复制到剪贴板

    clipboard.js实现复制内容到剪切板,它不依靠flash以及其他框架,应用起来比较简单 <input type="text" name="copy_txt& ...

  7. 【转】js插件zClip实现复制到剪贴板功能

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...

  8. js插件zClip实现复制到剪贴板功能

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...

  9. js点击后将文字复制到剪贴板,将图片复制到剪贴板

    复制文字: <table width="99%" border="0" cellpadding="0" cellspacing=&qu ...

随机推荐

  1. MSP430 G2553 LaunchPad设置GPIO

    一. 背景知识:逻辑运算符的使用 当程序初始化时,对于复位状态有不确定性的寄存器(如PxOUT),建议采用直接赋值:其他情况下最好使用逻辑运算符修改寄存器. 直接赋值 REGISTER = 0b111 ...

  2. [Erlang34]erlang.mk的源码阅读1-入门makefile

    通过erlang.mk项目,掌握基本的makefile语法,可以自己定制makefile. 1. makefile 基本规则: 1. 所有的源文件没有被编译过,则对各个源文件进行编译并进行链接,生成最 ...

  3. cron和crontab

    crontab -l 列出目前的计划任务(时程表) crontab -e 编辑计划任务   计划任务的格式如下: f1 f2 f3 f4 f5 program 其中 f1 是表示分钟,f2 表示小时, ...

  4. Winform窗体改变语言类型的方式

    Winform改变语言类型比较复杂,需要根据不同语言应用语言资源.而软件在进行语言切换时,需要将当前的UI文化线程引用对应的语言类型.常用的有三种方式,此处使用两种,对比发现其中的优缺点: /// & ...

  5. linux下使用supervisor启动.net core mvc website的配置

    发布好的asp.net core mvc项目, 如果想在window或linux下的以控制台程序启动的话,可以用下面的命令 dotnet MyProject.dll --urls="http ...

  6. C#基础笔记(第十八天)

    1.HTMLHyper Text Markup Language 超文本标记语言在HTML当中存在着大量的标签,我们用HTML提供的标签,将要显示在网页中的内容包含起来.就构成了我们的网页. CSS: ...

  7. JS判断时特殊值与boolean类型的转换

    扒开JQuery以及其他一些JS框架源码,常常能看到下面这样的判断,写惯了C#高级语言语法的我,一直以来没能系统的理解透这段代码. var test; //do something... if(tes ...

  8. @Configurable

    spring的一个注解,用来自动注入bean的注解,不需要通过BeanFactory去获取    

  9. Stacking方法详解

    集成学习方法主要分成三种:bagging,boosting 和 Stacking.这里主要介绍Stacking. stacking严格来说并不是一种算法,而是精美而又复杂的,对模型集成的一种策略. 首 ...

  10. MyBatis入门程序(基于XML配置)

    创建一个简单的MyBatis入门程序,实现对学生信息的增删改查功能(基于XML配置) 一.新建一个Java工程,导入MyBatis核心jar包.日志相关的jar包以及连接Oracle数据库所需驱动包, ...