必威官网登录-betway必威官网|体育在线

热门关键词: 必威体育,betway必威官网,必威官网登录,必威app下载

ZeroClipboard.swf须要放在同等路线下,Clipboard 插件

作者: 计算机网络  发布:2019-09-09

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

javascript 复制指定id的div的内容

要复制到系统剪贴板,IE下可以使用window.clipboardData对象,如:
window.clipboardData.setData('Text', 'xxxx'); // 复制文本类型的“xxxx”到剪贴板但非IE内核的浏览器不支持此方法,网上有一款flash实现的跨浏览器的复制剪贴板方案,参考下:ZeroClipboard

 

如何使用 Zero Clipboard

首先下载 Zero Clipboard ,并解压缩。其中需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf ,将这两个文件放入到你的项目中。
Zero Clipboard : [主页] [下载] [演示]
核心功能 第一步,导入 ZeroClipboard.js 文件:

<script type="text/javascript" src="ZeroClipboard.js"></script>
再设置 ZeroClipboard.swf 文件的路径:

ZeroClipboard.setMoviePath( "ZeroClipboard.swf" );
注意:以上 ZeroClipboard.js, ZeroClipboard.swf 两个文件的路径都需要替换为你项目中对应文件的路径。或者也可以是一个绝对路径。
然后就使用了:

复制代码 代码如下:

var clip = new ZeroClipboard.Client(); // 新建一个对象
clip.setHandCursor( true ); // 设置鼠标为手型
clip.setText("哈哈"); // 设置要复制的文本。
// 注册一个 button,参数为 id。点击这个 button 就会复制。
// 这个 button 不一定要求是一个 input 按钮,也可以是其他 DOM 元素。
clip.glue("copy-botton"); // 和上一句位置不可调换

这样,这样基本功能实现了,点击按钮就可以复制设置好的文本了。你可能注意到了,待复制的文本是固定的,如果想要动态改变的怎么办,比如复制一个输入框中的内容。不用担心,下面会讲到的。

其他函数
Zero Clipboard 还提供了一些其他的函数,其中有一些非常有用。

reposition() 方法
因为按钮上漂浮有一个 Flash 按钮,所以当页面大小发生变化时,Flash 按钮可能会错位,这样就点不着了。 不要紧,Zero Clipboard 提供了一个 reposition() 方法,可以重新计算 Flash 按钮的位置。我们可以将它绑定到 resize 事件上。

复制代码 代码如下:

bind(window, "resize", function(){
clip.reposition();
});

bind 是一个跨浏览器的事件绑定函数。详情请见4个跨浏览器必备的函数 。
hide() 和 show() 方法
这两个方法可以隐藏和显示 Flash 按钮 。其中 show() 方法会调用 reposition() 方法。

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

#copy-botton:hover{
border-color:#FF6633;
}
/* 可以改成下面的 ":hover" 改成 ".hover" */
#copy-botton.hover{
border-color:#FF6633;
}
我们可以调用 clip.setCSSEffects( true ); 这样 Zero Clipboard 会自动为我们处理:将类 .hover 当成伪类 :hover 。

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

var html = clip.getHTML( 150, 20 );
你可以用 innerHTML 或直接 document.write(); 进行输出。
以下是我测试下输出的 HTML 代码:

复制代码 代码如下:

<embed id="ZeroClipboardMovie_1" src="zeroclipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="150" height="20" name="ZeroClipboardMovie_1" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="" flashvars="id=1&width=150&height=20" wmode="transparent" />

IE 的 Flash JavaScript 通信接口上有一个 bug 。你必须插入一个 object 标签到一个已存在的 DOM 元素中。并且在写入 innerHTML 之前请确保该元素已经 appendChild 方法插入到 DOM 中。
Zero Clipboard 事件处理
Zero Clipboard 提供了一些事件,你可以自定义函数处理这些事件。Zero Clipboard 事件处理函数为 addEventListener(); 例如当 Flash 完全载入后会触发一个事件 “load” 。

复制代码 代码如下:

clip.addEventListener( "load", function(client) {
alert("Flash 加载完毕!");
});

Zero Clipboard 会将 clip 对象作为参数传入。即上例中的 “client” 。
还有 “load” 也可以写成 “onLoad”,其他的事件也可以这样。
其他事件还包括:

mouseOver 鼠标移上事件
mouseOut 鼠标移出事件
mouseDown 鼠标按下事件
mouseUp 鼠标松开事件
complete 复制成功事件
其中 mouseOver 事件和 complete 事件比较常用。
前面说过,如果需要动态改变待复制的内容,那 mouseOver 事件就可以派上用场了。例如需要动态复制一个 id 为 test 的输入框中的值,我们可以在鼠标 over 的时候重新设置值。

复制代码 代码如下:

clip.addEventListener( "mouseOver", function(client) {
var test = document.getElementById("test");
client.setText( test.value ); // 重新设置要复制的值
});

复制成功:

复制代码 代码如下:

clip.addEventListener( "complete", function(){
alert("复制成功!");
});

好了,就介绍到这里吧。赶快自己试验下吧。

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

但是值得注意的是官方介绍中已明确表态说这个插件不支持...

Zero Clipboard 的实现原理

Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进,用了一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了。

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

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

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

先下载ZeroClipboard

<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 );

本文将介绍一个跨浏览器的库类 Zero Clipboard 。它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand(“Copy”) 更加灵活。

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

您可能感兴趣的文章:

  • Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
  • ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
  • zeroclipboard 单个复制按钮和多个复制按钮的实现方法
  • zeroclipboard复制到剪切板的flash
  • Zero Clipboard js+swf实现的复制功能使用方法
  • JQuery zClip插件实现复制页面内容到剪贴板
  • jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
  • Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)

本文由betway必威官网发布于计算机网络,转载请注明出处:ZeroClipboard.swf须要放在同等路线下,Clipboard 插件

关键词: