zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    Java的类演进过程
    P112、面试题16:反转链表
    P107、面试题15:链表中倒数第K个结点
    Java对象相关元素的初始化过程
    P102、面试题14:调整数组顺序使奇数位于偶数前面
    P99、面试题13:在o(1)时间删除链表结点
    面试常考的数据结构Java实现
    Linux命令面试常考的简单汇总
    操作系统与进程基础知识
    python--process
  • 原文地址:https://www.cnblogs.com/yangjunhua/p/2678817.html
Copyright © 2011-2022 走看看