State Indicators

This jQuery plugin creates an image based state indicator DOWNLOAD

State Visual
Good 1
Bad -1
Neutral 0

JS Fiddle example

The element that will contain the state indicator should have the following values in it:

1 = Use the good image

0 = Use the neutral image

-1 = Use the bad image

When to use it

I primarily like to use state indicators to show how well a metric is performing.

Example:

The Javascript

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

<script type="text/javascript" src="js/dv-state-indicator.js"></script>

<script type="text/javascript">

jQuery(document).ready(function ()

{

jQuery('#dv-container').dvStateIndicator(

{

s_goodImageURL: 'http://www.alexsandy.com/images/good.png',

s_badImageURL: 'http://www.alexsandy.com/images/bad.png',

s_neutralImageURL: 'http://www.alexsandy.com/images/neutral.png'

});

});

</script>

The HTML Markup

<div id="dv-container">0</div>

 

The Result

Documentation

Options

Option Type Default Value Description
s_goodImageURL string null The image url of the good state
s_badImageURL string null The image url of the bad state
s_neutralImageURL string null The image url of the neutral state
       


Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *