ZeroClipboard實現復制功能


    在瀏覽網頁時可以看到復制功能,如:在看一個帶有源碼的demo時,可以點擊復制,把源碼復制到剪切板,然后粘貼到本地review,ie瀏覽器可以使用瀏覽器內置對象(window.clipboradData)
的setData方法,
但無法兼容其他瀏覽器,下面介紹ZeroClipboard:

一、原理
ZeroClipboard利用透明的flash讓其漂浮在復制按鈕之上,將需要復制的內容傳入flash,在通過flash的復制功能把傳入的內容復制到剪切板。


二、結構

1、ZeroClipboard其實是國外的一個js類庫,源碼結構如:
var ZeroClipboard = {
    //這里是屬性和方法.....    
};

ZeroClipboard.Client.prototype = {
    //擴展方法
};
2、創建對象,如:
var clip = new ZeroClipboard.Client();
//調用擴展方法

點擊
這里下載文件
查看github源碼百度文庫


三、簡單配置


下載下來的ZeroClipboard文件有一個js和swf文件,在js文件中需要正確配置moviePath路徑,可以配置相對和絕對路徑,也可以
調用實例對象的moviePath()設置正確的路徑;
另一個需要注意的地方是本地測試時,需要Apache服務器



四、domo實例

CSS:
.box { width: 300px; height: 100px; margin: 100px auto; }
HTML:
<div class="box">
    <textarea id="J_share_text" class="share-text"></textarea>
    <input class="btn" id="J_copy_clipboard_data" type="button" value="復制">
</div>
JavaScript:
(function() {
    $(function() {
        var clip = new ZeroClipboard.Client();
        clip.setHandCursor(true);
        clip.glue('J_copy_clipboard_data');
        clip.addEventListener('mouseDown',function() {
            clip.setText(ZeroClipboard.$('#J_share_text').val());
        });
    });      
})()

完整demo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ZeroClipboard demo實例</title>
<link href="http://a.tbcdn.cn/apps/e/tms/120951/bootstrap.css" rel="stylesheet">
<style>
.box { width: 300px; height: 100px; margin: 100px auto; }
</style>
</head>

<div class="box">
    <textarea id="J_share_text" class="share-text"></textarea>
    <input class="btn" id="J_copy_clipboard_data" type="button" value="復制">
</div>

<body>
<script src="http://a.tbcdn.cn/apps/e/tms/120951/zeroclipboard.js"></script>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://a.tbcdn.cn/apps/e/tms/120951/bootstrap.js"></script>

<script>
(function() {
	$(function() {
		var	clip = new ZeroClipboard.Client();
		clip.setHandCursor(true);
		clip.glue('J_copy_clipboard_data');
		clip.addEventListener('mouseDown',function() {
			clip.setText($('#J_share_text').val());
		});
	});	  
})()
</script>

</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM