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 相关文章推荐
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
vue中改变滚动条样式的方法
Mar 03 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制作静态网站的模板框架
2006/10/09 PHP
PHP类中Static方法效率测试代码
2010/10/17 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
javascript之学会吝啬 精简代码
2010/04/25 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
python如何将图片转换为字符图片
2020/08/19 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
c语言常见笔试题总结
2016/09/05 面试题
颁奖晚会主持词
2014/03/25 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js