Js+Flash实现访问剪切板操作


Posted in Javascript onNovember 20, 2012

最近需要遇到了这个问题点击按钮复制链接的功能果断度娘谷哥。最后找到得解决方案ZeroClipBoard一款开源得js+Flash实现得剪切板操作
但是搜寻了众多例子之后发现大多都是介绍一个页面只有一个固定的复制操作
Js+Flash实现访问剪切板操作
而我得需求是这样
一个动态Repeater动态加载出各个地址和复制按钮。
这个解决方案得原理是:
拿js动态加载一个透明flash.然后遮盖到你要点击得按钮上面,之后在给这个flash得承载元素上绑定事件动态把要复制得值传递到flash中,用flash访问剪切板.
这时候就出现这么一个问题多个按钮如果每个按钮都加栽一遍flash得话会很吃内存并且动态得代码也不是很好写
最后得解决方案如下:

<divid="ClipSwf"style="left:-1000px;position:absolute;width:80px;height:25px;"></div>

1.现在Body中放置一个隐藏得flash容器绝对定位
varLocalUrlManage={ 
Clip:null, 
ClipContainer:null, 
InitClip:function(){ 
LocalUrlManage.Clip=newZeroClipboard.Client(); 
LocalUrlManage.ClipContainer=$("#ClipSwf"); 
LocalUrlManage.Clip.setHandCursor(true); 
LocalUrlManage.Clip.setCSSEffects(true); 
LocalUrlManage.Clip.addEventListener("complete",function(client,text){ 
Tip.RightTip("#UrlAdd",text+","+"复制成功!"); 
}); 
LocalUrlManage.ClipContainer.html(LocalUrlManage.Clip.getHTML(80,25)); 
}}

2.使用js在页面加载完成得时候初始化剪切板的对象并设置鼠标手势和承载容器然后把flash输出成html输出到容器中
onmouseover="LocalUrlManage.SetClipValue(this,'#copyUrlValue<%#Eval("Id")%>')">点击复制</button>

SetClipValue:function(obj,SelectorEl){ 
//BrowserClip.IEClip($(SelectorEl).val()); 
varoffset=$(obj).offset(); 
LocalUrlManage.ClipContainer.offset({left:offset.left,top:offset.top}); 
LocalUrlManage.Clip.setText($(SelectorEl).val()); 
}.

3.在各个复制按钮上动态绑定事件并把响应的要复制得值或者控件传递到function中之后设置隐藏flash容器得left,top边距让其漂浮在触发该事件得按钮上并把要复制的值通过
Clip.setText('text')(插件提供得方法)传递给flash这样就实现了多个按钮复制得功能
未解决问题,原本按钮得hovercss切换效果flash遮盖之后就不太灵活了。用jquery动态添加样式效果也不太好。
Javascript 相关文章推荐
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 #Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 #Javascript
基于jquery库的tab新形式使用
Nov 16 #Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 #Javascript
javascript 图片裁剪技巧解读
Nov 15 #Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 #Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 #Javascript
You might like
星际RPG字典
2020/03/04 星际争霸
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
DOM 基本方法
2009/07/18 Javascript
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
Python中获取网页状态码的两个方法
2014/11/03 Python
Python实现的多线程端口扫描工具分享
2015/01/21 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
爱游人:Travelliker
2017/09/05 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
自我鉴定200字
2013/10/28 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
企业标语口号
2014/06/10 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
期末考试复习计划
2015/01/19 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android