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 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
微信小程序实现手势滑动效果
Aug 26 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
定义php常量的详解
2013/06/09 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
js word表格动态添加代码
2010/06/07 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
python中列表元素连接方法join用法实例
2015/04/07 Python
python日志记录模块实例及改进
2017/02/12 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
房屋转让协议书
2014/04/11 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
具结保证书
2015/01/17 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
特此通知格式
2015/04/27 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python