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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 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 socke 向指定页面提交数据
2008/07/23 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
简单的分页代码js实现
2016/05/17 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
Python常用随机数与随机字符串方法实例
2015/04/09 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
Python 爬虫的原理
2020/07/30 Python
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
学生安全责任书
2014/04/15 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
社区活动策划方案
2014/08/21 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
话题作文之学会尊重
2019/12/16 职场文书