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);
}
});
});
});
<#-- 页头 -->
<#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">
<#-- 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>