sevenSeg.js - A tiny JavaScript jQuery UI plugin for creating vector-based (SVG) seven-segment displays in HTML

Features
- No images. All graphics are drawn using HTML SVG that scales to any size.
-
No external CSS file. Default style classes are injected into your page.
If you want to tailor the style classes in your own CSS you can.
You can also style the individual widgets via options. It's your choice. - Databinders for Knockout MVVM.
- MIT License.
Usage
Include jQuery and jQuery UI in your HTML before including sevenSeg.js. If you intend to use Knockout it needs to be included before sevenSeg.js too, but it's completely optional.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script> <script src="sevenSeg.js"></script>
You can then instantiate sevenSeg and sevenSegArray widgets on any div's of your choosing.
sevenSeg creates a single digit display, and sevenSegArray creates a group containing an arbitrary number of digits. You'll most likely want to use sevenSegArray. (See examples below).
These are the widget options supported by sevenSeg:
options: {
/**
This option controls the display value on the 7seg. Set this to the numeric digit you
want displayed.
*/
value: null,
/**
Override the default segment on color (Red).
Note: You can alternatively define a CSS style for the class.sevenSeg-segOn that specifies a 'fill' color.
*/
colorOn: null,
/**
Override the default segment off color (#320000).
Note: You can alternatively define a CSS style for the class .sevenSeg-svg that specifies a 'fill' color.
*/
colorOff: null,
/**
Override the default background color of the display (Black).
Note: You can alternatively define a CSS style for the class .sevenSeg-svg that specifies a 'background-color' color.
*/
colorBackground: null,
/**
This option allows skewing the segments to create a slant effect.
Note: Setting "transform: skew()" in CSS is problematic for SVG. Would be nice to have, but browser support just
isn't there yet. So, setting the slant must be done through options.
*/
slant: 0,
/**
This flag controls the appearance of the decimal point 'dot' in the display.
The default is to display it (true), but you can set to false to omit it.
*/
decimalPoint: true
}
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu