优德娱乐场w88手机版:一个值得你收藏的教程网站

最新下载

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

时间:2015-08-18 00:00:00 编辑:简简单单 来源:原创


zclip是一款基于flash的jquery插件,所以浏览要安装Adobe Flash Player。要有一个统一的copy功能,各浏览器都要兼容,开发成本比较高,主要是各浏览器没有统一的标准,也由于安全性的原因。请查看:jquery zclip例子

1,js代码


<script type="text/javascript" src="../jquery.min.js"></script> 
<script type="text/javascript" src="jquery.zclip.min.js"></script> 
 
$(function() { 
 $("#startcopy").zclip({             //这个可以复制 
 path:'ZeroClipboard.swf', 
 copy:$('#text-to-copy').text(), 
 beforeCopy:function(){ 
 $('#text-to-copy').css('background','yellow'); 
 }, 
 afterCopy:function(){ 
 alert('已复制,粘贴一下吧'); 
 } 
 }); 
 
 $("#test").zclip({ 
 path:'ZeroClipboard.swf', 
 copy:$('#text-to-copy').text(), 
 beforeCopy:function(){ 
 $('#text-to-copy').css('background','yellow'); 
 }, 
 afterCopy:function(){ 
 alert('已复制,粘贴一下吧'); 
 } 
 }).zclip('hide');             //这个不可以,因为加了hide 
}); 

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类。
zclip 

 background:#eee; 

zclip:hover, 
zclip.hover 

 background:red; 

zclip:active, 
zclip.active 

 background:green; 

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

文章评论

热门栏目

XML 地图 | Sitemap 地图