Home » jQuery 外掛

[jQ]BarCode Coder Library 2.0.1

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



如果需要在網頁中輸出顯示條碼的話，那 BarCode Coder Library 相信是你的不二選擇。它能支援的條碼格式多達 10 種，且輸出時也能自訂格式成 BMP 、 SVG 或 Canvas 哩。

套件名稱：BarCode Coder Library
套件版本：2.0.1
作者網站：http://barcode-coder.com/en/barcode-jquery-plugin-201.html
套件網址：http://plugins.jquery.com/project/BarcodePlugin
發佈日期：2010-09-05
檔案大小：52.8 KB
檔案下載：jquery-barcode-2.0.1.js

參數說明：

檢視原始碼 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
39
40
41
42
43
44
45
46
47
48
49
50
51

addQuietZone(選填)
描述： 是否左右補白邊
預設值： true
 
bgColor(選填)
描述： 背景顏色
預設值： #FFFFFF
 
color(選填)
描述： 條碼顏色
預設值： #000000
 
barWidth(選填)
描述： 條碼最小寬度:
預設值： 1
 
barHeight(選填)
描述： 條碼容器高度
預設值： 50
 
showHRI(選填)
描述： 條碼下方顯示條碼值(不過當輸出格式是 bmp 時是沒作用的)
預設值： true
 
fontSize(選填)
描述： 條碼值文字大小(是數字型態，所以不要加 px)
預設值： 10
 
marginHRI(選填)
描述：上邊界值(是數字型態，所以不要加 px)
預設值： 5
 
moduleSize(選填)
描述：二維條碼的寬高尺寸
預設值： 5
 
posX(選填)
描述：Canvas 的 X 座標
預設值： 0
 
posY(選填)
描述：Canvas 的 Y 座標
預設值： 0
 
output(選填)
描述： 輸出格式, 允許的格式有 css, bmp, svg 及 canvas。但 IE 只適用 css 格式; 另外選擇 css 格式且要列印時, 得勾選列印背景圖片。
預設值： css
 
type(必填)
描述：條碼格式, 允許的格式有 codabar, code11 (code 11), code39 (code 39), code93 (code 93), code128 (code 128), ean8 (ean 8), ean13 (ean 13), std25 (standard 2 of 5 - industrial 2 of 5), int25 (interleaved 2 of 5), msi 及 datamatrix (ASCII + extended)
預設值：無

方法說明：

檢視原始碼 JavaScript
1
2

// 在指定的區塊顯示條碼值
$(selector).barcode(datas, type, settings);

使用範例：

檢視原始碼 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-barcode-2.0.1.js"></script>
<style type="text/css">
#generator * {
	color: #7F7F7F;
	font-family: Arial,sans-serif;
	font-size: 14px;
	font-weight: normal;
}    
#config{
	overflow: auto;
	margin-bottom: 10px;
}
.config{
	float: left;
	width: 200px;
	height: 250px;
	border: 1px solid #000;
	margin: 10px;
	padding: 5px;
}
.config .title{
	font-weight: bold;
	text-align: center;
}
.config .miscCanvas, .config .barcode2D{
	display: none;
}
#submit{
	clear: both;
	margin: 10px;
}
#barcodeTarget, #canvasTarget{
	margin-top: 20px;
}   
</style>
<script type="text/javascript">
	$(function(){
		// 當按下產生條碼鈕時
		$('#btn').click(function(){
			// 先清空原有的條碼內容
			$('#barcodeTarget').html("");
 
			// 一一取得要產生的條碼值及其它設定
			var value = $('#barcodeValue').val(), 
				btype = $('input[name=btype]:checked').val(), 
				settings = {
					output: $('input[name=renderer]:checked').val(),
					bgColor: $('#bgColor').val(),
					color: $('#color').val(),
					barWidth: $('#barWidth').val(),
					barHeight: $('#barHeight').val(),
					marginHRI: $('#marginTop').val() * 1,
					showHRI: $('#showHRI').attr('checked'),
					fontSize: $('#fontSize').val() * 1,
					moduleSize: $("#moduleSize").val(),
					posX: $("#posX").val(),
					posY: $("#posY").val(),
					addQuietZone: true
				};
 
			if($("#rectangular").attr('checked')){
				value = {code:value, rect: true};
			}
 
			// 依設定來產生條碼
			if($('input[name=renderer]:checked').val() == 'canvas'){
				clearCanvas();
				$("#barcodeTarget").hide();
				$("#canvasTarget").show().barcode(value, btype, settings);
			}else{
				$("#canvasTarget").hide();
				$("#barcodeTarget").html("").show().barcode(value, btype, settings);
			}
 
		});
 
		function clearCanvas(){
			var canvas = $('#canvasTarget').get(0);
			var ctx = canvas.getContext('2d');
			ctx.lineWidth = 1;
			ctx.lineCap = 'butt';
			ctx.fillStyle = '#FFFFFF';
			ctx.strokeStyle  = '#000000';
			ctx.clearRect (0, 0, canvas.width, canvas.height);
			ctx.strokeRect (0, 0, canvas.width, canvas.height);
		}
 
		$('input[name=btype]').click(function(){
			$('.barcode2D').toggle($('#datamatrix').attr('checked'));
			$('.barcode1D').toggle(!$('#datamatrix').attr('checked'));
        });
		$('input[name=renderer]').click(function(){
			$('.miscCanvas').toggle($('.canvas').attr('checked'));
        });
 
		// 網頁載入後先產生 EAN 8 條碼
		$('#barcodeTarget').barcode('1234567', 'ean8');
	});
</script>
 
<body>
		<div id="generator">
		<p>請輸入要產生條碼的值 : <input type="text" id="barcodeValue" value="12345670">
		<div id="config">
			<div class="config">
				<div class="title">條碼類型</div>
				<input type="radio" id="ean8" name="btype" value="ean8" checked="checked"><label for="ean8">EAN 8</label><br />
				<input type="radio" id="ean13" name="btype" value="ean13"><label for="ean13">EAN 13</label><br />
				<input type="radio" id="std25" name="btype" value="std25"><label for="std25">standard 2 of 5 (industrial)</label><br />
				<input type="radio" id="int25" name="btype" value="int25"><label for="int25">interleaved 2 of 5</label><br />
				<input type="radio" id="code11" name="btype" value="code11"><label for="code11">code 11</label><br />
 
				<input type="radio" id="code39" name="btype" value="code39"><label for="code39">code 39</label><br />
				<input type="radio" id="code93" name="btype" value="code93"><label for="code93">code 93</label><br />
				<input type="radio" id="code128" name="btype" value="code128"><label for="code128">code 128</label><br />
				<input type="radio" id="codabar" name="btype" value="codabar"><label for="codabar">codabar</label><br />
				<input type="radio" id="msi" name="btype" value="msi"><label for="msi">MSI</label><br />
				<input type="radio" id="datamatrix" name="btype" value="datamatrix"><label for="datamatrix">Data Matrix</label><br /><br />
			</div>
 
			<div class="config">
				<div class="title">設定</div>
				背景顏色: <input type="text" id="bgColor" value="#FFFFFF" size="7"><br />
				條碼顏色: <input type="text" id="color" value="#000000" size="7"><br />
				條碼下方顯示條碼值: <input type="checkbox" id="showHRI" checked="checked"><br />
				條碼值文字大小: <input type="text" id="fontSize" value="10" size="2"><br />
				上邊界: <input type="text" id="marginTop" value="5" size="2"><br />
				<div class="barcode1D">
					條碼最小寬度: <input type="text" id="barWidth" value="1" size="3"><br />
					條碼容器高度: <input type="text" id="barHeight" value="50" size="3"><br />
				</div>
				<div class="barcode2D">
					Module Size: <input type="text" id="moduleSize" value="5" size="3"><br />
					Form: <input type="checkbox" name="rectangular" id="rectangular"><label for="rectangular">Rectangular</label><br />
				</div>
				<div class="miscCanvas">
					x : <input type="text" id="posX" value="10" size="3"><br />
					y : <input type="text" id="posY" value="20" size="3"><br />
				</div>
			</div>
 
			<div class="config">
				<div class="title">輸出格式</div>
				<input type="radio" id="css" name="renderer" value="css" checked="checked"><label for="css">CSS</label><br />
				<input type="radio" id="bmp" name="renderer" value="bmp"><label for="bmp">BMP (IE 不適用)</label><br />
				<input type="radio" id="svg" name="renderer" value="svg"><label for="svg">SVG (IE 不適用)</label><br />
				<input type="radio" id="canvas" name="renderer" value="canvas"><label for="canvas">Canvas (IE 不適用)</label><br />
			</div>
		</div>
		<div id="submit">
			<input type="button" id="btn" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;產生條碼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
		</div>
 
		</p>
	</div>
 
	<div id="barcodeTarget" class="barcodeTarget"></div>
	 <canvas id="canvasTarget" width="150" height="150"></canvas>
</body>
範例 1

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

16 筆針對 [jQ]BarCode Coder Library 2.0.1 的迴響

  2. 報告男丁大
    我是玩你的範例XD

    喔..我剛剛試出來了
    原來用css輸出時要設定列印格式
    要勾選列印背景才會印的出來

    • 如同 derek 兄所說的，也許你的條碼掃瞄機只支援 EAN 13..等內容。
      因為這外掛產生的條碼我用手機是讀的到的。

  9. 我剛剛測試了，可能這個外掛不能加上英文吧...我加了英文就變得不能讀取。完全是數字的話就沒問題!!

    • 我用該外掛產生 AS123 的 Code93 及 Code128 條碼內容, 接著用手機中的 barcode reader 去讀取是能正確的判斷條碼內容的。

發表迴響