zoukankan      html  css  js  c++  java
  • Zero Clipboard

    开发中经常会用到复制的功能,在 IE 下实现比较简单,但要想做到跨浏览器比较困难了。

    本文将介绍一个跨浏览器的库类 Zero Clipboard ,它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活。

    Zero Clipboard 的实现原理

    Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash,但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板,所以 Zero Clipboard 对此进行了改进,用了一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了。

    <html>
    <head>
    	<title>Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<style type="text/css">
    		body {
    			background: url("images/grid.gif") repeat;
    		}
    		.clip_container {
    			 500px;
    			height: 198px;
    			position: absolute;
    			top: 50%;
    			left: 50%;
    			margin:-210px 0 0 -250px;
    			border: 2px solid #FF8000;
    			background: #FFFFFF;
    		}
    		
    		.clip_title {
    			height: 35px;
    			font-family: arial,sans-serif;
    			font-size: 21px;
    			color: #FFFFFF;
    			line-height: 35px;
    			background: #FF9B08;
    		}
    		
    		.clip_button {
    			 50px;
    			height: 18px;
    			padding: 3px;
    			margin: 5px 0px 5px 5px;
    			font-size: 14px;
    			font-weight: bold;
    			cursor: default;
    			text-align: center;
    			line-height: 18px;
    			color: #FFFFFF;
    			border: 1px solid #CCCCCC;
    			float: left;
    		}
    		
    		.clip_note {
    			 432px;
    			height: 24px;
    			margin: 5px 0px;
    			font-family: '微软雅黑';
    			font-size: 12px;
    			line-height: 24px;
    		}
    		
    		.clip_text {
    			margin: 0px 5px;
    		}
    		
    		.clip_button {
    			background-color: #008000;
    			border: 1px solid #96CA76;
    		}
    		
    		.clip_button.hover {
    			background-color: #96CA76;
    			border: 1px solid #008000;
    		}
    		
    		.clip_button.active {
    			background-color: #008000;
    			border: 1px solid #96CA76;
    		}
    		
    		.footer {
    			 485px;
    			height: 18px;
    			margin-top: 6px;
    			margin-left: 5px;
    			font-family: Microsoft YaHei, SimSun, FangSong;
    			font-size: 12px;
    			color: #515151;
    			text-align: center;
    			line-height: 18px;
    		}
    		
    		.footer a {
    			color: #515151;
    			font-weight: bold;
    		}
    		
    		.footer a:hover {
    			color: #0080FF;
    		}
    	</style>
    	<script type="text/javascript" src="ZeroClipboard/ZeroClipboard.js"></script>
    	<script type="text/javascript">
    		// 创建ZeroClipboard(剪贴板)对象
    		var clip = new ZeroClipboard.Client();
    		clip.setHandCursor(true);// 设置鼠标为手型
    
    		// 初始化方法
    		function init() {
    			// 鼠标悬停时将内容复制到剪贴板
    			clip.addEventListener("mouseOver", function (client) {
    				clip.setText();
    			});
    
    			// 鼠标悬停时将内容复制到剪贴板
    			clip.addEventListener("mouseDown", function (client) {
    				var clipText = $("clip_text").value;
    				if (clipText == "") {
    					$("clip_msg").innerHTML = "<font color="#FF0000">请输入要复制的内容!</font>";
    					$("clip_text").focus();
    				}
    			});
    
    			// 内容复制到剪贴板成功时提示信息
    			clip.addEventListener("complete", function (client, text) {
    				if (text != "") {
    					$("clip_msg").innerHTML = "<font color="#008000">内容已成功复制到剪贴板!</font>";
    				} else {
    					$("clip_msg").innerHTML = "<font color="#FF0000">请输入要复制的内容!</font>";
    					$("clip_text").focus();					
    				}
    			});
    
    			// 绑定 Copy 按钮
    			clip.glue("clip_button");
    		}
    
    		// 封装通过ID获取元素的方法
    		function $(id) {
    			return document.getElementById(id);
    		}
    	</script>
    </head>
    <body onLoad="init()">
    	<div class="clip_container">
    		<div id="clip_title" class="clip_title">Click Copy Button First, Then Ctrl+V To Paste!</div>
    		<div id="clip_button" class="clip_button">Copy</div>
    		<div id="clip_note" class="clip_note">(点击 Copy 即可复制内容至剪贴板) <span id="clip_msg"></span></div>
    		<div class="clip_text"><textarea cols="58" rows="5" id="clip_text" onChange="clip.setText(this.value)"></textarea></div>
    		<div class="footer">
    			<p>Design By MrChu <a target="_blank" href="http://sighttp.qq.com/authd?IDKEY=453cbf8f7771ac25821cd442998509166f3be5cc012809d8" alt="联系作者" title="联系作者"><img border="0" src="http://wpa.qq.com/imgd?IDKEY=453cbf8f7771ac25821cd442998509166f3be5cc012809d8&pic=45" alt="点击这里给我发消息" title="点击这里给我发消息" style="vertical-align:middle;"> 联系作者</a> <a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=muLz_-X4_-X58u-t--P48-v12uvrtPn19w" alt="点击这里给我发送邮件" title="点击这里给我发送邮件" style="text-decoration:none;"><img src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_01.png" style="border:none;vertical-align:middle;"/></a></p>
    		</div>
    	</div>
    </body>
    </html>
    

    效果图:

    源码下载:http://download.csdn.net/detail/for_china2012/6225323

  • 相关阅读:
    pat 乙级1084 外观数列
    将int 转换为string 函数 to_string()
    stl find_first_not_of()函数
    小写转变为大写函数toupper()
    基础实验2-2.3 组合数的和 (15分)
    基础实验2-2.2 求集合数据的均方差 (15分)
    习题1.9 有序数组的插入 (20分)
    用eclipse运行算法第四版的BinarySearch
    关于脱发
    HUD-2586(LCA板子)
  • 原文地址:https://www.cnblogs.com/riskyer/p/3306450.html
Copyright © 2011-2022 走看看