这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近需要遇到了这个问题点击按钮复制链接的功能果断度娘谷哥, 最后找到得解决方案 ZeroClipBoard 一款开源得 js+Flash 实现得剪切板操作
最近需要遇到了这个问题点击按钮复制链接的功能果断度娘谷哥。最后找到得解决方案 ZeroClipBoard 一款开源得 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 动态添加样式效果也不太好。
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0704/281458.html