背景:要求对struts2返回页面的数据进行点击复制
要求:点击“复制参数”实现复制,并加以标记提示
实现效果:点击“复制参数,实现复制后标记为“复制成功,添加样式变红,3秒后去掉样式;
原理:利用flash文件,先将数据拷贝到flash文件上再拷贝到粘贴板(自己悟吧)。
代码:
//头部
<!-引入jquery->
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<!-- 引入jquery.zclip.min.js,用于复制操作 -->
<script type="text/javascript" src="../js/zclip/jquery.zclip.min.js"></script>
<!-- 用于后面标识-恢复 -->
<STYLE type="text/css">.blue{}</STYLE>
//body里
<div style="position:relative;display:inline-block;">
<p class="copy_btn" abb="<s:property value='params'/>"> 复制参数 </p>
</div>
//script部分
<script type="text/javascript">
$(function(){
if ( window.clipboardData ) {
$('.copy_btn').click(function() {
window.clipboardData.setData("Text", $(this).attr("abb"));
$(this).text("复制成功").addClass("blue").css("color","red");
var t=window.setTimeout(function(){$(".blue").text("复制参数").ramoveCss();},3000);
});
} else {
$(".copy_btn").zclip({
path:'../js/zclip/ZeroClipboard.swf',
copy:function(){
return $(this).attr("abb");
},
afterCopy:function(){
//粘结好后暂时修改span内容
$(this).text("复制成功").addClass("blue").css("color","red");
var t=window.setTimeout(function(){$(".blue").text("复制参数").ramoveCss();},3000);
}
});
}
});
</script>
注意:
1.一定确认导入了js文件和swf文件。
2.获取值所在的标签两边加<div>是为了防止有时候zclip函数有时候会失效,具体为什么,只有大神知道吧。如果你的div已经有样式,这样影响你页面效果,怪我咯、、
3.写js时一定要获取正确的对象。。所以要有扎实的js --jquery基础。。。小编是渣渣,在这折腾了好几天,搬砖去了、。、、、