Available in the Full Version
Barcode - QR Settings
This sample demonstrates configuring the QR-code-specific settings.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample demonstrates configuring the QR-code-specific settings.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- Used to style the API Viewer and Explorer UI -->
<link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_big5.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_cp437.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_gb2312.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_iso646-us.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-1.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-2.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-3.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-4.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-5.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-6.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-7.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-8.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-9.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-11.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-13.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_iso-8859-15.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_ksc5601.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_shift_jis.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_windows-1250.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_windows-1251.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_windows-1252.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/encoding/infragistics.encoding_windows-1256.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
</head>
<body>
<div id="barcode"></div>
<fieldset id="barcodeOptions" style="margin-top: 30px">
<legend>Options</legend>
<table>
<tr>
<td colspan="4">
<label style="width:16%; display:inline-block" for="dataInput">Data</label>
<input id="dataInput" style="width:70%" value="http://www.infragistics.com/products/jquery/help"/>
<input id="setButton" type="button" value="Set" style="width:10%"/>
</td>
</tr>
<tr>
<td>Eci Number</td>
<td>
<select id="eciNumber" style="width: 100px; margin: 12px">
<option value="0">0 - CP 437</option>
<option value="1">1 - ISO-8859-1</option>
<option value="2">2 - CP 437</option>
<option value="3" selected>3 - ISO-8859-1</option>
<option value="4">4 - ISO-8859-2</option>
<option value="5">5 - ISO-8859-3</option>
<option value="6">6 - ISO-8859-4</option>
<option value="7">7 - ISO-8859-5</option>
<option value="8">8- ISO-8859-6</option>
<option value="9">9 - ISO-8859-7</option>
<option value="10">10 - ISO-8859-8</option>
<option value="11">11 - ISO-8859-9</option>
<option value="13">13 - ISO-8859-11</option>
<option value="15">15 - ISO-8859-13</option>
<option value="17">17 - ISO-8859-15</option>
<option value="20">20 - Shift JIS</option>
<option value="21">21 - Windows-1250</option>
<option value="22">22 - Windows-1251</option>
<option value="23">23 - Windows-1252</option>
<option value="24">24 - Windows-1256</option>
<option value="25">25 - UTF-16</option>
<option value="26">26 - UTF-8</option>
<option value="27">27 - ISO-646-US</option>
<option value="28">28 - Big5</option>
<option value="29">29 - GB 2312</option>
<option value="30">30 - KSC-5601</option>
</select>
</td>
<td>ECC Level</td>
<td>
<select id="eccLevel" style="width: 100px; margin: 12px">
<option>Low</option>
<option selected>Medium</option>
<option>Quartil</option>
<option>High</option>
</select>
</td>
</tr>
<tr>
<td>Size Version</td>
<td>
<select id="sizeVersion" style="width: 100px; margin: 12px" ></select>
</td>
<td>Encoding Mode</td>
<td>
<select id="encodingMode" style="width: 100px; margin: 12px">
<option>Undefined</option>
<option>Numeric</option>
<option>Alphanumeric</option>
<option>Byte</option>
<option>Kanji</option>
</select>
</td>
</tr>
<tr>
<td>Eci Header Display Mode</td>
<td>
<select id="eciHeaderDisplayMode" style="width: 100px; margin: 12px">
<option>Hide</option>
<option>Show</option>
</select>
</td>
</tr>
</table>
</fieldset>
<script type="text/javascript">
$(function () {
$("#barcode").igQRCodeBarcode({
height: "300px",
width: "100%",
stretch: 'uniform',
data: "http://www.infragistics.com/products/jquery/help"
});
$("#setButton").click(function () {
$("#barcode").igQRCodeBarcode("option", "data", $("#dataInput").val());
});
$("#eciNumber").change(function () {
var val = $("#eciNumber").val().toLowerCase();
$("#barcode").igQRCodeBarcode("option", "eciNumber", parseInt(val));
});
$("#eccLevel").change(function () {
var val = $("#eccLevel").val().toLowerCase();
$("#barcode").igQRCodeBarcode("option", "errorCorrectionLevel", val);
});
$("#sizeVersion").append("<option>Undefined</option>");
for (var i = 1; i < 41; i++) {
$("#sizeVersion").append("<option>Version" + i + "</option>");
}
$("#sizeVersion").change(function () {
var val = $("#sizeVersion").val().toLowerCase();
$("#barcode").igQRCodeBarcode("option", "sizeVersion", val);
});
$("#encodingMode").change(function () {
var val = $("#encodingMode").val().toLowerCase();
$("#barcode").igQRCodeBarcode("option", "encodingMode", val);
});
$("#eciHeaderDisplayMode").change(function () {
var val = $("#eciHeaderDisplayMode").val().toLowerCase();
$("#barcode").igQRCodeBarcode("option", "eciHeaderDisplayMode", val);
});
$("#dataInput").keydown(function ( event ) {
//check for Enter key
if (event.which == 13) {
$("#barcode").igQRCodeBarcode("option", "data", $("#dataInput").val());
}
});
});
</script>
</body>
</html>