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 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
js异步编程小技巧详解
Aug 14 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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与XML的PDF文档生成技术
2006/10/09 PHP
提取HTML标签
2006/10/09 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
CentOS安装php v8js教程
2015/02/26 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
JS 自动安装exe程序
2008/11/30 Javascript
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
python文件的md5加密方法
2016/04/06 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
python实现按首字母分类查找功能
2019/10/31 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
公务员政审材料范文
2014/12/23 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server