The function of copying is often used in the development, and it is simple to implement under IE. But it's more difficult to do it across browsers. This article will introduce a Cross-browser library class, Zero Clipboard. It uses flash to replicate, so as long as the browser is equipped with Flash can run, and more than IE Document.execcommand ("Copy") more flexible.
The realization principle of Zero Clipboard
Zero Clipboard uses Flash for replication, preceded by a Clipboard copy solution, which utilizes a hidden flash. But the latest Flash Player 10 only allows operations on flash to start the Clipboard. So Zero Clipboard has improved on this, using a transparent flash, let it float on the button, so in fact, click not the button but flash, you can use flash copy function.
How to use Zero Clipboard
First download Zero Clipboard and unzip it. Two files are required: Zeroclipboard.js and zeroclipboard.swf, put these two files into your project.
Download Address
Zero Clipboard Open Source Javascript+flash Replication Library class
Demo Address:
Http://demo.jb51.net/js/ZeroClipboard/index.html
core Functions
The first step is to import the Zeroclipboard.js file:
<script type= "Text/javascript" src= "Zeroclipboard.js" ></script>
Then set the path of the zeroclipboard.swf file:
Zeroclipboard.setmoviepath ("zeroclipboard.swf");
Note: The above zeroclipboard.js, zeroclipboard.swf Two file paths need to be replaced with the path of the corresponding file in your project. Or it can be an absolute path.
then you use the following:
Copy Code code as follows:
var clip = new Zeroclipboard.client (); Create a new object
Clip.sethandcursor (TRUE); Set Mouse to hand type
Clip.settext ("haha"); Sets the text to copy.
Registers a button with the parameter ID. Clicking on this button will copy it.
This button does not necessarily require an input button, or it can be another DOM element.
Clip.glue ("Copy-botton"); And the previous position is not interchangeable
In this way, the basic skills can be achieved, click the button can copy the set of text. You may notice that the text to be copied is fixed, and what to do if you want to change dynamically, such as copying the contents of an input box. Don't worry, I'll talk about it here.
Other functions
Zero Clipboard also provides a number of other functions, some of which are very useful.
Reposition () method
Because the button is floating on a flash button, so when the page size changes, the flash button may be misplaced, so that is not the point. It doesn't matter, Zero Clipboard provides a reposition () method that recalculates the position of the Flash button. We can bind it to the Resize event.
Copy Code code as follows:
Bind (window, "Resize", function () {
Clip.reposition ();
});
Bind is a Cross-browser event-binding function.
=========================================================
This must have been known to all. The event-binding function of IE is attachevent, while Firefox, Safari is Addeventlistener;opera, both are supported. The following is encapsulated.
Copy Code code as follows:
/************************************
* Add Event Bindings
* @param obj: The element to bind the event
* @param type: event name. "On" is not added. such as: "Click" rather than "onclick."
* @param fn: event handler function
************************************/
function bind (obj, type, fn) {
if (obj.attachevent) {
obj[' e ' +type+fn] = fn;
OBJ[TYPE+FN] = function () {obj[' E ' +type+fn] (window.event);}
Obj.attachevent (' On ' +type, OBJ[TYPE+FN]);
} else
Obj.addeventlistener (Type, FN, false);
}
For example, add a page click event:
Copy Code code as follows:
Bind (document, "click", Function () {
Alert ("Hello, world!!");
});
=========================================================
Hide () and show () methods
These two methods can hide and display the Flash button. where the show () method invokes the reposition () method.
Setcsseffects () method
When the mouse moved to the button or click, because there is a Flash button occlusion, so like css ": hover", ": Active" and other pseudo classes may be invalidated. Setcsseffects () method is to solve this problem. First we need to change the pseudo class to class, for example:
Copy Code code as follows:
#copy-botton:hover{
Border-color: #FF6633;
}
Can be changed to the following ": hover" into ". Hover"
#copy-botton.hover{
Border-color: #FF6633;
}
We can call Clip.setcsseffects (true); So zero Clipboard will automatically handle for us: the class. Hover as pseudo class: hover.
Gethtml () method
If you want to own instance a Flash, do not use Zero Clipboard attachment method, then this method can help busy. It accepts two parameters, respectively, for the width and height of the Flash. Returns the corresponding HTML code for the Flash. For example:
var html = clip.gethtml (150, 20);
You can use InnerHTML or direct document.write (); For output.
Here is the HTML code that I tested to output:
<embed id= "Zeroclipboardmovie_1" src= "zeroclipboard/zeroclipboard.swf" loop= "false" menu= "false" quality= "best" Bgcolor= "#ffffff" width= "height=" name= "zeroclipboardmovie_1" align= "Middle" allowscriptaccess= "always" Allowfullscreen= "false" Type= "Application/x-shockwave-flash" pluginspage= "http://www.macromedia.com/go/" Getflashplayer "flashvars=" id=1&width=150&height=20 "wmode=" Transparent "/>"
There is a bug on IE's Flash JavaScript communication interface. You must insert an OBJECT tag into an existing DOM element. And make sure that the element has been appendchild into the DOM before writing to InnerHTML.
Zero Clipboard Event Handling
Zero Clipboard provides a number of events that you can customize to handle these events. The zero Clipboard event handler function is AddEventListener (); For example, when Flash is fully loaded, an event "load" is triggered.
Clip.addeventlistener ("Load", function (client) {
Alert ("Flash loading complete!") ");
});
Zero Clipboard will pass the clip object as a parameter. The "client" in the example above.
and "Load" can also be written as "OnLoad", other events can also be so.
Other events also include:
MouseOver Mouse over events
Mouseout Mouse Out Event
MouseDown Mouse Down Event
MouseUp Mouse Release Event
Complete Replication Success Events
Among them MouseOver event and complete event are more commonly used.
As I said earlier, if you need to dynamically change what you're copying, the MouseOver event can be useful. For example, to dynamically copy a value in an input box with the ID test, we can reset the value when the mouse is over.
Clip.addeventlistener ("MouseOver", function (client) {
var test = document.getElementById ("test");
Client.settext (Test.value); Reset the values you want to copy
});
Replication success:
Clip.addeventlistener ("Complete", function () {
Alert ("Copy succeeded!") ");
});
All right, let's introduce you to this. Try your own experiment.
