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

更新时间：2015年11月02日 15:21:30 投稿：lijiao

这篇文章主要介绍了jQuery zclip插件实现跨浏览器复制功能的方法，以及在实现过程中遇到的问题，感兴趣的小伙伴们可以参考一下

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">复&nbsp;&nbsp;制</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、演示效果
运行成功后，点击复制按钮，会弹出一个提示框，表示复制到剪切板生效了，如下：

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

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

您可能感兴趣的文章:

jQuery.validate 常用方法及需要注意的问题
jQuery.validate 常用方法及需要注意的问题，需要的朋友可以参考一下
2013-03-03
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
借助jQuery我们可以轻松地堆DOM元素进行向上、向下遍历以及同级的遍历,本文我们即来整理jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结:
2016-07-07
基于jquery的Repeater实现代码
本文和大家详解如何使用javascript来实现一个asp.net 的Repeater控件，叫jQuery.Repeater插件。一起来看下吧。
2010-07-07
JQuery打造PHP的AJAX表单提交实例
本实例只利用到JQuery类库本身的函数和功能，不需要第三方插件的支持。另外，所有表单信息都是利用PHPMailer类库邮件的形式发送给管理员。
2009-11-11
基于jQuery实现的仿百度首页滑动选项卡效果代码
这篇文章主要介绍了基于jQuery实现的仿百度首页滑动选项卡效果代码,涉及jQuery响应鼠标事件实现页面元素动态变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
jQuery实现鼠标拖拽登录框移动效果
这篇文章主要为大家详细介绍了jQuery实现鼠标拖拽登录框移动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
源码解读jQ中浏览器兼容模块support
jquery support主要是检测浏览器兼容性，支持力度的方法，用于展示不同浏览器各自特性和bug的属性集合。作为一个静态成员，提供给jquery内部函数，告诉他们某些功能是否能用。避免了以往通过检测浏览器版本做修改。下面我们通过源码详细解读jQ中浏览器兼容模块support。
2016-08-08
jquery1.4 教程一便利的设置函数
jquery1.4已经发布了，1.4相对于1.32的改进还是非常巨大的，可以说是全面性的，性能也全面超越了1.32。这一周，将一一展示jquery1.4的改进，同时也会放出相应的demo。
2010-02-02
基于jQuery制作迷你背词汇工具
jQuery提供的Load的函数可能可以说是实现ajax功能的最轻巧的方法。
2010-07-07
jQuery中on()方法用法实例
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能、定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下
2015-01-01

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具