`
zhangyaochun
  • 浏览: 2613725 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

内容复制兼容性解决方案之ZeroClipboard

阅读更多

Zero Clipboard

 

1、简介

 

Jon Rohan编写的,目前已经开源到GitHub上面了,这个case也已经停止更新了,最新的版本是1.0.8。

 

 

2、实现原理

 

依赖采用内置的Adoble Flash文件和一个js文件,会在绑定DOM元素上覆盖一个flash(采用z-index的方式)。

 

3、参数介绍

 

  • zIndex:99 默认99
  • moviePath:'ZeroClipboard.swf' 默认值,注意默认路径在js文件同目录下
  • nextId:1
  • clipText 粘贴的内容
  • movie
  • title

 

 

 

 

4、api介绍

 

新建一个ZeroClipboard对象

 

var clip = new ZeroClipboard.Client():
  
  • setMoviePath(path)
如果flash文件有需求不与js文件同目录,可以用此api进行设置

 

  • glue(elem,appendElem,stylesToAdd)
  1. glue是粘合的意思,依据elem的位置生成一个div覆盖在elem上面
  2. appendElem 默认是 document.getElementsByTagName('body')[0];

  • show
"显示"flash的div

---------- 实质还是设置div的位置,依附在elem的上面
  • hide
“隐藏”flash的div

----------- 实质是设置div的left的值为-2000px


  • setText(newText)
设置clipText为newText



5、支持的事件

  • flash加载完成
clip.addEventListener('load',function(){
      //flash加载完成
});
 
  • 鼠标移入flash的div
clip.addEventListener('mouseOver',function(){
	//鼠标移入
});
 
  • 鼠标移出flash的div
clip.addEventListener('mouseOut',function(){
	//鼠标移出
});
 
  • 鼠标点击flash的div
clip.addEventListener('mouseDown',function(){
	//点击
});

  •  鼠标点击flashdiv然后松开
clip.addEventListener('mouseUp',function(){
	//松开
});
 
  • 复制完成
clip.addEventListener('complete',function(){
	//复制完成
});
 



6、可以改进的地方

  • 内置的$
$:function(thingy){
    //次api只是简单地支持了id
    if(typeof(thingy) == 'string'){
         thingy  = document.getElementById(thingy);
    }
}
   
支持更多元

 

 

 

 

扩展阅读:

 

 

http://jonrohan.github.com/ZeroClipboard/#demo

 

http://www.docin.com/p-62183559.html

 

分享到:
评论

相关推荐

    ZeroClipboard 元素内容复制-兼容各浏览器

    在网页开发中,有时候我们需要为用户提供方便快捷地复制特定文本或数据的功能,而ZeroClipboard正好提供了这样一个解决方案。 ZeroClipboard的工作原理是利用HTML5的`data-clipboard-target`属性或`data-clipboard-...

    ZeroClipboard实现兼容多浏览器复制

    这个库尤其重要,因为浏览器的安全策略通常限制了JavaScript直接访问剪贴板,而ZeroClipboard通过Flash技术绕过了这一限制,提供了兼容多种浏览器的解决方案。 首先,让我们深入了解一下ZeroClipboard的工作原理。...

    ZeroClipboard 复制与粘贴

    这个文本文件可以帮助你更好地理解和应用ZeroClipboard库,解决在不同浏览器中的复制粘贴兼容性问题。通过正确使用ZeroClipboard,开发者可以为用户提供一致且便捷的复制体验,无论他们使用的是哪种浏览器。

    ZeroClipboard

    ZeroClipboard是一个实用的工具,它使网页开发者能够方便地添加复制到剪贴板的功能,尽管随着技术进步,HTML5的Clipboard API逐渐成为更推荐的选择,但考虑到浏览器兼容性和旧项目的维护,ZeroClipboard仍然是一个...

    ZeroClipboard实现js复制

    但目前,ZeroClipboard仍然是一个广泛使用的解决方案,特别是对于需要兼容老版本浏览器的项目。 在实际应用中,你还需要考虑一些细节问题,比如Flash的安全策略、跨域问题、以及如何确保在用户点击按钮时正确触发...

    ZeroClipboard(JS复制内容到粘贴板)

    现在推荐使用更现代的解决方案,如Web API的`navigator.clipboard.writeText()`,但它需要用户的权限并且在某些浏览器中可能有兼容性问题。 - 使用ZeroClipboard时,确保用户的浏览器启用了Flash,否则复制功能将...

    跨浏览器复制文本(clipboard和ZeroClipboard使用说明以及js文件)

    `ZeroClipboard`和`clipboard`分别代表了不同时期的跨浏览器复制文本的解决方案。对于新项目,推荐使用`clipboard`,因为它更轻量、更现代且不依赖Flash。但对于需要支持旧版浏览器的项目,`ZeroClipboard`仍是一个...

    Jquery-复制到剪切板ZeroClipboard【亲测可用】

    尽管现代浏览器和设备逐渐淘汰了Flash,但ZeroClipboard仍然为那些需要兼容旧版浏览器的项目提供了解决方案。 要开始使用ZeroClipboard,首先需要在HTML文件中引入ZeroClipboard的相关资源。在你的`index.html`文件...

    ZeroClipboard.js 复制到剪切板(保准好用)

    5. **处理浏览器兼容性**:虽然ZeroClipboard.js能够兼容大多数浏览器,但需要注意的是,随着Flash逐渐被淘汰,一些现代浏览器可能不再支持Flash。因此,你可能需要提供一个备选方案,如使用浏览器原生的`navigator....

    ZeroClipboard-JS实现复制到剪贴板功能

    然而,由于Web Clipboard API目前仍存在浏览器兼容性问题,ZeroClipboard仍然是一个可靠的跨浏览器解决方案。如果你的应用主要面向现代浏览器,也可以考虑直接使用Web Clipboard API。 总的来说,ZeroClipboard是一...

    ZeroClipboard使用问题记录

    然而,考虑到Flash的退役,开发者应该考虑逐步迁移到更现代的复制解决方案,如使用Web API的`navigator.clipboard.writeText()`方法,尽管这可能需要处理更多浏览器兼容性问题。总的来说,理解ZeroClipboard的工作...

    ZeroClipboard实现各浏览器的复制功能

    由于Flash在大多数现代浏览器中都是支持的,ZeroClipboard能够作为一个解决方案来统一不同浏览器间的复制行为。虽然现在HTML5提供了更原生的剪贴板API,但考虑到老版本浏览器的兼容性,ZeroClipboard仍然是一个有...

    ZeroClipboard库提供了一个简单的方法来将文本复制到剪贴板

    为了解决这个问题,开发者可以选择使用更现代的解决方案,如基于Web API `navigator.clipboard.writeText()` 的库,但这通常需要考虑浏览器兼容性问题。ZeroClipboard的一个替代方案是使用`clipboard.js`,这是一个...

    ZeroClipboard解决跨浏览器复制到剪贴板的问题

    而ZeroClipboard利用了Flash技术,巧妙地规避了这一限制,为开发者提供了一种方便、兼容性良好的解决方案。 首先,让我们深入了解一下剪贴板API。在浏览器环境中,JavaScript原生并不支持直接操作剪贴板,主要是...

    ZeroClipboard跨浏览器复制到剪切板

    ZeroClipboard巧妙地利用了Flash技术,使得这一功能在各个主流浏览器中都能实现,因为早期HTML5的Clipboard API并不普及或兼容性不佳。 ZeroClipboard的工作原理是创建一个透明的Flash对象覆盖在可点击的元素(如...

    ZeroClipboard.js实现js复制功能

    《使用ZeroClipboard.js实现JavaScript复制功能详解》 在Web开发中,我们经常遇到需要实现文本复制功能的情况,...同时,随着技术的更新迭代,我们也要关注新的API和解决方案,以便在未来能够更好地满足用户的需求。

    ZeroClipboard.zip

    ZeroClipboard是一款开源JavaScript库,主要用于实现网页上的“复制到剪贴板”功能。...尽管现代浏览器已经开始支持HTML5的`...然而,对于仍需支持旧版浏览器的项目,ZeroClipboard仍然是一个值得考虑的解决方案。

    JS实现点击复制功能(ZeroClipboard)

    总的来说,ZeroClipboard提供了一种方便的跨浏览器复制功能,尽管随着技术的发展,其依赖的Flash插件可能会逐渐失去支持,但在目前仍然是一种实用的解决方案。理解它的基本用法和工作原理,可以帮助开发者为用户提供...

Global site tag (gtag.js) - Google Analytics