源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-02-28 19:00 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
当开发者需要对某局部文本进行点击复制效果时,在IE下实现比较简单。但要想做到跨浏览器比较困难了。Zero Clipboard 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比IE的document.execCommand(“Copy”) 更加灵活。 [b]Zero Clipboard 的实现原理[/b] 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 ,将这两个文件放入到你的项目中。 点击下载:[url=http://www.1sucai.cn/jiaoben/434621.html]jquery.zclip.1.1.1[/url] 用法: 1.) 首先引入核心文件
[url=#] <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特效: 在线演示: 1、[url=http://demo.jb51.net/js/2016/jquery_zclip/demo1.html]http://demo.jb51.net/js/2016/jquery_zclip/demo1.html[/url] 2、[url=http://demo.jb51.net/js/2016/jquery_zclip/demo2.html]http://demo.jb51.net/js/2016/jquery_zclip/demo2.html[/url] 至此,该插件使用方法已经介绍结束,对于使用者的开发者来说,剩下的扩展方面就要根据需求而定了。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部