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 相关文章推荐
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
利用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
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
python字符串对其居中显示的方法
2015/07/11 Python
python迭代器与生成器详解
2016/03/10 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
matplotlib绘制动画代码示例
2018/01/02 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
数据库专业英语
2012/11/30 面试题
大二学习计划书范文
2014/04/27 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
计划生育工作总结2015
2015/04/03 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
python实现图片批量压缩
2021/04/24 Python
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS