首页 > 代码库 > zclip 复制内容到剪切板
zclip 复制内容到剪切板
直接上代码
</pre><pre code_snippet_id="411566" snippet_file_name="blog_20140630_3_1654861" name="code" class="html"><!DOCTYPE html>
<html>
<head>
<title>ZeroClipboard Test</title>
<meta charset="utf-8">
<style type="text/css">
.line {
margin-bottom: 20px;
}
/* 复制提示 */
.copy-tips {
position: fixed;
z-index: 9999;
bottom: 50%;
left: 50%;
margin: 0 0 -20px -80px;
background-color: rgba(0, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000,
endColorstr=#30000000 );
padding: 6px;
}
.copy-tips-wrap {
padding: 10px 20px;
text-align: center;
border: 1px solid #F4D9A6;
background-color: #FFFDEE;
font-size: 14px;
}
#copy-button {
width: 125px;
height: 45px;
cursor: pointer;
border: 0;
background: url(web/images/btn.gif) no-repeat;
}
</style>
<script type="text/javascript" src=http://www.mamicode.com/"web/js/jquery.js"></script>>//第一种
var clip = null;
ZeroClipboard.setMoviePath("web/zclip/ZeroClipboard.swf");
$(document).ready(function(){
clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
clip.setText("sssssssss"); //设置复制内容
clip.glue("copy-button");
clip.addEventListener("complete", function(){
alert("代码已复制到剪贴板！");
});
});
//第二种
$(document).ready(function(){
/* 定义所有class为copy标签，点击后可复制被点击对象的文本 */
$(".copy").zclip({
path: "web/zclip/ZeroClipboard.swf",
copy: function(){
return $(this).text();
},
afterCopy:function(){/* 复制成功后的操作 */
var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>? 复制成功</div></div>");
$("body").find(".copy-tips").remove().end().append($copysuc);
$(".copy-tips").fadeOut(3000);
}
});
/* 定义所有class为copy-input标签，点击后可复制class为input的文本 */
$(".copy-input").zclip({
path: "web/zclip/ZeroClipboard.swf",
copy: function(){
return $(this).parent().find(".input").val();
},
afterCopy:function(){/* 复制成功后的操作 */
var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>? 复制成功</div></div>");
$("body").find(".copy-tips").remove().end().append($copysuc);
$(".copy-tips").fadeOut(3000);
}
});
});
</script>
</head>
<body>
<input type="button" id="copy-button" value=http://www.mamicode.com/"">>
/*
* zclip 源代码
* zClip :: jQuery ZeroClipboard v1.1.1
* http://steamdev.com/zclip
*
* Copyright 2011, SteamDev
* Released under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Date: Wed Jun 01, 2011
*/
(function ($) {
$.fn.zclip = function (params) {
if (typeof params == "object" && !params.length) {
var settings = $.extend({
path: 'ZeroClipboard.swf',
copy: null,
beforeCopy: null,
afterCopy: null,
clickAfter: true,
setHandCursor: true,
setCSSEffects: true
}, params);
return this.each(function () {
var o = $(this);
if (o.is(':visible') && (typeof settings.copy == 'string' || $.isFunction(settings.copy))) {
ZeroClipboard.setMoviePath(settings.path);
var clip = new ZeroClipboard.Client();
if($.isFunction(settings.copy)){
o.bind('zClip_copy',settings.copy);
}
if($.isFunction(settings.beforeCopy)){
o.bind('zClip_beforeCopy',settings.beforeCopy);
}
if($.isFunction(settings.afterCopy)){
o.bind('zClip_afterCopy',settings.afterCopy);
}
clip.setHandCursor(settings.setHandCursor);
clip.setCSSEffects(settings.setCSSEffects);
clip.addEventListener('mouseOver', function (client) {
o.trigger('mouseenter');
});
clip.addEventListener('mouseOut', function (client) {
o.trigger('mouseleave');
});
clip.addEventListener('mouseDown', function (client) {
o.trigger('mousedown');
if(!$.isFunction(settings.copy)){
clip.setText(settings.copy);
} else {
clip.setText(o.triggerHandler('zClip_copy'));
}
if ($.isFunction(settings.beforeCopy)) {
o.trigger('zClip_beforeCopy');
}
});
clip.addEventListener('complete', function (client, text) {
if ($.isFunction(settings.afterCopy)) {
o.trigger('zClip_afterCopy');
} else {
if (text.length > 500) {
text = text.substr(0, 500) + "...\n\n(" + (text.length - 500) + " characters not shown)";
}
o.removeClass('hover');
alert("Copied text to clipboard:\n\n " + text);
}
if (settings.clickAfter) {
o.trigger('click');
}
});
clip.glue(o[0], o.parent()[0]);
$(window).bind('load resize',function(){clip.reposition();});
}
});
} else if (typeof params == "string") {
return this.each(function () {
var o = $(this);
params = params.toLowerCase();
var zclipId = o.data('zclipId');
var clipElm = $('#' + zclipId + '.zclip');
if (params == "remove") {
clipElm.remove();
o.removeClass('active hover');
} else if (params == "hide") {
clipElm.hide();
o.removeClass('active hover');
} else if (params == "show") {
clipElm.show();
}
});
}
}
})(jQuery);
// ZeroClipboard
// Simple Set Clipboard System
// Author: Joseph Huckaby
var ZeroClipboard = {
version: "1.0.7",
clients: {},
// registered upload clients on page, indexed by id
moviePath: 'ZeroClipboard.swf',
// URL to movie
nextId: 1,
// ID of next movie
$: function (thingy) {
// simple DOM lookup utility function
if (typeof(thingy) == 'string') thingy = document.getElementById(thingy);
if (!thingy.addClass) {
// extend element with a few useful methods
thingy.hide = function () {
this.style.display = 'none';
};
thingy.show = function () {
this.style.display = '';
};
thingy.addClass = function (name) {
this.removeClass(name);
this.className += ' ' + name;
};
thingy.removeClass = function (name) {
var classes = this.className.split(/\s+/);
var idx = -1;
for (var k = 0; k < classes.length; k++) {
if (classes[k] == name) {
idx = k;
k = classes.length;
}
}
if (idx > -1) {
classes.splice(idx, 1);
this.className = classes.join(' ');
}
return this;
};
thingy.hasClass = function (name) {
return !!this.className.match(new RegExp("\\s*" + name + "\\s*"));
};
}
return thingy;
},
setMoviePath: function (path) {
// set path to ZeroClipboard.swf
this.moviePath = path;
},
dispatch: function (id, eventName, args) {
// receive event from flash movie, send to client
var client = this.clients[id];
if (client) {
client.receiveEvent(eventName, args);
}
},
register: function (id, client) {
// register new client to receive events
this.clients[id] = client;
},
getDOMObjectPosition: function (obj, stopObj) {
// get absolute coordinates for dom element
var info = {
left: 0,
top: 0,
width: obj.width ? obj.width : obj.offsetWidth,
height: obj.height ? obj.height : obj.offsetHeight
};
if (obj && (obj != stopObj)) {
info.left += obj.offsetLeft;
info.top += obj.offsetTop;
}
return info;
},
Client: function (elem) {
// constructor for new simple upload client
this.handlers = {};
// unique ID
this.id = ZeroClipboard.nextId++;
this.movieId = 'ZeroClipboardMovie_' + this.id;
// register client with singleton to receive flash events
ZeroClipboard.register(this.id, this);
// create movie
if (elem) this.glue(elem);
}
};
ZeroClipboard.Client.prototype = {
id: 0,
// unique ID for us
ready: false,
// whether movie is ready to receive events or not
movie: null,
// reference to movie object
clipText: '',
// text to copy to clipboard
handCursorEnabled: true,
// whether to show hand cursor, or default pointer cursor
cssEffects: true,
// enable CSS mouse effects on dom container
handlers: null,
// user event handlers
glue: function (elem, appendElem, stylesToAdd) {
// glue to DOM element
// elem can be ID or actual DOM element object
this.domElement = ZeroClipboard.$(elem);
// float just above object, or zIndex 99 if dom element isn't set
var zIndex = 99;
if (this.domElement.style.zIndex) {
zIndex = parseInt(this.domElement.style.zIndex, 10) + 1;
}
if (typeof(appendElem) == 'string') {
appendElem = ZeroClipboard.$(appendElem);
} else if (typeof(appendElem) == 'undefined') {
appendElem = document.getElementsByTagName('body')[0];
}
// find X/Y position of domElement
var box = ZeroClipboard.getDOMObjectPosition(this.domElement, appendElem);
// create floating DIV above element
this.div = document.createElement('div');
this.div.className = "zclip";
this.div.id = "zclip-" + this.movieId;
$(this.domElement).data('zclipId', 'zclip-' + this.movieId);
var style = this.div.style;
style.position = 'absolute';
style.left = '' + box.left + 'px';
style.top = '' + box.top + 'px';
style.width = '' + box.width + 'px';
style.height = '' + box.height + 'px';
style.zIndex = zIndex;
if (typeof(stylesToAdd) == 'object') {
for (addedStyle in stylesToAdd) {
style[addedStyle] = stylesToAdd[addedStyle];
}
}
// style.backgroundColor = '#f00'; // debug
appendElem.appendChild(this.div);
this.div.innerHTML = this.getHTML(box.width, box.height);
},
getHTML: function (width, height) {
// return HTML for movie
var html = '';
var flashvars = 'id=' + this.id + '&width=' + width + '&height=' + height;
if (navigator.userAgent.match(/MSIE/)) {
// IE gets an OBJECT tag
var protocol = location.href.match(/^https/i) ? 'https://' : 'http://';
html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="' + protocol + 'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="' + width + '" height="' + height + '" id="' + this.movieId + '" align="middle"><param name="allowScriptAccess" value=http://www.mamicode.com/"always" />';>SWF文件地址：http://download.csdn.net/detail/afterwards520/7571987
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。