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