模板啦-优秀的帝国cms网站模板资源分享学习平台!

复制插件clipboard下载和使用方法

来源:模版啦原创作者:二师兄 发布时间:2019-01-25 15:24:28

现在是wap网站为主的时代,如果网页中有一段内容(可以是网址,也可以是文章),需要被浏览者复制黏贴到其它地方去分享。没有方便的复制方法很少人是会手工去复制,这样就要求我们用其他方法去简化这个复制的步骤。复制插件clipboard就很合适,也很容易掌握。
clipboard插件的使用方法;
首先引用进插件JS:解压插件下dist文件夹中的clipboard.js或者clipboard.min.js,如:<script src="/js/clipboard.js"></script>
1.第一种使用方法。通过点击一个元素复制另外一个元素的内容:参考代码如下:

//html部分
<input type="text" id="copyValue" />
<button type="button" data-clipboard-target='#copyValue'>复制</button>
//js部分
var clipboard = new Clipboard('button');
clipboard.on('success',function(e){
 e.clearSelection();
 alert('复制成功');
 });
clipboard.on('error',function(e){
 e.clearSelection();
 alert('复制失败');
 });

解析:data-clipboard-target 为选择器,<input type="text" id="copyValue" />为被复制的目标内容

第二种方法:
<button type="button" data-clipboard-text='需要复制内容'>复制</button>
//js部分
new Clipboard('button');
内容直接放在 data-clipboard-text中,点击外层button就可以实现复制了。

插件下载:
clipboard.js-master.zip
ddd02524bd883c56a654b36e9b4f3d34.zip (95.18 KB)

本文地址:http://www.muban.la/cj/112.html

本文标题:复制插件clipboard下载和使用方法


联系我们 | 关于我们 | 版权声明 | 帮助中心 | 广告服务 | 网站地图

模板啦专业提供网站模板,网页模板,教程培训,程序插件,网站素材等建站资源。我们致力于打造一个优秀的建站资源共享学习平台!

Copyright @ 2010-2018 模板啦 版权所有 粤ICP备16126808号-1