内容复制兼容性解决方案之ZeroClipboard

Zero Clipboard

 

1、简介：

 

Jon Rohan编写的，目前已经开源到GitHub上面了，这个case也已经停止更新了,最新的版本是1.0.8。

 

 

2、实现原理：

 

依赖采用内置的Adoble Flash文件和一个js文件，会在绑定DOM元素上覆盖一个flash（采用z-index的方式）。

 

3、参数介绍：

 

• zIndex:99 默认99
• moviePath:'ZeroClipboard.swf' 默认值，注意默认路径在js文件同目录下
• nextId:1
• clipText 粘贴的内容
• movie
• title

 

 

 

 

4、api介绍：

 

新建一个ZeroClipboard对象：

 

var clip = new ZeroClipboard.Client():

  

• setMoviePath(path)

如果flash文件有需求不与js文件同目录，可以用此api进行设置

 

• glue(elem,appendElem,stylesToAdd)

1. glue是粘合的意思，依据elem的位置生成一个div覆盖在elem上面
2. appendElem 默认是 document.getElementsByTagName('body')[0];

• show

"显示"flash的div

---------- 实质还是设置 div的位置，依附在elem的上面

• hide

“隐藏”flash的div

----------- 实质是设置div的left的值为-2000px

• setText(newText)

设置clipText为 newText

5、 支持的事件：

• flash加载完成

clip.addEventListener('load',function(){
      //flash加载完成
});

 

• 鼠标移入flash的div

clip.addEventListener('mouseOver',function(){
	//鼠标移入
});

 

• 鼠标移出flash的div

clip.addEventListener('mouseOut',function(){
	//鼠标移出
});

 

• 鼠标点击flash的div

clip.addEventListener('mouseDown',function(){
	//点击
});

•  鼠标点击flashdiv然后松开

clip.addEventListener('mouseUp',function(){
	//松开
});

 

• 复制完成

clip.addEventListener('complete',function(){
	//复制完成
});

 

6、 可以改进的地方：

• 内置的$

$:function(thingy){
    //次api只是简单地支持了id
    if(typeof(thingy) == 'string'){
         thingy  = document.getElementById(thingy);
    }
}

   

支持更多元：

可以参考： http://zhangyaochun.iteye.com/blog/1439262

 

 

 

 

扩展阅读：

 

 

http://jonrohan.github.com/ZeroClipboard/#demo

 

http://www.docin.com/p-62183559.html