楚雄市城乡建设局网站,关于大创做网站的项目计划书,伊利网站建设,合肥网站建设报价Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上#xff0c;这样其实点击的不是按钮而是 Flash #xff0c;这样将需要的内容传入Flash#xff0c;再通过Flash的复制功能把传入的内容复制到剪贴板。
Zero Clipboard的安装方法首先需要下载 …Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上这样其实点击的不是按钮而是 Flash 这样将需要的内容传入Flash再通过Flash的复制功能把传入的内容复制到剪贴板。
Zero Clipboard的安装方法首先需要下载 Zero Clipboard的压缩包解压后把文件夹中两个文件ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中。然后把在你要使用复制功能的页面中引入Zero Clipboard的js文件ZeroClipboard.js如下代码script typetext/javascript srcZeroClipboard.js/script注意以上 ZeroClipboard.js, ZeroClipboard.swf需要放在同一路径下。如果不在同一路径可使用ZeroClipboard.setMoviePath( “Flash路径” );来设置ZeroClipboard.swf 地址Zero Clipboard实现简单跨浏览器复制var clip new ZeroClipboard.Client(); // 新建一个对象clip.setHandCursor( true ); // 设置鼠标为手型clip.setText(哈哈); // 设置要复制的文本。// 注册一个 button参数为 id。点击这个 button 就会复制。//这个 button 不一定要求是一个 input 按钮也可以是其他 DOM 元素。clip.glue(copy-botton); // 和上一句位置不可调换这样这样基本功能实现了点击按钮就可以复制设置好的文本了。你可能注意到了待复制的文本是固定的如果想要动态改变的怎么办比如复制一个输入框中的内容。不用担心下面会讲到的。Zero Clipboard的高级功能1、reposition() 方法因为按钮上漂浮有一个 Flash 按钮所以当页面大小发生变化时Flash 按钮可能会错位这样就点不着了。 不要紧Zero Clipboard 提供了一个 reposition() 方法可以重新计算 Flash 按钮的位置。我们可以将它绑定到 resize 事件上。如下面代码是在jQuery下实现的resize事件重新设置按钮位置$(window).resize(function(){ clip.reposition();});2、hide() 和 show() 方法这两个方法可以隐藏和显示 Flash 按钮 。其中 show() 方法会调用 reposition() 方法。3、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 。4、getHTML() 方法如果你想自己实例一个 Flash 不用 Zero Clipboard 的附着方法那么这个方法就可以帮上忙了。它接受两个参数分别为 Flash 的宽度和高度。返回的是 Flash 对应的 HTML 代码。例如var html clip.getHTML( 150, 20 );你可以用 innerHTML 或直接 document.write(); 进行输出。以下是测试输出的组装完毕的HTML 代码embed idZeroClipboardMovie_1 srczeroclipboard/ZeroClipboard.swf loopfalse menufalse qualitybest bgcolor#ffffff width150 height20 nameZeroClipboardMovie_1 alignmiddle allowScriptAccessalways allowFullScreenfalse typeapplication/x-shockwave-flash pluginspagehttp://www.macromedia.com/go/getflashplayer flashvarsid1width150height20 wmodetransparent /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(复制成功);});
