• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > Jquery跨浏览器文本复制插件Zero Clipboard的使用方法

Jquery跨浏览器文本复制插件Zero Clipboard的使用方法

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了Zero,Clipboard,文本复制等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

当开发者需要对某局部文本进行点击复制效果时,在IE下实现比较简单。但要想做到跨浏览器比较困难了。Zero Clipboard 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比IE的document.execCommand(“Copy”) 更加灵活。

Zero Clipboard 的实现原理

Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进,用了一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了。

Zero Clipboard 特点介绍:
兼容支持Flash 10
避免使用第三方浏览器插件(的Adobe Flash浏览器中的安全冲突)
无形的覆盖,无干扰,页面设计
支持CSS“悬停”和“活跃”状态
保留目标元素的“点击”,”mouseenter”和”mouseleave”的事件
供应回调函数“复制前”和“复制”
极轻的重量! (7KB精缩)

首先下载 Zero Clipboard ,并解压缩。其中需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf ,将这两个文件放入到你的项目中。
点击下载:jquery.zclip.1.1.1

用法:

1.) 首先引入核心文件

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zclip.js"></script>

2.) 在页面代码里写入功能模块,定义copy复制按钮元素属性信息

<script language="javascript">
$(document).ready(function(){
 
    $('a#copy-description').zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('p#description').text()
    });
 
    // The link with ID "copy-description" will copy
    // the text of the paragraph with ID "description"
 
 
    $('a#copy-dynamic').zclip({
        path:'js/ZeroClipboard.swf',
        copy:function(){return $('input#dynamic').val();}
    });
 
    // The link with ID "copy-dynamic" will copy the current value
    // of a dynamically changing input with the ID "dynamic"
 
});
</script>

例一:

<a href="#" id="copy-description">点击复制效果预览</a>
<p id="description">文本源……</p>

例二:

<a href="#" id="copy-dynamic">点击复制效果预览:</a><input style="width:300px; margin-left:15px;" type="text" id="dynamic" value="Insert any text here." onfocus="if(this.value=='Insert any text here.'){this.value=''}" onblur="if(this.value==''){this.value='Insert any text here.'}" />

3.) 供应定制的回调函数。

<script language="javascript">
$(document).ready(function(){
 
    $("a#copy-callbacks").zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('#callback-paragraph').text(),
        beforeCopy:function(){
            $('#callback-paragraph').css('background','yellow');
            $(this).css('color','orange');
        },
        afterCopy:function(){
            $('#callback-paragraph').css('background','green');
            $(this).css('color','purple');
            $(this).next('.check').show();
        }
    });
 
});
</script>

3.) 默认参数。


扩展介绍:
1.) 测试兼容IE6,IE7,IE8,FF 3.6,Chrome浏览器8,Safari 5的,歌剧11
2.) 适当的CSS特效:

/* zClip is a flash overlay, so it must provide */
/* the target element with "hover" and "active" classes */
/* to simulate native :hover and :active states. */
/* Be sure to write your CSS as follows for best results: */
 
/*大概意思就是说 ZeroClip是flash叠加……就是说flash叠加在了text文本上,其实显示文字可以根据css来定义*/
a:hover, a.hover {...}
a:active, a.active {...}

在线演示:
1、http://demo.jb51.net/js/2016/jquery_zclip/demo1.html
2、http://demo.jb51.net/js/2016/jquery_zclip/demo2.html

至此,该插件使用方法已经介绍结束,对于使用者的开发者来说,剩下的扩展方面就要根据需求而定了。

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery实现复制到粘贴板功能
  • Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
  • Jquery跨浏览器文本复制插件Zero Clipboard的使用方法

相关文章

  • jQuery+.net实现浏览更多内容(改编php版本)
  • 对象不支持indexOf属性或方法的解决方法(必看)
  • jQuery实现的超链接提示效果示例【附demo源码下载】
  • jquery+css实现动感的图片切换效果
  • JQuery.dataTables表格插件添加跳转到指定页
  • 使用jquery实现div的tab切换实例代码
  • JQuery的ajax基础上的超强GridView展示
  • jQuery中[attribute]选择器用法实例
  • jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
  • jQuery改变form表单的action,并进行提交的实现代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery纵向导航菜单效果实现方法
    • jquery使用Cookie和JSON记录用户最近浏览历史
    • jQuery提交多个表单的小技巧
    • JQUERY的属性选择符和自定义选择符使用方法(二)
    • 非常强大的 jQuery.AsyncBox 弹出对话框插件
    • jQuery插件Validation快速完成表单验证的方式
    • jQuery 实现评论等级好评差评特效
    • 使用jQuery解决IE与FireFox下createElement方法的差异
    • jQuery实现html表格动态添加新行的方法
    • 推荐11款jQuery开发的复选框和单选框美化插件

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有