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 相关文章推荐
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 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/11/01 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
JS的反射问题
2010/04/07 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
python计算书页码的统计数字问题实例
2014/09/26 Python
python定时执行指定函数的方法
2015/05/27 Python
python编写简单爬虫资料汇总
2016/03/22 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
python实现ID3决策树算法
2017/12/20 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
Python实现异步IO的示例
2020/11/05 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
小学生元旦感言
2014/02/26 职场文书
小学英语课后反思
2014/04/26 职场文书
高考励志标语
2014/06/05 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
家长高考寄语
2015/02/27 职场文书
入党介绍人意见2015
2015/06/01 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python