jQuery zclip插件实现跨浏览器复制功能


Posted in Javascript onNovember 02, 2015

jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe Flash Player。

1、jQuery-zclip用法

//引入jQuery-zclip相关js及swf文件
<script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/resources/js/jquery.zclip.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#cp-btn").zclip({
    path:'<%=path%>/resources/js/ZeroClipboard.swf', //记得把ZeroClipboard.swf引入到项目中 
    copy:function(){
      return $('#inviteUrl').val();
    }
  });
});
</script>

<div class=form-row>
  <div class=col-md-5>
    <input class=form-control value="" id="inviteUrl"/>
  </div>
  <div class=col-md-1>
    <a href="javascript:void(0)" id="cp-btn"
      class="btn btn-default btn-block btn-clean">复  制</a>
  </div>
</div>

配置说明
path:swf的路径(复制主要是用flash解决不同浏览器的复制)
copy:待复制的内容, 可以是静态内容, 也可以 return 动态内容
beforeCopy:复制之前要做的function;
afterCopy:复制之后要做的function;

提供了3个方法
show:$(selected).zclip('show');//复制功能有效
hide:$(selected).zclip('hide');//复制功能无效
remove:$(selected).zclip('remove');//完全移除复制功能

2、演示效果
运行成功后,点击复制按钮,会弹出一个提示框,表示复制到剪切板生效了,如下:

jQuery zclip插件实现跨浏览器复制功能

弹出框出现“Copied text to clipboard”英文字符,有点不符国人使用习惯,把它改为“成功复制到剪切板”,在jquery.zclip.min.js文件中找到“Copied text to clipboard”替换成“成功复制到剪切板”就可以了,效果如下:

jQuery zclip插件实现跨浏览器复制功能

以上就是小编整理的关于jQuery zclip插件实现跨浏览器复制功能的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery html()等方法介绍
Nov 18 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
jquery ajax分页插件的简单实现
Jan 27 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
seajs下require书写约定实例分析
May 16 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 #Javascript
jquery实现简洁文件上传表单样式
Nov 02 #Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 #Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 #Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 #Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 #Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 #Javascript
You might like
PHP学习之PHP表达式
2006/10/09 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
opencv python图像梯度实例详解
2020/02/04 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
文明寄语大全
2014/04/11 职场文书
英语演讲开场白
2015/05/29 职场文书
师范生见习总结范文
2015/06/23 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
导游词之临安白水涧
2019/11/05 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
MySQL索引失效场景及解决方案
2022/07/23 MySQL