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 相关文章推荐
有趣的javascript数组定义方法
Sep 10 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
js实现简单扫雷
Nov 27 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
python strip()函数 介绍
2013/05/24 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
10张动图学会python循环与递归问题
2021/02/06 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
秘书行业自我鉴定范文
2013/12/30 职场文书
高一生物教学反思
2014/01/17 职场文书
小学生新年寄语
2014/04/03 职场文书
遗嘱继承公证书
2014/04/09 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
如何用JavaScript学习算法复杂度
2021/04/30 Javascript