zeroclipboard複數指定方法

在firefox中預設是將剪貼簿關掉的，不像IE可以自由取用
在網路中翻了又翻找到了zeroclipboard!!
zeroclipboard解決了跨瀏覽器使用clipboard的問題
http://code.google.com/p/zeroclipboard/
之前也有使用flash的方法
http://www.jeffothy.com/weblog/clipboard-copy/
但到了flash10就無法使用
http://bshadow.pixnet.net/blog/post/23246050


下面原始碼出處http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/multiple.html

<\html>
<\head>
<\title>Zero Clipboard Multiple Test<\/title>

<\style type="text/css">
body { font-family:arial,sans-serif; font-size:9pt; }

div.multiple {
float: left;
background-color: white;
width:200px; height:200px;
border:1px solid #ccc;
margin:5px;
cursor: pointer;
font-size: 14pt;
}

div.multiple.hover {
background-color: #ddd;
}
<\/style>

<\script type="text/javascript" src="./flash/jquery.js"><\/script>
<\script type="text/javascript" src="./flash/ZeroClipboard.js"><\/script>

<\script language="JavaScript">
var clip = null;

function init() {
ZeroClipboard.setMoviePath( './flash/ZeroClipboard.swf' );
// setup single ZeroClipboard object for all our elements
clip = new ZeroClipboard.Client();
clip.setHandCursor( true );

// assign a common mouseover function for all elements using jQuery
//將html 中宣告的div元素以class為單位丟入jQuery中
$('div.multiple').mouseover( function() {
// set the clip text to our innerHTML
clip.setText( this.innerHTML );

// reposition the movie over our element
// or create it if this is the first time
//這裡指的div是javascript產生的div元素，也就是附屬在clip底下的div，並非上一段所提到html的div，當程式呼叫到clip.glue()時js會產生一個div罩住你所指定的元素，所以這一段是在說如果先前已有產生div那麼便將他重新定位至現在指定的元素(this)，否則就創造一個新的div遮罩
if (clip.div) {
clip.receiveEvent('mouseout', null);
clip.reposition(this);
}
else clip.glue(this);

// gotta force these events due to the Flash movie
// moving all around. This insures the CSS effects
// are properly updated.
clip.receiveEvent('mouseover', null);
} );

// add an event handler which fires after text is copied to the clipboard
// and change the color of the underlying DOM element
clip.addEventListener('complete', function(client, text) {
var div = client.domElement;
div.style.backgroundColor = '#bff';
} );
}
<\/script>


<\/head>

<\body onLoad="init()">
<\h1>Zero Clipboard Multiple Test<\/h1>

<\div class="multiple">Hello there<\/div>
<\div class="multiple">These are all equally sized DOM elements.<\/div>
<\div class="multiple">Click on any of them to copy their text to the clipboard.<\/div>
<\div class="multiple">This is all done with a single ZeroClipboard object.<\/div>

<\div class="multiple">The only catch is, all the elements must be the same size.<\/div>
<\div class="multiple">Bye bye!<\/div>
<\div style="clear:both;"><\/div>

<\br/><\br/>
You can paste text here if you want, to make sure it worked:<\br/>
<\textarea id="testarea" cols=50 rows=10><\br/>
<\input type=button value="Clear Test Area" onClick="document.getElementById('testarea').value = '';"/>

<\/body>

<\/html>


當初就是兩個div搞混了 所以改用td時就會有問題(做了兩個div遮罩出來)

by the way
IE只需要一行
window.clipboardData.setData("Text",A.innerText);