jQuery Barcode API
- Getting Started
- Setting Up ASP.NET Core MVC
- Accessibility
- Chart
- ASP.NET
- Overview
- Getting Started
- Design-time Support
- ItemTypes
- Chart Elements
- Chart Types
- Area Chart
- Bar Chart
- Bubble Chart
- Line Chart
- Pie Chart
- Sparklines
- Donut Chart
- Scatter Chart
- Spline Chart
- SplineArea Chart
- RangeArea Chart
- RangeBar Chart
- RangeSpline Chart
- StepLine Chart
- StepArea Chart
- PolarLine Chart
- PolarArea Chart
- PolarBar Chart
- PolarSpline Chart
- PolarSplineArea Chart
- PolarScatter Chart
- Combining Chart Types
- Data Binding
- Exporting
- Localization
- Selection
- Zooming and Panning
- Appearance and Styling
- Server Side Events
- Client Events
- Supported Browsers
- ASP.NET Core
- ASP.NET MVC
- JAVA Apache Wicket
- API
- allowUTCFormatting
- applyAnimation
- axisX
- axisTickText
- axisType
- categoricalValues
- decimalTicks
- drawColor
- drawWidth
- endOffset
- fixedEnd
- inverseOrder
- max
- min
- minorPlotStripColor
- minorPlotStripDashStyle
- minorPlotStripWidth
- minorTicksColor
- minorTicksHeight
- minorTicksRepeat
- minorTicksWidth
- offset
- plotBands
- plotLines
- plotStripColor
- plotStripDashStyle
- plotStripWidth
- startOffset
- swapLocation
- ticksColor
- ticksHeight
- ticksPlacement
- ticksRepeat
- ticksWidth
- title
- axisY
- axisTickText
- axisType
- decimalTicks
- drawColor
- drawWidth
- endOffset
- fixedEnd
- inverseOrder
- max
- min
- minorPlotStripColor
- minorPlotStripDashStyle
- minorPlotStripWidth
- minorTicksColor
- minorTicksHeight
- minorTicksRepeat
- minorTicksWidth
- offset
- plotBands
- plotLines
- plotStripColor
- plotStripDashStyle
- plotStripWidth
- startOffset
- swapLocation
- ticksColor
- ticksHeight
- ticksPlacement
- ticksRepeat
- ticksWidth
- title
- backgroundColor
- borderColor
- borderRadius
- borderWidth
- chartAreaBackgroundColor
- chartAreaBackgroundImage
- chartAreaBorderColor
- chartAreaBorderWidth
- chartAreaPaddingBottom
- chartAreaPaddingLeft
- chartAreaPaddingRight
- chartAreaPaddingTop
- chartLegend
- dataSeries
- enableAutoFit
- events
- exportOptions
- height
- isInverted
- margin
- primaryHeader
- secondaryHeader
- seriesPalette
- seriesSettings
- area
- bar
- bubble
- donut
- line
- pie
- polararea
- polarbar
- polarline
- polarscatter
- polarspline
- polarsplinearea
- rangearea
- rangebar
- rangesplinearea
- scatter
- spline
- splinearea
- steparea
- stepline
- seriesType
- theme
- tooltipSettings
- width
- zoomMode
- Getting Started
- Events
- How-To
- Methods
- Styling
- Supported Browsers
- ASP.NET
- Barcode
- QR Code
- TagCloud
- TreeMap
- Grid
- ASP.NET
- ASP.NET Core
- ASP.NET MVC
- JAVA Apache Wicket
- JavaScript
- API
- Settings
- altRowTemplate
- altRows
- columnReorder
- columns
- dataSource
- detailCollapseCssClass
- detailCollapseText
- detailExpandCollapse
- detailExpandCssClass
- detailExpandText
- detailTemplate
- editing
- exportOptions
- filtering
- grouping
- height
- maxHeight
- noRecordsTemplate
- noRecordsText
- paging
- resizing
- rowHover
- rowTemplate
- scrolling
- selection
- showHeader
- sorting
- toolbar
- Events
- Properties
- Methods
- addRow
- cancelEditing
- clearSelection
- collapseRow
- dataItem
- deleteRow
- destroy
- editCell
- editRow
- expandRow
- exportCsv
- exportExcel
- exportPdf
- filter
- hideColumn
- insertRow
- isHidden
- isLocked
- lockColumn
- page
- pageSize
- refresh
- reorderColumn
- revertChanges
- saveChanges
- scrollTop
- select
- selectedRowIndices
- showColumn
- sort
- ungroup
- unlockColumn
- Settings
- Getting Started
- Autogenerated Editors
- Binding to Data
- Cancel User Iteraction
- Change Options Dynamically
- Columns
- Custom Editors
- Exporting
- Filtering
- Footer Total Aggregates
- Grouping
- Hierarchy
- Paging
- RTL
- Scrolling
- Selection
- Sorting
- Templates
- Themes
- Validation
- API
- Accordion
- AutoComplete
- Button
- Calendar
- CheckBox
- ColorPicker
- ComboBox
- ContextMenu
- DataSource
- DatePicker
- DateTimePicker
- Draggable
- DropDown
- Droppable
- Editor
- ListBox
- LoadingPanel
- MaskedTextBox
- Menu
- MonthYearPicker
- NumericTextBox
- Pager
- ProgressBar
- RadioButton
- Rating
- RecursiveDataSource
- Slider
- SplitButton
- Splitter
- Switch
- Tabs
- TextBox
- TimePicker
- Timeline
- Tooltip
- TreeView
- Upload
- Window
One dimensional barcodes allow encoding of data and rendering this data into binary strings,
represented by a sequence of black and white parallel lines.
Since these are read by a scanner from left to right, without regard to vertical position,
they are considered one dimensional or linear barcodes.
The difference between the barcodes is both in terms of encoding and in rendering.
Encoding determines the rules according to which each character is translated into a binary string.
The rendering algorithm determines how the sequence of 1s and 0s will be rendered.
Types of barcodes
Presently, ShieldUI offers the following one-dimensional barcodes:
"CODABAR", "CODE-11", "CODE-39", "CODE-93", "CODE-128",
"CODE-128-A", "CODE-128-B", "CODE-128-C", "CODE-25-STANDARD",
"CODE-25-INTERLEAVED", "EAN-8", "EAN-13", "UPC-A", "UPC-E",
"MSI-10", "MSI-10-10", "MSI-11", "MSI-11-10", "POSTNET".
Barcodes properties
A typical declaration of a barcode control looks like this:
$("#code11").shieldBarcode({ type: "CODE-11", value: "123-45", width: 300, height: 200, style: { background: "#e3e3e3", borderColor: "black", borderStyle: "dashed", borderWidth: 2, color: "green", paddingTop: 50, paddingBottom: 50, paddingLeft: 100, paddingRight: 100 } });
There are a number of important properties, which need to be set, in order to encode a text or customize the controls.
These are listed below:
type is a string value, specifying the type of code which will be used. This can be any of the code values listed above.
value is a string value, specifying text, which will be encoded and rendered by the barcode.
width is a numeric value, specifying the width for the control in pixels. This includes any padding which may be applied to it.
height is a numeric value, specifying the height for the control in pixels. This includes any padding which may be applied to it.
style is a complex property, which allows further visual customization for the barcode control. The possible values, which can be set are:
background – a string property, which accepts either a named color or a hexadecimal value, specifying the background color for the control.
borderColor – a string property, which accepts either a named color or a hexadecimal value, specifying the color of the border for the control.
borderStyle – a string value, specifying the style for the border.
This accepts from one two four possible values.
The structure of the syntax is as follows:
borderStyle: style /* One-value syntax */
E.g. borderStyle: “dashed”;
borderStyle: vertical horizontal /* Two-value syntax */
E.g. borderStyle: “dotted solid”;
borderStyle: top horizontal bottom /* Three-value syntax */
E.g. borderStyle: “hidden double dashed”;
borderStyle: top right bottom left /* Four-value syntax */
E.g. borderStyle: “none solid dotted dashed”;
borderWidth- a number, specifying the width of the border in pixels.
color – a named of hex string value, representing the color of the barcode.
paddingTop, paddingBottom, paddingLeft and paddingRight
specify the padding values for the barcode control.
Text properties
By specification, each barcode can render text below it. In addition to this, one can choose whether to have a checksum appended to this text.
All of this is controlled through the “text” object, as shown below:
text: { enabled: true, checksum: true }
Methods
The methods of the Barcode control are:
- destroy - destroys the instance of the Barcode widget.
-
refresh - reloads the current instance of the Barcode widget.
The optional parameteroptions
gives the possibility to extend the initial options with the new ones.
The following example demonstrates some of the properties of the controls.