您的位置：首页 > Web前端 > JavaScript

JS+Zero Clipboard swf复制到剪贴板 兼容浏览器(bind事件绑定函数)

2014-05-13 08:55 591 查看
转自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() 方法就是解决这个问题。首先我们需要将伪类改成类，比如：

#copy-botton:hover{

border-color:#FF6633;

}

// 可以改成下面的 ":hover" 改成 ".hover"

#copy-botton.hover{

border-color:#FF6633;

}

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

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

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

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

<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 的时候重新设置值。

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


复制成功：

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


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

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航