JQUERY PLUGIN：BARCODE條碼外掛程式

標籤：

1）query.barcode.js安裝

同其他jquery外掛程式一樣，只需要將jquery架構和jquery.barcode.js匯入頁面即可。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery-barcode.js"></script>

2）jquery.barcode.js使用方法

2.1）定義一個DOM對象作為條碼/二維碼的容器

<div id="bcTarget"></div>

2.2）使用javascript調用jquery.barcode.js繪製條碼/二維碼

$("#bcTarget").barcode("1234567890128", "ean13");

jquery對象擴充方法barcode參數說明

barcode: function(datas, type, settings)  

1.datas參數支援2種類型

• string：要繪製的條碼字串內容（依賴於條碼的類型）。如果條碼類型能容納這些字元，並且存在校正不是強制性的，字串的ISE將會自動計算（原文：If barcode type include it, the presence of the checksum is not mandatory, it ise automatically recalculated）
• object

2.type (string)：條碼類型

• 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)

3.settings (object)：條碼樣式的配置

barWidth（條碼款）、barHeight（容器高）、showHRI（是否顯示條碼內容）、bgColor（背景色）、color（條碼顏色）、fontSize（內容字型大小）、output（如何繪製條碼：css，svg，bmp，canvas，注意svg，bmp，canvas不支援IE，最好不用。）

 範例程式碼

<input type="button" onclick=‘$("#bcTarget").barcode("1234567890128", "ean13",{barWidth:2, barHeight:30});‘ value="ean13"><input type="button" onclick=‘$("#bcTarget2").barcode("1234567", "int25",{barWidth:2, barHeight:30});‘ value="int25">  <input type="button" onclick=‘$("#bcTarget3").barcode({code: "1234567", crc:false}, "int25",{barWidth:2, barHeight:30});‘ value="int25 without crc">  

 

JQUERY PLUGIN：BARCODE條碼外掛程式