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 相关文章推荐
11款基于Javascript的文件管理器
Oct 25 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 Javascript
layui表格数据重载
Jul 27 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批量生成随机用户名
2008/07/10 PHP
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
PHP代码加密的方法总结
2020/03/13 PHP
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
Python中bisect的使用方法
2019/12/31 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
车工岗位职责
2013/11/26 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
建房合同协议书
2016/03/21 职场文书
七年级作文之环保作文
2019/10/17 职场文书