jQuery插件：跨浏览器复制jQuery-zclip

jQuery插件：跨浏览器复制jQuery-zclip

jQuery-zclip是一个复制内容到剪贴板的jQuery插件，使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。jQuery-zclip插件需要Flash的支持，使用时记得安装Adobe Flash Player。

//引入jQuery-zclip相关js及swf文件
<script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/resources/js/jquery.zclip.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#cp-btn").zclip({
        path:'<%=path%>/resources/js/ZeroClipboard.swf', //记得把ZeroClipboard.swf引入到项目中 
        copy:function(){
            return $('#inviteUrl').val();
        }
    });
});
</script>

<div class=form-row>
    <div class=col-md-5>
        <input class=form-control value="" id="inviteUrl"/>
    </div>
    <div class=col-md-1>
        <a href="javascript:void(0)" id="cp-btn"
            class="btn btn-default btn-block btn-clean">复  制</a>
    </div>
</div>

应用例子：

部分API.js代码

require(["jquery", "bootstrap", "ie10-viewport-hack","bootstrap-modal-hack", "bootstrap-notify","jquery-zclip", "jquery-validation"], function($){
  // DOM ready
  $(function(){
      
      var path = '/assets/js/libs/jquery-zclip/ZeroClipboard.swf';
      var copyText="复制成功!";
      //复制WriteToken
      $("#copyWriteToken").zclip({
          path:path, //把ZeroClipboard.swf引入到项目中 
          copy:function(){
              return $('#writetoken').val();
          },
          afterCopy:function(){
              Notify.success("<i class='glyphicon glyphicon-saved'></i> "+copyText, 3);
          }
      });
      
      //复制ReadToken
      $("#copyReadToken").zclip({
          path:path, //把ZeroClipboard.swf引入到项目中 
          copy:function(){
              return $('#readtoken').val();
          },
          afterCopy:function(){
              Notify.success("<i class='glyphicon glyphicon-saved'></i> "+copyText, 3);
          }
      });
      
      //复制SecretKey
      $("#copySecretKey").zclip({
          path:path, //把ZeroClipboard.swf引入到项目中 
          copy:function(){
              return $('#secretkey').val();
          },
          afterCopy:function(){
              Notify.success("<i class='glyphicon glyphicon-saved'></i> "+copyText, 3);
          }
      });
   });
});

html

<#-- 页头 -->
<#assign pageTitle>API接口</#assign>
<#assign currentNav="main">
<#include "/secure/commons/header.ftl">
<style>
.form-horizontal .control-label{
/* text-align:right; */
text-align:left;
}
</style>
<div class="container-fluid">
    <div class="row main">
        <div class="col-md-2">
          <#assign sidebarNav = "api">
          <#include "sidebar.ftl">
        </div>
        <div class="col-md-10">
          <h3 class="page-header">API接口</h3>
          <div class="panel panel-default">
            <div class="panel-body">
            
              <form action="/secure/setting/api" role="form" id="editForm" class="col-sm-6 form-horizontal">
                  <div class="form-group">
                    <label for="userid" class="col-sm-2 control-label">userid</label>
                    <div class="col-sm-6">
                      <input type="text" id="userid" name="userid" value="${user.userid}" class="form-control" required readonly="readonly">
                    </div>
                  </div>
                  
                  <div class="form-group">
                    <label for="writetoken" class="col-sm-2 control-label">writetoken</label>
                    <div class="col-sm-6">
                      <input type="text" id="writetoken" name="writetoken" value="${user.writetoken}" class="form-control" required readonly="readonly">
                    </div>
                    <button class="btn btn-primary" type="button" id="copyWriteToken">复制</button>
                    <button class="btn btn-primary" type="button" id="changeWriteToken">更换</button>  
                  </div>
                  
                  <div class="form-group">
                    <label for="readtoken" class="col-sm-2 control-label">readtoken</label>
                    <div class="col-sm-6">
                      <input type="text" id="readtoken" name="readtoken" value="${user.readtoken}" class="form-control" required readonly="readonly">
                    </div>
                    <button class="btn btn-primary" type="button" id="copyReadToken">复制</button>
                    <button class="btn btn-primary" type="button" id="changeReadToken">更换</button>  
                  </div>
                  
                  <div class="form-group">
                    <label for="secretkey" class="col-sm-2 control-label">secretkey</label>
                    <div class="col-sm-6">
                      <input type="text" id="secretkey" name="secretkey" value="${user.secretkey}" class="form-control" required readonly="readonly">
                    </div>
                    <button class="btn btn-primary" type="button" id="copySecretKey">复制</button>
                    <button class="btn btn-primary" type="button" id="changeSecretKey">更换</button>  
                  </div>
                  
                  <div class="form-group">
                    <label for="secretkey" class="col-sm-4 control-label">接口调用使用secretkey签名</label>
                    <div class="col-sm-6" style="padding-top:10px;">
                      <input type="radio" name="sign" id="signY" value="1" <#if "1"=="${(user.sign)!''}">checked="checked"</#if>> 是
                      <input type="radio" name="sign" id="signN" value="0" <#if "0"=="${(user.sign)!''}">checked="checked"</#if>> 否
                    </div>
                  </div>
                  
                   <button class="btn btn-primary" type="submit">保  存</button>  
              </form>
              </div>
                     
            </div>
          </div>
          
        </div>
      </div>

    </div> <!-- /container -->

<#-- 待加载的JS -->
<#assign mainJS="controller/secure/setting/api">

<#-- 页脚 -->
<#include "/secure/commons/footer.ftl">

页脚模板加载的js( footer-script-development.ftl)

<#-- RequireJS的全局配置，测试环境 -->
<script>
    var require = {
        baseUrl : "/assets/js", 
        urlArgs : "bust=" + new Date().getTime(),
        
        paths : {
            "jquery" : "libs/jquery/jquery-1.11.1.min",
            "jquery-validation" : "libs/jquery-validation/1.14.0/jquery.validate.min",
            "bootstrap" : "libs/bootstrap/3.3.6/js/bootstrap.min",
            "bootstrap-modal-hack" : "utils/bootstrap-modal-hack",
            "bootstrap-notify" : "utils/bootstrap-notify",
            "ie10-viewport-hack" : "libs/hacks/ie10-viewport-bug-workaround",
            "echarts" : "libs/echarts/2.2.7/echarts",
            "echarts-all" : "libs/echarts/2.2.7/echarts-all",
            "datepicker" : "libs/datepicker/js/bootstrap-datepicker",
            "plupload" : "libs/plupload/2.1.8/plupload.min",
            "plupload-full" : "libs/plupload/2.1.8/plupload.full.min",
            "bootstrap-treeview" : "libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min",
            "bootbox" : "libs/bootbox/4.4.0/bootbox.min",
            "pagination" : "libs/Mricode.Pagination-master/mricode.pagination",
            "jquery-zclip" : "libs/jquery-zclip/jquery.zclip",//jquery复制插件
            "wdatepicker" : "libs/My97DatePicker/WdatePicker"
        },
        
        shim : {
            "jquery-validation" : { "deps" : ["jquery"] },
            "jquery-zclip" : { "deps" : ["jquery"] },
            "bootstrap" : { "deps" : ["jquery"] },
            "bootstrap-modal-hack" : { "deps" : ["jquery"] },
            "bootstrap-notify" : { "deps" : ["jquery"] },
            "ie10-viewport-hack" : { "deps" : ["jquery"] },
            "datepicker" : { "deps" : ["jquery", "bootstrap"] },
            "bootstrap-treeview" : { "deps" : ["jquery", "bootstrap"] },
            "bootbox" : { "deps" : ["jquery", "bootstrap"] },
            "pagination" : { "deps" : ["jquery"] }
        },
        
         deps : ['${mainJS!"require-main"}']        
    };
</script>

<script src="/assets/js/require.js"></script>

页脚footer.ftl：

    <#-- 页脚 -->
    
    <#-- 加载JavaScript -->
    <#include "/secure/commons/footer-script-development.ftl">
    
    <#-- modal钩子 -->
    <div id="modal" class="modal fade" tabindex="-1" role="dialog"></div>
  
    
    <!-- 页脚版权声明
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
        
        <ol class="breadcrumb pull-right">
          <li>联系电话：020-66650810</li>
          <li>企业QQ：800009268</li>
          <li>© 2010-2016 保利威视 polyv.net 版权所有</li>
        </ol>

        </div>
      </div>
    </div>    
     -->
    
  </body>
</html>