A Stoplight Status Component Using Bootstrap

I had a request to create a “stoplight” status section in a recent application.  The purpose of this section would be for the users to register a red, yellow, green status to a number of categories on a product development information form.

Using a combination of Twitter Bootstrap and jQuery I was able to create a nice looking component that provided the exact functionality they were hoping to achieve.

Here is a link to the demo page where you can see this in action.

Button Code

<div>
<a id="cat_1_btn" class="cat1" href="javascript:statusToggle('cat1')" role="button">
Strategic Support</a>
<a id="cat_2_btn" class="cat2" href="javascript:statusToggle('cat2')" role="button">
Competitive Landscape</a>
<a id="cat_3_btn" class="cat3" href="javascript:statusToggle('cat3')" role="button">
Product Development</a>
</div>

statusToggle Code

All the below function does is to check the current CSS class of the button and toggle it to the next one.  Very simple.

function statusToggle(category) { 
 if ($("." + category).hasClass("btn btn-success btn-xs btn-custom")) { 
   $("." + category).removeClass("btn btn-success btn-xs btn-custom")
   $("." + category).addClass("btn btn-danger btn-xs btn-custom")
   $("." + category + "Status").val("danger")
 } else if ($("." + category).hasClass("btn btn-danger btn-xs btn-custom")) { 
   $("." + category).removeClass("btn btn-danger btn-xs btn-custom")
   $("." + category).addClass("btn btn-warning btn-xs btn-custom")
   $("." + category + "Status").val("warning")
 } else if ($("." + category).hasClass("btn btn-warning btn-xs btn-custom")) { 
   $("." + category).removeClass("btn btn-warning btn-xs btn-custom")
   $("." + category).addClass("btn btn-success btn-xs btn-custom")
   $("." + category + "Status").val("success")
 }
};

The CSS classes set by the above code is standard Twitter Bootstrap CSS. The final btn-custom class only serves to add some margins and bold weight to the button text.  Nothing special there.

Interestingly enough, the above code was initially implemented in an Oracle APEX application.   Since it was all javascript and CSS I was able to easily port the code over to a sample xPages application without changing really anything.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s