Cấu hình ZeroClipboard

ZeroClipboard là thư viện được cung cấp miễn phí, giúp các bạn lập trình viên có thể sử dụng để sao chép văn bản vào bộ nhớ máy vi tính một cách dễ dàng.

Để ZeroClipboard có thể hoạt động thì trình duyệt của bạn phải hỗ trợ chạy lệnh Javascript và Adobe Flash. Trong một vài trường hợp các trình duyệt cũ quá hoặc các thiết bị di động, nếu như cấu hình không đúng thì sẽ không chạy được.

Mục lục nội dung

1 ZeroClipboard CDN
2 Cài đặt
3 Ví dụ đơn giản sử dụng data attribute
4 Ví dụ đầy đủ

ZeroClipboard CDN

Cũng giống như bao mã nguồn mở miền phí khác, ZeroClipboard cũng hỗ trợ đường dẫn CDN cho các bạn sử dụng, bạn không cần phải sao chép và đặt tập tin javascript trên trang web của bạn.

Link CDN: http://cdnjs.com/libraries/zeroclipboard

Cài đặt

Đối với các thư viện javascript, khi sử dụng thì bạn phải load nó vào trang web thì các chức năng của nó mới có hiệu lực.

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

Và bạn cũng cần phải load tập tin ZeroClipboard.swf cho trình duyệt của bạn, nếu như tập tin ZeroClipboard.swf và tập tin ZeroClipboard.js được đặt cùng thư mục, bạn load javascript từ hosting cá nhân chứ không phải CDN hoặc từ nguồn bên ngoài thì bạn không cần làm bước này.

ZeroClipboard.config( { swfPath: "http://YOURSERVER/path/ZeroClipboard.swf" } );

Ví dụ đơn giản sử dụng data attribute

<button id="my-button" data-clipboard-text="Copy me!" title="Click to copy to clipboard.">Copy to Clipboard</button>

Và code javascript của bạn chỉ cần dùng như sau:

<script>
var client = new ZeroClipboard( $("button#my-button") );
</script>

Ví dụ đầy đủ

Trong trường hợp bạn muốn sử dụng đầy đủ các tính năng của ZeroClipboard thì bạn có thể tham khảo ví dụ bên dưới. ZeroClipboard cung cấp cho bạn các sự kiện như copy, aftercopy, error, complete,… tùy vào nhu cầu mà bạn có thể sử dụng cho phù hợp.

<html>
	<head>
		<meta charset="UTF-8">
		<title>HocWP - Cấu hình ZeroClipboard</title>
		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript" src="https://hocwp.net/static/js/ZeroClipboard.js"></script>
	</head>
	<body>
	<button class="clip_button" style="cursor: pointer">Sao chép</button>
	<button class="clip_button" style="cursor: pointer">Sao chép đoạn văn bản</button>
	<script type="text/javascript">
		var client = new ZeroClipboard( $('.clip_button') );
		client.on( 'ready', function(event) {
			client.on('copy', function(event) {
				event.clipboardData.setData('text/plain', event.target.innerHTML);
			});
			client.on( 'aftercopy', function(event) {
				console.log('Dữ liệu được sao chép: ' + event.data['text/plain']);
				event.target.disabled = true;
			});
		});
		client.on( 'error', function(event) {
			ZeroClipboard.destroy();
		});
	</script>
	</body>
</html>

ZeroClipboard CDN

Cài đặt

Ví dụ đơn giản sử dụng data attribute

Ví dụ đầy đủ

Lại Đình Cường