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 相关文章推荐
JavaScript更改class和id的方法
Oct 10 Javascript
jQuery 创建Dom元素
May 07 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
JS严格模式原理与用法实例分析
Apr 27 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下使用SimpleXML 处理XML 文件
2010/02/27 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
python Socket之客户端和服务端握手详解
2017/09/18 Python
python语言基本语句用法总结
2019/06/11 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
文明学生标兵事迹
2014/01/21 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
深入详解JS函数的柯里化
2021/06/09 Javascript