夏日博客

A-A+

jquery zclip兼容多浏览器文字复制

2016年01月12日 前端设计 暂无评论 阅读 5 views 次

文字复制在js中许多简单的代码但那些代码兼容性都不强了，如果想兼容多浏览器我们可以使用jquery zclip来实现了，而jquery zclip是基于Flash插件了，下面我们就一起来看一个jquery zclip兼容多浏览器文字复制例子,zclip是一款基于Flash的jquery插件，所以浏览要安装Adobe Flash Player。要有一个统一的copy功能，各浏览器都要兼容，开发成本比较高，主要是各浏览器没有统一的标准，也由于安全性的原因,请查看:jquery zclip例子.

1,js代码

  1. <script type="text/javascript" src="../jquery.min.js"></script>    
  2. <script type="text/javascript" src="jquery.zclip.min.js"></script>    
  3.     
  4. $(function() {    
  5.  $("#startcopy").zclip({  //这个可以复制    
  6.  path:'ZeroClipboard.swf',    
  7.  copy:$('#text-to-copy').text(),    
  8.  beforeCopy:function(){    
  9.  $('#text-to-copy').css('background','yellow');    
  10.  },    
  11.  afterCopy:function(){    
  12.  alert('已复制,粘贴一下吧');    
  13.  }    
  14.  });    
  15.     
  16.  $("#test").zclip({    
  17.  path:'ZeroClipboard.swf',    
  18.  copy:$('#text-to-copy').text(),    
  19.  beforeCopy:function(){    
  20.  $('#text-to-copy').css('background','yellow');    
  21.  },    
  22.  afterCopy:function(){    
  23.  alert('已复制,粘贴一下吧');    
  24.  }    
  25.  }).zclip('hide');             //这个不可以，因为加了hide    
  26. });   

2,例子说明

必有参数:

path:swf的路径( 复制主要是用flash解决不同浏览器的复制 )

copy:待复制的内容, 可以是静态内容, 也可以 return 动态内容

不是必须的配置有:

beforeCopy:复制之前要做的function;

afterCopy:复制之后要做的function;

zclip激活和去除方法:

show:$(selected).zclip('show'); //复制功能有效

hide:$(selected).zclip('hide');//复制功能无效

remove:$(selected).zclip('remove');//完全移除复制功能

3，zclip标签,zclip标签

zclip支持a标签的hover和active效果，但需要把:hover修改为.hover，:avtive修改为.active，因为zclip会在hover a标签的时候自动加上hover类，在active的时候自动加上active类。

  1. zclip    
  2. {    
  3.  background:#eee;    
  4. }    
  5. zclip:hover,    
  6. zclip.hover    
  7. {    
  8.  background:red;    
  9. }    
  10. zclip:active,    
  11. zclip.active    
  12. {    
  13.  background:green;    
  14. }  

当鼠标hover到zclip标签时是红色，按下去变成绿色，并且加上active类，demo中有实际的操作.

标签：

给我留言