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实现简单的数字倒计时
May 15 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
JS实现随机点名器
Apr 12 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
Vue通过provide inject实现组件通信
Sep 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下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
js同源策略详解
2015/05/21 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
python从ftp下载数据保存实例
2013/11/20 Python
Python的类实例属性访问规则探讨
2015/01/30 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
详解如何减少python内存的消耗
2019/08/09 Python
Python实现对adb命令封装
2020/03/06 Python
详解Python 函数参数的拆解
2020/09/02 Python
python解包用法详解
2021/02/17 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
学生自我评语大全
2014/04/18 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
事业单位考察材料范文
2014/12/25 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL