ZeroClipboard plugin implements multi browser copy function of support firefox chrome ie6
- 2020-03-30 03:48:33
- OfStack
Download ZeroClipboard (link: #)
<style type="text/css">
body { font-family:arial,sans-serif; font-size:9pt; }
.copyit {text-align:center; border:1px solid #FD6001; background-color:#ED730B; margin:10px; padding:2px 5px; cursor:pointer; font-size:12px; border-radius:3px;}
.copyit.hover { background-color:#FD6001;}.copyit.active { background-color:#d25102;}
.copy_info{width:260px;height:100px;border:1px solid #ccc;padding:5px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/ZeroClipboard/ZeroClipboard.js"></script>
<div class="clip_container">
<textarea id="fe_text" cols=50 rows=5 class="copycnt"> The first 1 A copy of the content!! </textarea>
<b class="copyit"> Duplicate content </b>
</div>
<br/>
<div class="clip_container">
<textarea id="fe_text" cols=50 rows=5 class="copycnt"> The first 2 A copy of the content!! </textarea>
<b class="copyit"> Duplicate content </b>
</div>
<script type="text/javascript">
var clip = null;
function copyThis() {
if($.browser.version==6.0){
//For ie6
$('.copyit').bind("click",function(){
var code=$(this).parents(".clip_container").find(".copycnt").text();
window.clipboardData.setData("Text",code);
alert(' Copied content :n'+code);
})
return;
}
ZeroClipboard.setMoviePath("http://img.jb51.net/js/scripts/clipboard.swf'");//If zeroclipboard.js, zeroclipboard.swf are in the same directory, omit this sentence;
clip = new ZeroClipboard.Client();
$('.copyit').mouseover( function() {
var code=$(this).parents(".clip_container").find(".copycnt").text();
clip.setText(code);
if (clip.div) {//The parent div containing flash has been created, and the flash layer is repositioned when hover
//clip.receiveEvent('mouseout', null);
clip.reposition(this);
}else{
clip.glue(this)};
//clip.receiveEvent('mouseover', null);
} );
clip.addEventListener( 'complete', function(client, text){
alert(" Copied content: n"+text);
});
}
copyThis();
</script>
<textarea style="width:300px;height:300px;">
Paste copy of the content to try here!!
</textarea>
The implementation of the above methods, in addition to using Windows ie6. ClipboardData. SetData to realize the replication, other browsers with Zero Clipboard to copy plugin function.
A few points to note when using the plug-in:
1. The above zeroclipboard.js and zeroclipboard.swf shall be placed under the same path. If not in the same path, can use ZeroClipboard. SetMoviePath (" Flash path "); To set the zeroclipboard.swf address.
2, setCSSEffects() method resolution: when the mouse over the button or click, due to Flash button occlusion, so the copy of the button body CSS ":hover", ":active" and other pseudo-classes may be invalid. The setCSSEffects() method solves this problem. First, we need to change the pseudo-class into a class, such as:
.copyit:hover{
border-color:#FF6633;
}
//I need to change ":hover" to ". Hover "
.copyit.hover{
border-color:#FF6633;
}
GetHTML () method: this method can help if you want to instance a Flash without Zero Clipboard's attaching method. It takes two parameters, the width and height of Flash. The HTML code for Flash is returned. Such as:
Var HTML = clip.gethtml (150, 20);