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 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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 - Html Transfer Code
2006/10/09 PHP
Ajax PHP分页演示
2007/01/02 PHP
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
Mootools 1.2教程 函数
2009/09/15 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
Python连接mysql方法及常用参数
2020/09/01 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
露营世界:Camping World
2017/02/02 全球购物
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
国外软件测试工程师面试题
2016/12/09 面试题
社区精神文明建设汇报材料
2014/08/17 职场文书
学习型党组织心得体会
2014/09/12 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
校运会加油稿大全
2015/07/22 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
Python Django模型详解
2021/10/05 Python