关于前端的复制功能

最新推荐文章于 2024-11-01 10:18:14 发布

爱不到要偷

最新推荐文章于 2024-11-01 10:18:14 发布

阅读量165

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/littledu/articles/3118111.html

版权

我的标题看起来很大，但我却是纯粹的标题党，所以不要对接下来的内容抱有太大希望，这里只是我的个人笔记本而已，但却总好像是写给别人看的一样，可能写完还会发发微博，但却有忽悠嫌疑。好了，说了这么多还没进入主题，有罪，下面再描述一下。

最近由于工作的需要，有一个复制的功能需要做，以前就知道单靠dom接口和js是无法兼容主流浏览器的，但由于懒惰自己并没花时间多了解，这次就稍微整理一下备忘。首先，想实现主流浏览器的复制功能，看这里：《突破IE跨浏览器复制内容到剪贴板》，假设你看到这篇文章的时间跟我写这篇文章的时间相隔很久了，也就是这个链接已经404，那么，你还可以看这里：http://note.sdo.com/u/634718107660171185/n/bBXuN~kjXr9gLX0OM0028- ，再假设这两个链接都打不开了，那没办法了，自己谷歌一下“zeroclipboard"的相关内容进行了解。相信你看完之后，已经知道怎么一回事了，也已经能自己实现复制功能了。下面的内容，可看可不看。over！！！

由于我的工作需要，是一个页面里面有多个复制，所以，如果按照上面提供的方法，我的代码将显得有点难看，有较多的重复性代码，而我又刚好是一个在乎自己代码的”漂亮性“远远大于我个人外表形象的人，所以，我用JQ封装了一下(因为我的项目用JQ，所以用JQ封装)，将难看的代码隐藏起来。调用方式则如下：

 1     $('.copy').zclip({
 2         path:'ZeroClipboard.swf',
 3         hoverClass: 'newhover',
 4         copy:function(){
 5             return $( this ).next().val();
 6         },
 7         complete: function( text, client ){
 8             alert( '复制的值为:' + text);
 9         }
10     });

path: 为所需的swf位置

hoverClass: 自定义鼠标滑过时的class名

copy: 返回所要复制的内容，由用户控制，return为必需，其this指向.copy元素，自己控制要复制的内容

complete: 可以认为是复制成功时的回调，其下this指向元素，第一个参数text为复制的内容，第二个参数client为复制元对象，用户进一步交互，具体可自己打印client了解。

还有一个mouseover方法，用于鼠标划过时的交互。

zclip代码如下：

 1 (function ($) {
 2 
 3     $.fn.zclip = function (params) {
 4 
 5         if( typeof params === 'object' && !params.length ) {
 6 
 7             var settings = $.extend({
 8 
 9                 path: 'ZeroClipboard.swf',
10                 hoverClass: 'hover',
11                 copy: null,
12                 mouseover: null,
13                 complete: null,
14                 setHandCursor: true,
15                 setCSSEffects: true
16 
17             }, params);
18             
19             return this.each(function () {
20 
21                 var $this = $( this ),
22                     o = $this[0];
23 
24                 if ( $this.is( ':visible' ) && $.isFunction( settings.copy ) ){
25 
26                     ZeroClipboard.setMoviePath( settings.path );
27 
28                     var clip = new ZeroClipboard.Client();                  
29 
30                     //设置手形、设置hover支持、修改默认hover名字
31                     clip.setHandCursor( settings.setHandCursor );
32                     clip.setCSSEffects( settings.setCSSEffects );
33                     clip.setHoverClass( settings.hoverClass );
34 
35                     clip.glue( o );
36 
37                     //绑定mouserhover事件
38                     clip.addEventListener( 'mouseover', function( client ){
39                         if( typeof settings.mouseover === 'function' ){
40                             settings.mouseover.call( o );
41                         }
42                     });
43 
44                     //绑定mousedown事件，内部用
45                     clip.addEventListener( 'mousedown', function( client ){
46 
47                         clip.setText( settings.copy.call( o ) );
48 
49                     });
50 
51                     //绑定复制成功时事件
52                     clip.addEventListener( 'complete', function( client, text ){
53 
54                         if( typeof settings.complete === 'function' ){
55                             
56                             settings.complete.call( o, text, client );
57                         }
58                         settings.setCSSEffects && $this.removeClass( settings.hoverClass ); //fixed IE6
59                     });
60                     
61                     $( window ).bind( 'load resize', function(){
62                         clip.reposition();
63                     });
64                 
65                 }
66 
67             });
68 
69         }
70     }    
71     
72 })(jQuery);

原ZeroClipboard在IE6，复制完后hover没去掉，这里做了修复，并直接修改原ZeroClipboard，加入自定义hover名的功能。

好了，就到这里，按我以前应该会在这里放一段可执行的代码让人直接运行一下看效果，现在懒了，就这样吧。

测试代码下载

/ 2013.6.6 update /

发现当复制按钮的祖先元素如果有position:relative相对定位，则gule( o )定位将不准，它也提供了 gule( o, 相对定位的祖先元素 )方法来解决这个问题，但个人觉得很麻烦，故重写了它的getDOMObjectPosition方法，如下：

 1 getDOMObjectPosition: function (obj, stopObj) {
 2         // get absolute coordinates for dom element
 3         /*var info = {
 4             left: 0,
 5             top: 0,
 6             width: obj.width ? obj.width : obj.offsetWidth,
 7             height: obj.height ? obj.height : obj.offsetHeight
 8         };
 9 
10         if (obj && (obj != stopObj)) {
11             info.left += obj.offsetLeft;
12             info.top += obj.offsetTop;
13         }*/
14 
15         //fixed position bug
16         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
17             scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
18         var info = {
19             left: obj.getBoundingClientRect().left + scrollLeft,
20             top: obj.getBoundingClientRect().top + scrollTop,
21             width: obj.width ? obj.width : obj.offsetWidth,
22             height: obj.height ? obj.height : obj.offsetHeight
23         };
24 
25         return info;
26     },