• ZeroClipboard实现复制功能


        在浏览网页时可以看到复制功能,如:在看一个带有源码的demo时,可以点击复制,把源码复制到剪切板,然后粘贴到本地review,ie浏览器可以使用浏览器内置对象(window.clipboradData)
    的setData方法,
    但无法兼容其他浏览器,下面介绍ZeroClipboard:

    一、原理
    ZeroClipboard利用透明的flash让其漂浮在复制按钮之上,将需要复制的内容传入flash,在通过flash的复制功能把传入的内容复制到剪切板。


    二、结构

    1、ZeroClipboard其实是国外的一个js类库,源码结构如:
    var ZeroClipboard = {
        //这里是属性和方法.....    
    };
    
    ZeroClipboard.Client.prototype = {
        //扩展方法
    };
    
    2、创建对象,如:
    var clip = new ZeroClipboard.Client();
    //调用扩展方法
    

    点击
    这里下载文件
    查看github源码百度文库


    三、简单配置


    下载下来的ZeroClipboard文件有一个js和swf文件,在js文件中需要正确配置moviePath路径,可以配置相对和绝对路径,也可以
    调用实例对象的moviePath()设置正确的路径;
    另一个需要注意的地方是本地测试时,需要Apache服务器



    四、domo实例

    CSS:
    .box {  300px; height: 100px; margin: 100px auto; }
    
    HTML:
    <div class="box">
        <textarea id="J_share_text" class="share-text"></textarea>
        <input class="btn" id="J_copy_clipboard_data" type="button" value="复制">
    </div>
    
    JavaScript:
    (function() {
        $(function() {
            var clip = new ZeroClipboard.Client();
            clip.setHandCursor(true);
            clip.glue('J_copy_clipboard_data');
            clip.addEventListener('mouseDown',function() {
                clip.setText(ZeroClipboard.$('#J_share_text').val());
            });
        });      
    })()
    

    完整demo:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>ZeroClipboard demo实例</title>
    <link href="http://a.tbcdn.cn/apps/e/tms/120951/bootstrap.css" rel="stylesheet">
    <style>
    .box {  300px; height: 100px; margin: 100px auto; }
    </style>
    </head>
    
    <div class="box">
        <textarea id="J_share_text" class="share-text"></textarea>
        <input class="btn" id="J_copy_clipboard_data" type="button" value="复制">
    </div>
    
    <body>
    <script src="http://a.tbcdn.cn/apps/e/tms/120951/zeroclipboard.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
    <script src="http://a.tbcdn.cn/apps/e/tms/120951/bootstrap.js"></script>
    
    <script>
    (function() {
    	$(function() {
    		var	clip = new ZeroClipboard.Client();
    		clip.setHandCursor(true);
    		clip.glue('J_copy_clipboard_data');
    		clip.addEventListener('mouseDown',function() {
    			clip.setText($('#J_share_text').val());
    		});
    	});	  
    })()
    </script>
    
    </body>
    </html>
    
  • 相关阅读:
    如何在IIS添加MIME扩展类型
    如何在ASP.NET的web.config配置文件中添加MIME类型
    Entity Framework 数据库先行、模型先行、代码先行
    Entity Framework 代码先行之约定配置
    netcore3.0 IOptions 选项(一)
    netcore3.0 IFileProvider 文件系统
    netcore3.0 IServiceCollection 依赖注入系统(三)
    netcore3.0 IServiceCollection 依赖注入系统(二)
    netcore3.0 IServiceCollection 依赖注入系统(一)
    netcore3.0 IConfiguration配置源码解析(四)
  • 原文地址:https://www.cnblogs.com/yangjunhua/p/2678817.html
Copyright © 2020-2023  润新知