Home » jQuery 外掛

[jQ]jQuery QR Image Plugin

[ 日期： | 瀏覽：4,406 | 迴響：搶沙發 ]
範例 1
請協助我把這個效果加到我的網站 (只要 300 元)
沒錯!只要 300 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



jQuery QR Image Plugin 雖然是一個很簡單就能取得 QR Code 的圖片，不過這外掛套件...沒什麼能設定及改變的。如果您只是要張 QR Code 圖片的話，這個就湊合著用吧！

套件名稱：jQuery QR Image Plugin
套件網址：N/A
作者網站：https://github.com/BraulioVM/jQuery-QR-Image-Plugin
套件網址：N/A
發佈日期：2011-10-29
檔案大小：914 Bytes
檔案下載：jquery.qr_image.js

參數選項說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

text(選填)
描述： 要用來產生 QR Code 的文字內容
預設值： 無
 
phone(選填)
描述： 要用來產生 QR Code 的電話號碼
預設值： 無
 
url(選填)
描述： 要用來產生 QR Code 的網址
預設值： 無
 
callback_function(選填)
描述： 當改變完 src 後要執行的動作
預設值： 無

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8

// 把指定元素的 src 改變成將指定文字內容編碼後 QR Code 圖片
$(selector).loadQRText(text, callback_function);
 
// 把指定元素的 src 改變成將指定電話號碼編碼後 QR Code 圖片
$(selector).loadQRPhone(phone, callback_function);
 
// 把指定元素的 src 改變成將指定網址編碼後 QR Code 圖片
$(selector).loadQRUrl(url, callback_function);

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.qr_image.js"></script>
<script type="text/javascript">
	$(function(){
		// 當按鈕按下時
		$(':button').click(function(){
			// 先取得選擇的類型及文字內容
			var text = $('#text').val(), 
				cat = $('#cat').val();
 
			// 若沒填寫任何內容則不做動作
			if(text == '') return;
 
			// 在 #result 中加入一張圖片
			var $img = $('#result').empty().append('<img />').find('img');
 
			// 依選擇的類型來產生相對應的圖片
			if(cat == 'url'){
				$img.loadQRUrl(text);
			}else if(cat == 'tel'){
				$img.loadQRPhone(text);
			}else{
				$img.loadQRText(text);
			}
		});
	});
</script>
 
<body>
	<select id="cat">
		<option value="txt">文字</option>
		<option value="url">網址</option>
		<option value="tel">電話</option>
	</select>
	<input type="text" id="text" value="" />
	<button>產生</button>
	<div id="result"></div>
</body>

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

備註:
原作者有幫 String 多擴充一個叫 startsWith() 的函式，是它程式第 18 行要用到的，但...它竟然寫錯名稱，所以筆者就順手修改它了。

發表迴響