Jquery跨浏览器文本复制插件Zero Clipboard的使用方法


Posted in Javascript onFebruary 28, 2016

当开发者需要对某局部文本进行点击复制效果时,在IE下实现比较简单。但要想做到跨浏览器比较困难了。Zero Clipboard 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比IE的document.execCommand(“Copy”) 更加灵活。

Zero Clipboard 的实现原理

Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进,用了一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了。

Zero Clipboard 特点介绍:
兼容支持Flash 10
避免使用第三方浏览器插件(的Adobe Flash浏览器中的安全冲突)
无形的覆盖,无干扰,页面设计
支持CSS“悬停”和“活跃”状态
保留目标元素的“点击”,”mouseenter”和”mouseleave”的事件
供应回调函数“复制前”和“复制”
极轻的重量! (7KB精缩)

首先下载 Zero Clipboard ,并解压缩。其中需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf ,将这两个文件放入到你的项目中。
点击下载:jquery.zclip.1.1.1

用法:

1.) 首先引入核心文件

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.zclip.js"></script>

2.) 在页面代码里写入功能模块,定义copy复制按钮元素属性信息

<script language="javascript">
$(document).ready(function(){
 
    $('a#copy-description').zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('p#description').text()
    });
 
    // The link with ID "copy-description" will copy
    // the text of the paragraph with ID "description"
 
 
    $('a#copy-dynamic').zclip({
        path:'js/ZeroClipboard.swf',
        copy:function(){return $('input#dynamic').val();}
    });
 
    // The link with ID "copy-dynamic" will copy the current value
    // of a dynamically changing input with the ID "dynamic"
 
});
</script>

例一:

<a href="#" id="copy-description">点击复制效果预览</a>

<p id="description">文本源……</p>

例二:

<a href="#" id="copy-dynamic">点击复制效果预览:</a><input style="width:300px; margin-left:15px;" type="text" id="dynamic" value="Insert any text here." onfocus="if(this.value=='Insert any text here.'){this.value=''}" onblur="if(this.value==''){this.value='Insert any text here.'}" />

3.) 供应定制的回调函数。

<script language="javascript">
$(document).ready(function(){
 
    $("a#copy-callbacks").zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('#callback-paragraph').text(),
        beforeCopy:function(){
            $('#callback-paragraph').css('background','yellow');
            $(this).css('color','orange');
        },
        afterCopy:function(){
            $('#callback-paragraph').css('background','green');
            $(this).css('color','purple');
            $(this).next('.check').show();
        }
    });
 
});
</script>

3.) 默认参数。

扩展介绍:
1.) 测试兼容IE6,IE7,IE8,FF 3.6,Chrome浏览器8,Safari 5的,歌剧11
2.) 适当的CSS特效:

/* zClip is a flash overlay, so it must provide */

/* the target element with "hover" and "active" classes */

/* to simulate native :hover and :active states. */

/* Be sure to write your CSS as follows for best results: */

 

/*大概意思就是说 ZeroClip是flash叠加……就是说flash叠加在了text文本上,其实显示文字可以根据css来定义*/

a:hover, a.hover {...}

a:active, a.active {...}

在线演示:
1、http://demo.3water.com/js/2016/jquery_zclip/demo1.html
2、http://demo.3water.com/js/2016/jquery_zclip/demo2.html

至此,该插件使用方法已经介绍结束,对于使用者的开发者来说,剩下的扩展方面就要根据需求而定了。

Javascript 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
微信开发 微信授权详解
Oct 21 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 #Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 #Javascript
javascript的 {} 语句块详解
Feb 27 #Javascript
javascript中eval解析JSON字符串
Feb 27 #Javascript
javascript先序遍历DOM树的方法
Feb 27 #Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 #Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 #Javascript
You might like
php数组总结篇(一)
2008/09/30 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
Laravel下生成验证码的类
2017/11/15 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
简述Python中的进程、线程、协程
2016/03/18 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
Django 用户认证组件使用详解
2019/07/23 Python
浅析使用Python搭建http服务器
2019/10/27 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
鱼油专家:Omegavia
2016/10/10 全球购物
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
清明节演讲稿
2014/05/27 职场文书
施工安全责任书范本
2014/07/24 职场文书
2015年女生节活动总结
2015/02/27 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
总结Python连接CS2000的详细步骤
2021/06/23 Python
教你部署vue项目到docker
2022/04/05 Vue.js