- 浏览: 2613725 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (1286)
- js-oop (2)
- js-window (10)
- js-event (19)
- js-string (37)
- js-array (27)
- js-page (4)
- js-dom (62)
- js-lang (8)
- js-number (7)
- js-platform (3)
- js-object (15)
- js-element (3)
- js-browser (7)
- js-url (6)
- js-date (10)
- css基础 (48)
- css优化 (15)
- html基础 (17)
- html标签 (19)
- js基础 (117)
- js-兼容性差异 (33)
- js引擎 (3)
- js性能 (14)
- json (6)
- jQuery源码浅析 (43)
- web mobile开发资料 (78)
- js跨域 (2)
- html5 (74)
- html5-canvas (7)
- css3 (53)
- 浏览器 (5)
- api设计学 (3)
- js-加载 (3)
- linux (37)
- 架构师 (1)
- php (2)
- self开发的脚本库--凤凰 (2)
- web应用名词 (6)
- javascript新特性翻译 (8)
- ajax (6)
- jQuery动画效果 (7)
- prototype的解读 (13)
- 优秀插件翻译 (1)
- css解决方案 (26)
- 数据库 (2)
- english daily (59)
- 浏览器内核探究 (1)
- jQuery插件介绍 (9)
- jquery基础篇 (26)
- chrome浏览器问题整理 (14)
- js选择器那些事 (3)
- 前端框架 (26)
- Firefox私有属性 (11)
- webkit私有属性集合 (17)
- 书籍推荐 (21)
- 数据结构 (1)
- 网站建设相关 (7)
- 好文翻译 (2)
- 个人作品 (3)
- kissy的解读 (4)
- css-layout(布局研究) (5)
- less研究 (1)
- YUI探究 (1)
- hash探究 (1)
- js动画 (7)
- 前端面试题 (37)
- css书写规范 (1)
- js模板引擎 (6)
- js模块化 (19)
- 编写高质量代码 (3)
- 性能探究--应用协议 (2)
- 前端图像处理 (19)
- Mac OS相关 (21)
- 正则表达式 (11)
- 离线应用相关 (0)
- 前端工具 (65)
- nodeJS (55)
- jquery优化篇 (2)
- 设计模式探究系列 (3)
- windows7 (2)
- IE10 (10)
- 微博开放平台探究 (2)
- 常用web服务接口 (1)
- 数据存储相关 (8)
- 零时文件 (2)
- jQuery Mobile (16)
- backbone (15)
- underscore (22)
- sass (11)
- android (3)
- phonegap (10)
- IE私有 (11)
- qwrap (8)
- git (14)
- chrome extensions (5)
- freemarker (11)
- angularJS (3)
- seo (2)
- markdown (3)
- css动画 (4)
- 安卓开发 (2)
- React (7)
- 活动页技术 (1)
- 网络安全 (3)
- grunt (7)
- Lo-Dash (3)
- 前端国际化 (4)
- 版本控制 (2)
- 盒模型 (4)
- 微信开发 (1)
- Mock数据工具 (1)
- sails (1)
- vim (1)
- js-color (1)
- iOS 基础 (43)
最新评论
-
jertom:
<div id="showInfo" ...
addEventListener等事件监听的参数细谈 -
乌托邦国王:
引用[u][/u]
css3动画属性系列之transform细讲移动translate -
hvang1988:
能提供附件下载吗,找不到js库,google封了访问不了
Syntaxhighlighter---代码高亮插件介绍 -
sscsacdsadcsd:
我的天 那到底是为什么function是object我看und ...
typeof func ==='function'的疑惑 -
wkjiangwk:
试了,没用,你们从不去测试。
介绍一下x-webkit-speech -------实现语音输入
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)
- glue是粘合的意思,依据elem的位置生成一个div覆盖在elem上面
- 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
发表评论
-
TweenMax
2014-03-31 17:32 1025TweenMax: 在线调用:http ... -
动画框架之Sprite
2014-02-18 13:44 983Sprite.js An ... -
bootstrap分拆之table
2013-07-11 14:44 0本文整理一下bootstrap中tabl ... -
jquery全屏版插件
2013-04-11 13:29 0先贴上代码: ;(function($) ... -
好东西之--获取ie版本号的一种方式
2013-05-08 10:22 1556先看一段jqm1.1.0版本的代码: ... -
backboneJS
2013-02-21 17:05 1354backbone.js 重量级js ... -
Sizzle简介
2013-01-28 12:21 1507Sizzle 从jq的1.3开始,jq也采用S ... -
a javascript module pattern
2013-01-21 14:13 1404本文介绍一种不错的module pattern. ... -
响应式框架Foundation简介
2013-01-15 19:34 0响应式框架:Foundation 官方地址: ... -
Turn.js简介
2013-01-14 11:18 1509本文简单介绍一下turn.js这个东东! 主 ... -
AppJS简介
2013-01-10 19:49 2020本文介绍一下AppJs. 官网:http:// ... -
移动框架Zeptp介绍
2012-12-13 13:10 1610本文简单介绍一下Zepto. 基于移 ... -
关于页面依赖文件加载失败处理的一种“独特”设计
2012-12-07 17:00 2406问题与需求: ... -
关于页面依赖文件加载失败处理的一种“独特”设计
2012-12-07 16:59 1问题与需求: 某个项目首页或者首屏在弱网络环境下,或 ... -
项目开发设计之设计文档编写规范
2012-11-18 14:57 3503前言: 慢慢地,很多fe也会接触到一些比较大中型的项目 ... -
初识BigPipe
2012-11-12 14:38 1555BigPipe ------ 一个重新设计的基础动态 ... -
关于专业化前端的自我修养总结反思篇
2012-10-21 16:48 4014前言: 其实很 ... -
关于专业化前端的自我修养总结反思篇
2012-10-21 16:45 3前言: 其实很多fe,当然包含我自身,很多时间很多场 ... -
框架设计之Get first Set all原则
2012-10-11 17:46 1320本思想其实很简单: Get first: ... -
思考js框架模型
2012-09-27 11:29 1625其实这两个词都不陌生,也有很多人研读了各个流行开源库的源码,甚 ...
相关推荐
在网页开发中,有时候我们需要为用户提供方便快捷地复制特定文本或数据的功能,而ZeroClipboard正好提供了这样一个解决方案。 ZeroClipboard的工作原理是利用HTML5的`data-clipboard-target`属性或`data-clipboard-...
这个库尤其重要,因为浏览器的安全策略通常限制了JavaScript直接访问剪贴板,而ZeroClipboard通过Flash技术绕过了这一限制,提供了兼容多种浏览器的解决方案。 首先,让我们深入了解一下ZeroClipboard的工作原理。...
这个文本文件可以帮助你更好地理解和应用ZeroClipboard库,解决在不同浏览器中的复制粘贴兼容性问题。通过正确使用ZeroClipboard,开发者可以为用户提供一致且便捷的复制体验,无论他们使用的是哪种浏览器。
ZeroClipboard是一个实用的工具,它使网页开发者能够方便地添加复制到剪贴板的功能,尽管随着技术进步,HTML5的Clipboard API逐渐成为更推荐的选择,但考虑到浏览器兼容性和旧项目的维护,ZeroClipboard仍然是一个...
但目前,ZeroClipboard仍然是一个广泛使用的解决方案,特别是对于需要兼容老版本浏览器的项目。 在实际应用中,你还需要考虑一些细节问题,比如Flash的安全策略、跨域问题、以及如何确保在用户点击按钮时正确触发...
现在推荐使用更现代的解决方案,如Web API的`navigator.clipboard.writeText()`,但它需要用户的权限并且在某些浏览器中可能有兼容性问题。 - 使用ZeroClipboard时,确保用户的浏览器启用了Flash,否则复制功能将...
`ZeroClipboard`和`clipboard`分别代表了不同时期的跨浏览器复制文本的解决方案。对于新项目,推荐使用`clipboard`,因为它更轻量、更现代且不依赖Flash。但对于需要支持旧版浏览器的项目,`ZeroClipboard`仍是一个...
尽管现代浏览器和设备逐渐淘汰了Flash,但ZeroClipboard仍然为那些需要兼容旧版浏览器的项目提供了解决方案。 要开始使用ZeroClipboard,首先需要在HTML文件中引入ZeroClipboard的相关资源。在你的`index.html`文件...
5. **处理浏览器兼容性**:虽然ZeroClipboard.js能够兼容大多数浏览器,但需要注意的是,随着Flash逐渐被淘汰,一些现代浏览器可能不再支持Flash。因此,你可能需要提供一个备选方案,如使用浏览器原生的`navigator....
然而,由于Web Clipboard API目前仍存在浏览器兼容性问题,ZeroClipboard仍然是一个可靠的跨浏览器解决方案。如果你的应用主要面向现代浏览器,也可以考虑直接使用Web Clipboard API。 总的来说,ZeroClipboard是一...
然而,考虑到Flash的退役,开发者应该考虑逐步迁移到更现代的复制解决方案,如使用Web API的`navigator.clipboard.writeText()`方法,尽管这可能需要处理更多浏览器兼容性问题。总的来说,理解ZeroClipboard的工作...
由于Flash在大多数现代浏览器中都是支持的,ZeroClipboard能够作为一个解决方案来统一不同浏览器间的复制行为。虽然现在HTML5提供了更原生的剪贴板API,但考虑到老版本浏览器的兼容性,ZeroClipboard仍然是一个有...
为了解决这个问题,开发者可以选择使用更现代的解决方案,如基于Web API `navigator.clipboard.writeText()` 的库,但这通常需要考虑浏览器兼容性问题。ZeroClipboard的一个替代方案是使用`clipboard.js`,这是一个...
而ZeroClipboard利用了Flash技术,巧妙地规避了这一限制,为开发者提供了一种方便、兼容性良好的解决方案。 首先,让我们深入了解一下剪贴板API。在浏览器环境中,JavaScript原生并不支持直接操作剪贴板,主要是...
ZeroClipboard巧妙地利用了Flash技术,使得这一功能在各个主流浏览器中都能实现,因为早期HTML5的Clipboard API并不普及或兼容性不佳。 ZeroClipboard的工作原理是创建一个透明的Flash对象覆盖在可点击的元素(如...
《使用ZeroClipboard.js实现JavaScript复制功能详解》 在Web开发中,我们经常遇到需要实现文本复制功能的情况,...同时,随着技术的更新迭代,我们也要关注新的API和解决方案,以便在未来能够更好地满足用户的需求。
ZeroClipboard是一款开源JavaScript库,主要用于实现网页上的“复制到剪贴板”功能。...尽管现代浏览器已经开始支持HTML5的`...然而,对于仍需支持旧版浏览器的项目,ZeroClipboard仍然是一个值得考虑的解决方案。
总的来说,ZeroClipboard提供了一种方便的跨浏览器复制功能,尽管随着技术的发展,其依赖的Flash插件可能会逐渐失去支持,但在目前仍然是一种实用的解决方案。理解它的基本用法和工作原理,可以帮助开发者为用户提供...