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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
PHP+DBM的同学录程序(5)
2006/10/09 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
python时间整形转标准格式的示例分享
2014/02/14 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
学校司机岗位职责
2013/11/14 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
爱护公共设施的标语
2014/06/24 职场文书
保险公司演讲稿
2014/09/02 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
护理见习报告范文
2014/11/03 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
《落花生》教学反思
2016/02/16 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
八年级作文之友谊
2019/12/02 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers
instantclient客户端 连接oracle数据库
2022/04/26 Oracle