ui.igQRCodeBarcode
![ui.igQRCodeBarcode_image](images/igQRCodeBarcode.png)
Code Sample
<!DOCTYPE html> <html> <head> <title>QR - Basic Configuration</title> <!-- Ignite UI Required Combined CSS Files --> <link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="../../igniteui/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="../../js/modernizr.min.js"></script> <script src="../../js/jquery.min.js"></script> <script src="../../js/jquery-ui.min.js"></script> <!-- Ignite UI Required Combined JavaScript Files --> <script src="../../igniteui/js/infragistics.core.js"></script> <script src="../../igniteui/js/infragistics.dv.js"></script> </head> <body> <div id="barcode"></div> <script type="text/javascript"> $(function () { $("#barcode").igQRCodeBarcode({ height: "300px", width: "100%", data: "http://www.infragistics.com/products/jquery/samples" }); }); </script> </body> </html>
Related Samples
Related Topics
Dependencies
Inherits
-
applicationIndicator
- Type:
- string
- Default:
- ""
Gets or sets the Application Indicator assigned to identify the specification concerned by AIM International.
The value is respected only when the Fnc1Mode is set to Industry. Its value may take the form of any single Latin alphabetic character from the set {a - z, A - Z} or a two-digit number.Code Sample
// Initialize $(".selector").igQRCodeBarcode({ fnc1Mode: "industry", data: "(30)000 258 2365 569", applicationIndicator: "25" }); // Get var applicationIndicator = $(".selector").igQRCodeBarcode("option", "applicationIndicator"); // Set $(".selector").igQRCodeBarcode("option", "applicationIndicator", "25");
-
backingBrush
- Type:
- string
- Default:
- "white"
Gets or sets the brush to use to fill the backing of the barcode.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ backingBrush: "#164F6D" }); // Get var backingBrush = $(".selector").igQRCodeBarcode("option", "backingBrush"); // Set $(".selector").igQRCodeBarcode("option", "backingBrush", "#164F6D");
-
backingOutline
- Type:
- string
- Default:
- "transparent"
Gets or sets the brush to use for the outline of the backing.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ backingOutline: "#164F6D" }); // Get var backingOutline = $(".selector").igQRCodeBarcode("option", "backingOutline"); // Set $(".selector").igQRCodeBarcode("option", "backingOutline", "#164F6D");
-
backingStrokeThickness
- Type:
- number
- Default:
- 0
Gets or sets the stroke thickness of the backing outline.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ backingStrokeThickness: 3 }); // Get var backingStrokeThickness = $(".selector").igQRCodeBarcode("option", "backingStrokeThickness"); // Set $(".selector").igQRCodeBarcode("option", "backingStrokeThickness", 3);
-
barBrush
- Type:
- string
- Default:
- "black"
Gets or sets the brush to use to fill the background of the bars.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ barBrush: "#164F6D" }); // Get var barBrush = $(".selector").igQRCodeBarcode("option", "barBrush"); // Set $(".selector").igQRCodeBarcode("option", "barBrush", "#164F6D");
-
barsFillMode
- Type:
- enumeration
- Default:
- fillSpace
Gets or sets a value which specifies how the grid fills within the barcode control dimensions.
Members
- fillSpace
- Type:string
- FillSpace mode ensures that the barcode grid fills the control dimensions.
- ensureEqualSize
- Type:string
- EnsureEqualSize mode ensures that every grid column/row has the same pixels number width/height. The sum of all columns/rows pixels may be less than the width/height of the control.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ barsFillMode: "ensureEqualSize" }); // Get var barsFillMode = $(".selector").igQRCodeBarcode("option", "barsFillMode"); // Set $(".selector").igQRCodeBarcode("option", "barsFillMode", "ensureEqualSize");
-
data
- Type:
- string
- Default:
- ""
Gets or sets the data value.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ data: "http://www.infragistics.com/products/jquery/help" }); // Get var data = $(".selector").igQRCodeBarcode("option", "data"); // Set $(".selector").igQRCodeBarcode("option", "data", "http://www.infragistics.com/products/jquery/help");
-
eciHeaderDisplayMode
- Type:
- enumeration
- Default:
- hide
Gets or sets a value indicating whether to show the ECI header.
Members
- hide
- Type:string
- Hide the header.
- show
- Type:string
- Show the header.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ eciHeaderDisplayMode: "show" }); // Get var eciHeaderDisplayMode = $(".selector").igQRCodeBarcode("option", "eciHeaderDisplayMode"); // Set $(".selector").igQRCodeBarcode("option", "eciHeaderDisplayMode", "show");
-
eciNumber
- Type:
- number
- Default:
- 3
Each Extended Channel Interpretation (ECI) is designated by a six-digit assignment number: 000000 - 999999.
The default value depends on the loaded encodings. The default is ECI 000003 (representing ISO/IEC 8859-1) if the ISO/IEC 8859-1 character set is loaded. Otherwise the default value is 000026 (representing UTF-8).Code Sample
// Initialize $(".selector").igQRCodeBarcode({ eciNumber: 10 }); // Get var eciNumber = $(".selector").igQRCodeBarcode("option", "eciNumber"); // Set $(".selector").igQRCodeBarcode("option", "eciNumber", 10);
-
encodingMode
- Type:
- enumeration
- Default:
- Undefined
Gets or sets the encoding mode for compaction of the QR Code symbol data. The default value is undefined if the Shift_JIS encoding is loaded. Otherwise the default value is byte.
Members
- undefined
- Type:string
- When Undefined encoding mode is set, the QR code barcode internally switches between modes as necessary in order to achieve the most efficient conversion of data into a binary string.
- numeric
- Type:string
- Numeric mode encodes data from decimal digit set (0-9). Normally 3 data characters are represented by 10 bits.
- alphanumeric
- Type:string
- Alphanumeric mode encodes data from a set of 45 characters (digits 0-9, upper case letters A-Z, nine other characters: space, $ % * + _ . / : ). Normally two input characters are represented by 11 bits.
- byte
- Type:string
- In Byte mode the data is encoded at 8 bits per character. The character set of the Byte encoding mode is byte data (by default it is ISO/IEC 8859-1 character set).
- kanji
- Type:string
- The Kanji mode efficiently encodes Kanji characters in accordance with the Shift JIS system based on JIS X 0208. Each two-byte character value is compacted to a 13-bit binary codeword.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ data: "花", encodingMode: "kanji" }); // Get var applicationIndicator = $(".selector").igQRCodeBarcode("option", "applicationIndicator"); // Set $(".selector").igQRCodeBarcode("option", "applicationIndicator", "kanji");
-
errorCorrectionLevel
- Type:
- enumeration
- Default:
- medium
Gets or sets the error correction level of the QR Code symbol.
Members
- low
- Type:string
- Low error correction level allows recovery of 7% of the symbol codewords.
- medium
- Type:string
- Medium error correction level allows recovery of 15% of the symbol codewords.
- quartil
- Type:string
- Quartil error correction level allows recovery of 25% of the symbol codewords.
- high
- Type:string
- High error correction level allows recovery of 30% of the symbol codewords.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ errorCorrectionLevel: "medium" }); // Get var errorCorrectionLevel = $(".selector").igQRCodeBarcode("option", "errorCorrectionLevel"); // Set $(".selector").igQRCodeBarcode("option", "errorCorrectionLevel", "medium");
-
errorMessageText
- Type:
- string
- Default:
- ""
Gets or sets the message text displayed when some error occurs.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ errorMessageText: "A custom error message!" }); // Get var errorMessageText = $(".selector").igQRCodeBarcode("option", "errorMessageText"); // Set $(".selector").igQRCodeBarcode("option", "errorMessageText", "A custom error message!");
-
fnc1Mode
- Type:
- enumeration
- Default:
- none
Gets or sets the FNC1 mode indicator which identifies symbols encoding messages formatted according to specific predefined industry or application specifications.
Members
- none
- Type:string
- Do not use any Fnc1 symbols, i.e. the data is not identified according to specific predefined industry or application specifications.
- gs1
- Type:string
- Uses Fnc1 symbol in the first position of the character in Code 128 symbols and designates data formatted in accordance with the GS1 General Specification.
- industry
- Type:string
- Uses Fnc1 symbol in the second position of the character in Code 128 symbols and designates data formatted in accordance with a specific industry application previously agreed with AIM Inc.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ data: "(10)07294760157667492700", fnc1Mode: "gs1" }); // Get var fnc1Mode = $(".selector").igQRCodeBarcode("option", "fnc1Mode"); // Set $(".selector").igQRCodeBarcode("option", "fnc1Mode", "gs1");
-
font
- Type:
- string
- Default:
- null
Gets or sets the font of the text displayed by the control.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ font: "20px Georgia" }); // Get var font = $(".selector").igQRCodeBarcode("option", "font"); // Set $(".selector").igQRCodeBarcode("option", "font", "20px Georgia");
-
fontBrush
- Type:
- string
- Default:
- null
Gets or sets the brush to use for the label font.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ fontBrush: "blue" }); // Get var fontBrush = $(".selector").igQRCodeBarcode("option", "fontBrush"); // Set $(".selector").igQRCodeBarcode("option", "fontBrush", "blue");
-
height
- Type:
- enumeration
- Default:
- null
The height of the barcode. It can be set as a number in pixels, string (px) or percentage (%).
Members
- string
- The widget height can be set in pixels (px) and percentage (%).
- number
- The widget height can be set as a number.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ height: "400px" }); // Get var height = $(".selector").igQRCodeBarcode("option", "height"); // Set $(".selector").igQRCodeBarcode("option", "height", "400px");
-
language
Inherited- Type:
- string
- Default:
- "en"
Set/Get the locale language setting for the widget.
Code Sample
//Initialize $(".selector").igQRCodeBarcode({ language: "ja" }); // Get var language = $(".selector").igQRCodeBarcode("option", "language"); // Set $(".selector").igQRCodeBarcode("option", "language", "ja");
-
locale
Inherited- Type:
- object
- Default:
- null
Set/Get the locale setting for the widget.
Code Sample
//Initialize $(".selector").igQRCodeBarcode({ locale: {} }); // Get var locale = $(".selector").igQRCodeBarcode("option", "locale"); // Set $(".selector").igQRCodeBarcode("option", "locale", {});
-
pixelScalingRatio
- Type:
- number
- Default:
- NaN
Gets or sets the scaling value used to affect the pixel density of the control.
A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control
to appear blurry. -
regional
Inherited- Type:
- enumeration
- Default:
- defaults
Set/Get the regional setting for the widget.
Code Sample
//Initialize $(".selector").igQRCodeBarcode({ regional: "ja" }); // Get var regional = $(".selector").igQRCodeBarcode("option", "regional"); // Set $(".selector").igQRCodeBarcode("option", "regional", "ja");
-
sizeVersion
- Type:
- enumeration
- Default:
- undefined
Gets or sets the size version of the QR Code symbol.
Members
- undefined
- Type:string
- If set, the QR code barcode sets internally the smallest version that will accommodate the data.
- version1
- Type:string
- Version1 defines size of 21x21 modules for the symbol.
- version2
- Type:string
- Version2 defines size of 25x25 modules for the symbol.
- version3
- Type:string
- Version3 defines size of 29x29 modules for the symbol.
- version4
- Type:string
- Version4 defines size of 33x33 modules for the symbol.
- version5
- Type:string
- Version5 defines size of 37x37 modules for the symbol.
- version6
- Type:string
- Version6 defines size of 41x41 modules for the symbol.
- version7
- Type:string
- Version7 defines size of 45x45 modules for the symbol.
- version8
- Type:string
- Version8 defines size of 49x49 modules for the symbol.
- version9
- Type:string
- Version9 defines size of 53x53 modules for the symbol.
- version10
- Type:string
- Version10 defines size of 57x57 modules for the symbol.
- version11
- Type:string
- Version11 defines size of 61x61 modules for the symbol.
- version12
- Type:string
- Version12 defines size of 65x65 modules for the symbol.
- version13
- Type:string
- Version13 defines size of 69x69 modules for the symbol.
- version14
- Type:string
- Version14 defines size of 73x73 modules for the symbol.
- version15
- Type:string
- Version15 defines size of 77x77 modules for the symbol.
- version16
- Type:string
- Version16 defines size of 81x81 modules for the symbol.
- version17
- Type:string
- Version17 defines size of 85x85 modules for the symbol.
- version18
- Type:string
- Version18 defines size of 89x89 modules for the symbol.
- version19
- Type:string
- Version19 defines size of 93x93 modules for the symbol.
- version20
- Type:string
- Version20 defines size of 97x97 modules for the symbol.
- version21
- Type:string
- Version21 defines size of 101x101 modules for the symbol.
- version22
- Type:string
- Version22 defines size of 105x105 modules for the symbol.
- version23
- Type:string
- Version23 defines size of 109x109 modules for the symbol.
- version24
- Type:string
- Version24 defines size of 113x113 modules for the symbol.
- version25
- Type:string
- Version25 defines size of 117x117 modules for the symbol.
- version26
- Type:string
- Version26 defines size of 121x121 modules for the symbol.
- version27
- Type:string
- Version27 defines size of 125x125 modules for the symbol.
- version28
- Type:string
- Version28 defines size of 129x129 modules for the symbol.
- version29
- Type:string
- Version29 defines size of 133x133 modules for the symbol.
- version30
- Type:string
- Version30 defines size of 137x137 modules for the symbol.
- version31
- Type:string
- Version31 defines size of 141x141 modules for the symbol.
- version32
- Type:string
- Version32 defines size of 145x145 modules for the symbol.
- version33
- Type:string
- Version33 defines size of 149x149 modules for the symbol.
- version34
- Type:string
- Version34 defines size of 153x153 modules for the symbol.
- version35
- Type:string
- Version35 defines size of 157x157 modules for the symbol.
- version36
- Type:string
- Version36 defines size of 161x161 modules for the symbol.
- version37
- Type:string
- Version37 defines size of 165x165 modules for the symbol.
- version38
- Type:string
- Version38 defines size of 169x169 modules for the symbol.
- version39
- Type:string
- Version39 defines size of 173x173 modules for the symbol.
- version40
- Type:string
- Version40 defines size of 177x177 modules for the symbol.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ sizeVersion: "version12" }); // Get var sizeVersion = $(".selector").igQRCodeBarcode("option", "sizeVersion"); // Set $(".selector").igQRCodeBarcode("option", "sizeVersion", "version12");
-
stretch
- Type:
- enumeration
- Default:
- uniform
Gets or sets the stretch.
Members
- none
- Type:string
- .
- fill
- Type:string
- .
- uniform
- Type:string
- .
- uniformToFill
- Type:string
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ stretch: "uniformToFill" }); // Get var stretch = $(".selector").igQRCodeBarcode("option", "stretch"); // Set $(".selector").igQRCodeBarcode("option", "stretch", "uniformToFill");
-
width
- Type:
- enumeration
- Default:
- null
The width of the barcode. It can be set as a number in pixels, string (px) or percentage (%).
Members
- string
- The widget width can be set in pixels (px) and percentage (%).
- number
- The widget width can be set as a number.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ width: "400px" }); // Get var width = $(".selector").igQRCodeBarcode("option", "width"); // Set $(".selector").igQRCodeBarcode("option", "width", "400px");
-
widthToHeightRatio
- Type:
- number
- Default:
- 3
Gets or sets the width (XDimension) to height (YDimension) ratio. It accepts only positive values. This property does not apply for the QR barcode.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ widthToHeightRatio: 2 }); // Get var widthToHeightRatio = $(".selector").igQRCodeBarcode("option", "widthToHeightRatio"); // Set $(".selector").igQRCodeBarcode("option", "widthToHeightRatio", 2);
-
xDimension
- Type:
- number
- Default:
- 0.25
Gets or sets the X-dimension (narrow element width) for a symbol in mm. It accepts values from 0.01 to 100.
Code Sample
// Initialize $(".selector").igQRCodeBarcode({ xDimension: 2 }); // Get var xDimension = $(".selector").igQRCodeBarcode("option", "xDimension"); // Set $(".selector").igQRCodeBarcode("option", "xDimension", 2);
For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.
-
dataChanged
- Cancellable:
- false
Occurs when the data has changed.
Function takes first argument evt and second argument ui.
Use ui.owner to obtain reference to the barcode widget.
Use ui.newData to obtain the new data.Code Sample
//Bind $(document).delegate(".selector", "igqrbarcodedatachanged", function (evt, ui) { // Get reference to the the barcode widget. ui.owner; // Get the new data value ui.newData; }); // Initialize $(".selector").igQRCodeBarcode({ dataChanged: function(evt, ui) {...} });
-
errorMessageDisplaying
- Cancellable:
- false
Occurs when an error has happened.
Function takes first argument evt and second argument ui.
Use ui.owner to obtain reference to the barcode widget.
Use ui.errorMessage to get or set the error message that is to be shown.Code Sample
//Bind $(document).delegate(".selector", "igqrbarcodeerrormessagedisplaying", function (evt, ui) { // Get reference to the barcode widget. ui.owner; // Get or set the error message that is to be shown ui.errorMessage; }); // Initialize $(".selector").igQRCodeBarcode({ errorMessageDisplaying: function(evt, ui) {...} });
-
changeGlobalLanguage
Inherited- .igQRCodeBarcode( "changeGlobalLanguage" );
Changes the widget language to global language. Global language is the value in $.ig.util.language.
Code Sample
$(".selector").igQRCodeBarcode("changeGlobalLanguage");
-
changeGlobalRegional
Inherited- .igQRCodeBarcode( "changeGlobalRegional" );
Changes the widget regional settins to global regional settings. Global regional settings are container in $.ig.util.regional.
Code Sample
$(".selector").igQRCodeBarcode("changeGlobalRegional");
-
changeLocale
Inherited- .igQRCodeBarcode( "changeLocale", $container:object );
Changes the all locales contained into a specified container to the language specified in options.language
Note that this method is for rare scenarios, use language or locale option setter.- $container
- Type:object
- Optional parameter - if not set it would use the element of the widget as $container.
Code Sample
$(".selector").igQRCodeBarcode("changeLocale");
-
destroy
- .igQRCodeBarcode( "destroy" );
Destroys widget.
Code Sample
$(".selector").igQRCodeBarcode("destroy");
-
exportVisualData
- .igQRCodeBarcode( "exportVisualData" );
- Return Type:
- object
- Return Type Description:
- a JavaScript object containing the visual data.
Returns information about how the barcode is rendered.
Code Sample
$(".selector").igQRCodeBarcode("exportVisualData");
-
flush
- .igQRCodeBarcode( "flush" );
Causes all pending changes of the barcode e.g. by changed property values to be rendered immediately.
Code Sample
$(".selector").igQRCodeBarcode("flush");
-
styleUpdated
- .igQRCodeBarcode( "styleUpdated" );
Re-polls the css styles for the widget. Use this method when the css styles have been modified.
Code Sample
$(".selector").igQRCodeBarcode("styleUpdated");
-
ui-barcode
- Class applied to main element: ui-barcode ui-corner-all ui-widget-content.
-
ui-barcode-backing
- Class applying background-color and border-color to the backing element.
-
ui-barcode-bar
- Class applying background-color to the bar elements.
-
ui-barcode-label
- Class applying background-color to the text elements.
-
ui-html5-non-html5-supported-message ui-helper-clearfix ui-html5-non-html5
- Class applied to main element, shown when the QRCodeBarcode is opened in a non HTML5 compatible browser.