内容复制兼容性解决方案之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

 

你可能感兴趣的:(ZeroClipboard)