• UID30
  • 登录2016-10-11
  • 粉丝27
  • 关注104
  • 发帖50
  • 主页
  • 金币1032枚
原创写手
社区居民
忠实会员
追星一族
Kimi.Huang 发布于2015-08-19 19:52
2/7372

[前端开发]复制到剪切版(zClip)

楼层直达
0、 zClip 简介
  • zClip 是一个轻量级基于 jQuery “复制到剪贴板”插件
  • ZeroClipboard.swf Flash 文件,它以透明的方式覆盖在了点击复制的按钮上,然后将需复制的内容保存进了剪贴板
1、 zClip 常见问题
1.1、本地无法调试
  • 由于游览器对 Flash 的安全措施,最好请不要在本地 file:// 下进行调试,如果你会发现效果始终不会出现, 请通过 http:// 方式运行
  • Django 中 python manage.py runserver 0.0.0.0:9999 这种是可以在本地调试
1.2、浏览器 Flash 被禁止

描述:Chrome Plugins Flash

图片:1E73857E-3392-46F3-A4F8-B99DB88C9951.png

Chrome Plugins Flash
1.3、移动端复制到剪切版
2、zClip 使用
2.1、加载 jQuery 和 zClip 文件
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.bootcss.com/zclip/1.1.2/jquery.zclip.min.js"></script>
2.2、HTML
<!--// 静态-->
<div id="static">http://finalshares.com/</div>
<button id="copy-button">点击复制该链接</button>
                            
<!--// 动态-->
<input type="text" id="dynamic" value="http://finalshares.com/" />
<button id="copy-dynamic">复制 Input 框中的内容</button>
2.3、Javascript
$(function() {
    var zClipSwf = 'http://cdn.bootcss.com/zclip/1.1.2/ZeroClipboard.swf';
    // 当点击 Id 为 copy-button 的按钮时
    // Id 为 static 中的内容将会被复制
    $('#copy-button').zclip({
        path: zClipSwf,
        copy: $('#static').text()
    });
                            
    // 当点击 Id 为 copy-dynamic 的按钮时
    // 在 Id 为 dynamic input 框中所输入的内容将会被复制
    $('#copy-dynamic').zclip({
        path: zClipSwf,
        copy: function(){
            return $('input#dynamic').val();
        }
    });
});
3、zClip 截图
3.1、点击复制之前

描述:点击复制之前

图片:FED32126-0DB5-4EDC-B0BC-14DAA50B6378.png

点击复制之前

3.2、点击复制之后(确认框提示)

描述:点击复制之后(确认框提示)

图片:3671EA66-3B16-4F65-91C8-D74BE525FE95.png

点击复制之后(确认框提示)

3.3、点击复制之后(自定义提示)

描述:点击复制之后(自定义提示)

图片:CAB44423-B958-486C-9ED2-2CED6DAAA7FD.png

点击复制之后(自定义提示)

4、 参数说明
4.1、zClip 支持 path、copy、beforeCopy、afterCopy 四个参数
$(document).ready(function(){
  $("#copy-callback").zclip({
      path : 'ZeroClipboard.swf',
      copy : $('#callback-paragraph').text(),
      beforeCopy:function(){
          $('#callback-paragraph').css('background','yellow');
          $(this).css('color','orange');
      },
      afterCopy:function(){
          $('#callback-paragraph').css('background','pink');
          $(this).css('color','purple');
      }
  });
});

4.2、参数说明
4.2.1、path
http://cdn.bootcss.com/zclip/1.1.2/jquery.zclip.js
http://cdn.bootcss.com/zclip/1.1.2/jquery.zclip.min.js
http://cdn.bootcss.com/zclip/1.1.2/ZeroClipboard.swf
4.2.2、copy
  • 复制的内容
  • 必须
  • 任意字符串,也可以是回调函数返回的内容
4.2.3、beforeCopy
  • 复制内容前回调函数
  • 可选
4.2.4、afterCopy
  • 复制内容后回调函数
  • 可选
5、 弹窗提示
5.1、当未使用参数 afterCopy 时,浏览器会弹出提示框
5.2、而当使用参数 afterCopy 时,即便为空的,也什么提示也没有
5.3、具体实现代码如下,参见 https://github.com/terinjokes/zClip/blob/master/zclip.js
clip.on('complete', function(client, args) {
    var text = args.text,
            $el = $(this),
            settings = clients[$el.data('zclip-client')];
                      
    if ($.isFunction(settings.afterCopy)) {
        $el.trigger('zClip_afterCopy', text);
    } else {
        if (text.length > 500) {
            text = text.substr(0, 500) + '…\n\n(' + (text.length - 500) + 'characters not shown)';
        }
        global.alert('Copied text to clipboard:\n\n'+args.text);
    }
                      
    if (settings.clickAfter) {
        $el.trigger('click');
    }
});
6、 zClip 原理
6.1、zClip 自动生成相关代码
<div id="global-zeroclipboard-html-bridge" class="global-zeroclipboard-container" data-clipboard-ready="true" style="position: absolute; left: -9999px; top: -9999px; width: 50px; height: 26px; z-index: 10000;">
        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="global-zeroclipboard-flash-bridge" width="100%" height="100%">
                <param name="movie" value="http://cdn.bootcss.com/zclip/1.1.2/ZeroClipboard.swf?nocache=1434643071963">
                <param name="allowScriptAccess" value="sameDomain">                     
                <param name="scale" value="exactfit">
                <param name="loop" value="false">
                <param name="menu" value="false">
                <param name="quality" value="best">
                <param name="bgcolor" value="#ffffff">
                <param name="wmode" value="transparent">
                <param name="flashvars" value="trustedDomain=http://127.0.0.1:9999"> 
                <embed src="http://cdn.bootcss.com/zclip/1.1.2/ZeroClipboard.swf?nocache=1434643071963" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="100%" height="100%" name="global-zeroclipboard-flash-bridge" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="trustedDomain=http://127.0.0.1:9999" scale="exactfit">
        </object>
</div>
6.2、.global-zeroclipboard-container {} 调整样式
7、 window.clipboardData
7.1、IE 支持使用 window.clipboardData 访问系统剪贴板,Chrome 和 Safari 中存在类似的 Clipboard 对象但尚未实现,Firefox 和 Opera 不支持这类对象
7.2、具体参见:http://www.w3help.org/zh-cn/causes/BX2001
7.3、更多详情:https://msdn.microsoft.com/en-us/library/ms535220(VS.85).aspx
7.4、Hello World
<script>
    window.clipboardData.setData("Text", "Hello World");
</script>
8、 极分享(finalshares.com)相关实现
8.1、极分享使用的框架为 PHPWind
8.2、实现原理
8.2.1、如果是在 IE 浏览器内,则直接使用 Window.clipboardData实现复制
8.2.2、如果不是在 IE 浏览器内,则先判断是否已经安装 flash 支持,如果支持,则使用 zeroClipBoard 去实现复制,否则直接提示不支持
8.3、实现复制的相关 JS 一览
8.3.1、引入 ZeroClipboard.js
http://finalshares.com/res/js/dev/util_libs/textCopy/zeroClipboard/ZeroClipboard.js?v=20141223
8.3.2、拷贝函数的封装 textCopy.js,判断是否是 IE,分别实现复制
$.browser.msie
http://finalshares.com/res/js/dev/util_libs/textCopy/textCopy.js?v=20141223
8.3.3、判断是否已安装 flash,函数 flashPluginTest
http://finalshares.com/res/js/dev/pages/common/global.js?v=20141223
8.3.4、根据判断结果提示未安装 flash
http://finalshares.com/res/js/dev/pages/common/global.js?v=20141223
9、 源码示例
zclip.zip
9.1、运行 Django 项目
9.1.1、安装软件
pip install -r requirements.txt
9.1.2、运行项目
python manage.py runserver 0.0.0.0:9000
9.1.3、访问拖拽示例页面
http://127.0.0.1:9000/
9.2、项目说明
9.2.1、最上方的 textarea 为方便复制后粘贴查看效果特意放置,这样大家就不用跑去其他地方粘贴了
9.2.2、页面会根据检测显示所使用浏览器是否支持flash并简单提示

Note:本源代码由“极分享”社区创建,添加或者修改,我们会持续优化源代码以提供更好的解决方案,更多详情和支持请前往finalshares.com
[Kimi.Huang于2015-11-07 00:43编辑了帖子]

0人打赏
  • UID1
  • 登录2016-01-24
  • 粉丝577
  • 关注562
  • 发帖64
  • 主页
  • 金币202066枚
原创写手
社区居民
admin 发布于2015-09-16 22:40
沙发F

图片:极分享水印.png

  • UID7461
  • 登录2016-06-08
  • 粉丝1
  • 关注0
  • 发帖211
  • 主页
  • 金币191枚
社区居民
忠实会员
android_chao 发布于2016-02-26 10:43
板凳F
简单实用,赞一个
您需要登录后才可以回帖
发表回复
极贡献
技术问答
专题荟萃
程序人生
视觉设计
Android开发
iOS开发
编程语言
前端开发
后端开发
服务器架构
软件测试
运维方案
创业路上



最热文章墙

  • 64875/359   【精品推荐】200多种Android动画效果的强悍框架,太全了,不看这个,再有动画的问题,不理你了^@^

  • 36211/189   情人节福利,程序员表白的正确姿势:改几行代码就变成自己的表白了

  • 33684/143   省时省力的Android组件群来了,非常棒的原型参考

  • 32645/243   【精品推荐】Android版产品级的音乐播放器源码,功能太强大了,最好的产品原型有木有?

  • 31198/0   Python爬虫:常用浏览器的useragent

  • 27110/2   超全!整理常用的iOS第三方资源

  • 25981/71   原创表白APP,以程序员的姿势备战新年后的7夕,持续完善中!

  • 24716/139   2016抢红包软件及源码

  • 20818/30   麻省理工的一帮疯子,真的实现了随意操控万物!(绝对黑科技)

  • 20539/25   Android工程师面试题大全

  • 20110/27   2016程序员跳槽全攻略

  • 19952/9   GitHub上排名前50的iOS项目:总有一款你用得着

  • 19252/20   码魂:程序员的牛B漫画

  • 18801/151   Android版类似UC浏览器:非常赞,产品级的源码

  • 17395/3   吐槽那些程序员的搞笑牛逼注释

  • 17366/10   2016年最全的Android面试考题+答案 精编版

  • 16344/1   iOS 动画总结

  • 16216/41   一个绚丽的loading动效分析与实现!

  • 15932/84   Android小而全的博客源码:非常适合全面掌握开发技巧

  • 15929/73   【持续更新中】Android福利贴(二):资料源码大放送

  • 15364/44   惊艳的App引导页:背景图片切换加各个页面动画效果

  • 15158/10   女程序员的梦,众网友的神回复

  • 15065/23   个人收集的Android 各类功能源代码

  • 14929/11   年会上现场review代码是怎么样的体验!

  • 14858/5   新一代Android渠道打包工具:1000个渠道包只需要5秒

  • 14191/23   珍藏多年的素材,灵感搜寻网站

  • 14124/53   基于瀑布流的美女图片浏览App,有注释的源代码

  • 14030/77   仿京东商城客户端Android最新版,不错的原型和学习资料

  • 13799/17   用JavaScript 来开发iOS和Android 原生应用:React Native开源框架中文版来啦

  • 13508/94   Android带弹幕的视频播放器源码,来自大名鼎鼎的Bilibili弹幕网站

  • 13485/20   Android福利第三波【Android电子书】

  • 13306/15   基于Android支付宝支付设计和开发方案

  • 13131/18   65条最常用正则表达式,你要的都在这里了

  • 13071/72   【精品推荐】类似360安全卫士安Android源码:非常赞的产品原型

  • 12877/0   iOS中文版资源库,非常全

  • 12811/17   什么是真正的黑客:收获12200+Stars,人气远超微软开源VS

  • 12344/11   有木有这样一张酷图帮你集齐所有git命令超实用

  • 12240/7   一张图搞定iOS学习路线,非常全面

  • 12212/7   用程序员的姿势抢过年的火车票

  • 11738/10   成为Java顶尖程序员 ,看这11本书就够了

  • 11504/18   一张图搞定Android学习路线,非常全面

  • 11496/44   在线音乐播放器完整版(商用级的源码):非常赞,可听免费高品质专辑

  • 11431/10   微信支付终于成功了(安卓,iOS),在此分享

  • 11300/3   基于Node.js的强大爬虫,能直接发布抓取的文章哦

  • 11214/0   GitHub iOS 库和框架Top100 

  • 11047/29   【持续更新中】Android福利贴(一):资料源码

  • 10696/61   【技巧一】搭配Android Studio,如何实现App远程真机debug?

  • 10515/4   46 个非常有用的 PHP 代码片段

  • 10387/3   即时通信第三方库

  • 10067/8   流媒体视频直播方案

  • 9948/9   B站建开源工作组:APP想支持炫酷弹幕的看过来

  • 9921/9   烧了5亿美金,这家神秘的公司即将颠覆人类未来!

  • 9814/18   八个最优秀的Android Studio插件

  • 9648/2   【精品推荐】高质量PHP代码的50个实用技巧:非常值得收藏

  • 9574/10   中国黑客的隐秘江湖:攻守对立,顶尖高手月入千万美元

  • 9074/6   开箱即用!Android四款系统架构工具

  • 8907/10   十大技巧快速提升Android应用开发性能

  • 8893/3   一张图看清Linux 内核运行原理

  • 8857/3   10款GitHub上最火爆的国产开源项目——可以媲美西半球

  • 8575/1   Android性能优化视频,文档以及工具

  • 返回顶部