Quantcast
Channel: 梅問題.教學網
Viewing all articles
Browse latest Browse all 2929

jQuery教學-ZeroClipboard 將網頁輸入框值複製到剪貼簿

$
0
0
梅問題-jQuery應用-ZeroClipboard將網頁輸入框複製到剪貼簿
  有用過MediaFire雲端空間的朋友,應該不難發現到,當把檔案上傳到空間後,只要點一下Share Link,就會自動將連結網址,直接複製到剪貼簿中,這看似乎平常的功能,其實一點也不簡單,而有在觀注梅問題的朋友,應該有發現到,在黑莓10使用嘸蝦米的文章中,梅干也有用到此功能,其實需使用zClip外掛的搭配才行喔!同時還需在Web主機中才能運作,因此在本機是無法預覽結果的,所以待回各位在測試時,一定要將網頁丟到Web主機中才行喔!至於怎麼用呢?現在就一塊來看看吧!
zClip外掛:
外掛名稱:zClip
外掛網址:http://www.steamdev.com/zclip/

Javascript:
放在<head>.....</head>之間:
?View Code JAVASCRIPT
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.zclip.js"></script>
<script>
$(function(){
    $('#copy-btn').zclip({
        path:'js/ZeroClipboard.swf',
        copy:function(){
			return $('#ipt').val();
		}
	}).click(function(){
		$("#ipt").val('');
		alert('已複製到剪貼薄');
	});	
});
 
</script>

Html:
放在<body>.....</body>之間:
?View Code JAVASCRIPT
1 2
<input style="width:300px; margin-left:15px;" type="text" id="ipt" value="http://www.minwt.com"/>
<a href="#" id="copy-btn">複製</a>

[範例預覽] [範例下載]

Viewing all articles
Browse latest Browse all 2929

Trending Articles