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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
splice slice区别
Oct 09 Javascript
又一个小巧的图片预加载类
May 05 Javascript
比较搞笑的js陷阱题
Feb 07 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
javascript的hashCode函数实现代码小结
Aug 11 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通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
node.js通过url读取文件
2020/10/16 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
模具数控专业自荐信
2014/01/27 职场文书
数学国培研修感言
2014/02/13 职场文书
物业保安岗位职责
2014/07/02 职场文书
出生医学证明书
2014/09/15 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
600字作文之感受大自然
2019/11/27 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL