Deprecated: 函数 get_currentuserinfo 自版本 4.5.0 起已弃用!请使用 wp_get_current_user() 替代。 in /data/home/qxu1142130176/htdocs/wp-includes/functions.php on line 5383
最新消息:

ZeroClipboard2.0 复制功能

前端 前端收藏 16009浏览 0评论

https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/api/ZeroClipboard.Core.md

The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface. The “Zero” signifies that the library is invisible and the user interface is left entirely up to you.

使用:

1、引入js文件,记得先引入jquery

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

2、然后配置swf文件的路径

ZeroClipboard.config( { swfPath"http://YOURSERVER/path/ZeroClipboard.swf" } );

3、创建客户端

var client = new ZeroClipboard($(".copy-button"));

4、使用copy功能

client.on"copy", function (event) {
  var clipboard = event.clipboardData;
  clipboard.setData"text/plain""Copy me!" );
  alert('copy over!);
  // clipboard.setData( "text/html", "<b>Copy me!</b>" );
  // clipboard.setData( "application/rtf", "{\\rtf1\\ansi\n{\\b Copy me!}}" );
});

简单使用ok!

下面附上一个完整的例子:

<html>
  <head>
    <style type="text/css">
      .clip_button {
        text-align: center;
        border1px solid black;
        background-color#ccc;
        margin10px;
        padding10px;
      }
      .clip_button.zeroclipboard-is-hover { background-color#eee; }
      .clip_button.zeroclipboard-is-active { background-color#aaa; }
    </style>
  </head>
  <body>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="ZeroClipboard.js"></script>

    <div class="clip_button">Copy To Clipboard</div>
    <div class="clip_button">Copy This Too!</div>

    <script type="text/javascript">
      var client = new ZeroClipboard( $('.clip_button') );

      client.on( 'ready'function(event{
        // console.log( 'movie is loaded' );

        client.on( 'copy'function(event{
          event.clipboardData.setData('text/plain', event.target.innerHTML);
        } );

        client.on( 'aftercopy'function(event{
          console.log('Copied text to clipboard: ' + event.data['text/plain']);
        } );
      } );

      client.on( 'error'function(event{
        // console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
        ZeroClipboard.destroy();
      } );
    </script>
  </body></html>

转载请注明:前端收藏 » ZeroClipboard2.0 复制功能

您必须 登录 才能发表评论!