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

2024-06-24 11:11:47阅读量:41 字体:

当开发者需要对某局部文本进行点击复制效果时,在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 ,将这两个文件放入到你的项目中。

用法:

1.) 首先引入核心文件

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

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

例一:

例二:

点击复制效果预览:

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

3.) 默认参数。

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


推荐阅读

  • 快手怎么买热门

    快手怎么买热门

    上了快手热门的视频可以推送给更多的用户,让视频得到更高的热度,在快手买热门的具体操作方式如下: 快手怎么买热门 1、打开快手,点击左上角的三条横线”,进入功能栏”界面。 2...

    阅读: 880

  • 微信闭关中是什么状态

    微信闭关中是什么状态

    微信闭关中是不与外界往来的状态。微信状态显示闭关,可能是因为最近比较忙,又或者是碰到烦心的事情,有一种自我封闭的含义。以下是设置微信状态的操作方法: 微信闭关中是什么状态 1、打开微信,点击我&rdq...

    阅读: 871

  • qq打开文件默认设置怎么改

    qq打开文件默认设置怎么改

    qq,为腾讯qq的简称,是一款基于互联网的即时通信软件。修改qq打开文件默认设置的具体操作如下: qq打开文件默认设置怎么改 1、点击手机设置”-应用与权限”-应用管理&rdq...

    阅读: 840

  • 微信注销后聊天记录还能恢复吗

    微信注销后聊天记录还能恢复吗

    如果对聊天记录进行备份或迁移的话,微信注销后聊天记录可以恢复。如果没有对聊天记录进行备份或迁移的话,微信注销后聊天记录无法恢复。以下是注销微信的操作步骤: 微信注销后聊天记录还能恢复吗 1、打开微信A...

    阅读: 950

  • 微信群太多怎么实现分组管理

    微信群太多怎么实现分组管理

    微信群太多可以使用折叠群的功能进行分组管理,将群设置为折叠群的具体操作步骤如下: 微信群太多怎么实现分组管理 1、打开微信app,点击下方的通讯录,再点击群聊进入群聊界面。 2、进入群聊界面后,选择...

    阅读: 898

  • 微信预约挂号怎样切换就诊人

    微信预约挂号怎样切换就诊人

    以梧州市中医院公众号为例,在梧州市中医院微信公众号预约挂号切换就诊人的具体操作步骤如下: 微信预约挂号怎样切换就诊人 1、打开微信APP,搜索梧州市中医院公众号”,点击该公众号,再点击发消...

    阅读: 845