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 相关文章推荐
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 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 session机制
2011/07/17 PHP
php 短链接算法收集与分析
2011/12/30 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
Javascript基础之数组的使用
2016/05/13 Javascript
JSONP跨域请求
2017/03/02 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python网络编程学习笔记(四):域名系统
2014/06/09 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
python样条插值的实现代码
2018/12/17 Python
python实现AES加密解密
2019/03/28 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
美容师的职业规划书
2013/12/27 职场文书
银行学习十八大感想
2014/01/11 职场文书
电子信息专业自荐书
2014/02/04 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
超市中秋节促销方案
2014/03/21 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
大专生自荐书范文
2014/06/22 职场文书
银行员工考核评语
2014/12/31 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
学校运动会简讯
2015/07/20 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python