时间:2021-05-25
但是值得注意的是官方介绍中已明确表态说这个插件不支持ie6,下面将提供多实例化Zero Clipboard复制功能的实现及兼容ie6的写法!
先下载ZeroClipboard https:///jiaoben/24961.html
<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;} .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 );
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
做为Web前端新人,需要了解height、min-height的区别浏览器参照基准:Firefox,Chrome,Safari,Opera,IE;*IE6不支持
浏览器参照基准:Firefox,Chrome,Safari,Opera,IE; *IE6不支持CSSmin-height属性。最小高度的定义:1.元素拥有默认
css中,filter仅支持ie6以及以上版本,其余浏览器,包括firefox,chrome,opera,Safari都不支持。 要在这些版本设置透明度,
#box{color:red;color:red!important;_color:red;/*IE6
目前这个setTimeout可以很好地兼容IE6,7,8,9以及谷歌浏览器Chrome,火狐浏览器FireFox,苹果浏览器Safari,Opera。setTi