首页 > web前端 > js教程 > ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)_javascript技巧

ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
发布: 2016-05-16 16:38:29
原创
1601 人浏览过

但是值得注意的是官方介绍中已明确表态说这个插件不支持ie6,下面将提供多实例化Zero Clipboard复制功能的实现及兼容ie6的写法!

先下载ZeroClipboard http://www.jb51.net/jiaoben/24961.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

<style type="text/css">

 body { font-family:arial,sans-serif; font-size:9pt; }

 .copyit {text-align:center; border:1px solid #FD6001; background-color:#ED730B; margin:10px; padding:2px 5px; cursor:pointer; font-size:12px; border-radius:3px;}

 .copyit.hover { background-color:#FD6001;}.copyit.active { background-color:#d25102;}/*鼠标hover效果,实为调用setCSSEffects()方法*/

 .copy_info{width:260px;height:100px;border:1px solid #ccc;padding:5px;}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="/js/ZeroClipboard/ZeroClipboard.js"></script>

<div class="clip_container">

<textarea id="fe_text" cols=50 rows=5 class="copycnt">第1个被复制的内容!!!</textarea>

<b class="copyit">复制内容</b>

</div>

<br/>

<div class="clip_container">

<textarea id="fe_text" cols=50 rows=5 class="copycnt">第2个被复制的内容!!!</textarea>

<b class="copyit">复制内容</b>

</div>

<script type="text/javascript">

var clip = null;

function copyThis() {

    if($.browser.version==6.0){

        //针对ie6

        $('.copyit').bind("click",function(){

        var code=$(this).parents(".clip_container").find(".copycnt").text();

        window.clipboardData.setData("Text",code);

        alert('被复制的内容:\n'+code);

      })

      return;

    }

    ZeroClipboard.setMoviePath("http://img.jb51.net/js/scripts/clipboard.swf'");//如果ZeroClipboard.js, ZeroClipboard.swf放在同一目录下,可省略这句;

    clip = new ZeroClipboard.Client();

    $('.copyit').mouseover( function() {

     var code=$(this).parents(".clip_container").find(".copycnt").text();

     clip.setText(code);

     if (clip.div) {//已创建过包含flash的父层div,则鼠标hover时重新定位flash层的位置

         //clip.receiveEvent('mouseout', null);

         clip.reposition(this);

     }else{

        clip.glue(this)};

     //clip.receiveEvent('mouseover', null);

    } );

    clip.addEventListener( 'complete', function(client, text){

     alert("被复制内容:\n"+text);

    });

}

copyThis();

</script>

<textarea style="width:300px;height:300px;">

粘贴复制的内容到这里试试!!

</textarea>

登录后复制

上面的实现方法,除了ie6使用window.clipboardData.setData来实现复制功能外,其它浏览器都用Zero Clipboard 插件来实现复制功能!

使用该插件时应注意的几点:

1、以上 ZeroClipboard.js, ZeroClipboard.swf需要放在同一路径下。如果不在同一路径,可使用ZeroClipboard.setMoviePath( “Flash路径” );来设置ZeroClipboard.swf 地址。

2、setCSSEffects() 方法的解析: 当鼠标移到按钮上或点击时,由于有Flash按钮的遮挡,所以复制按钮本身体的 css “:hover”, “:active” 等伪类可能会失效。setCSSEffects() 方法就是解决这个问题。首先我们需要将伪类改成类,比如:

复制代码 代码如下:

.copyit:hover{
 border-color:#FF6633;
}
// 需要将":hover"改成下面的".hover"
.copyit.hover{
 border-color:#FF6633;
}

3、getHTML() 方法的解析:如果你想自己实例一个Flash ,不用Zero Clipboard的附着方法,那么这个方法就可以帮上忙了。它接受两个参数,分别为Flash的宽度和高度。返回的是Flash对应的 HTML 代码。例如:
var html = clip.getHTML( 150, 20 );

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板