DipSwitch jQuery UI Widget

the DipSwitch jQuery UI Widget is a project, to create an Widget, that provides a visual representation of an decimal value as binary
in form of a graphic of a dipswitch (a small passive electronic component that has one to 10 or more small (sliding) switches in one housing).


A Dipswitch with the standard css looks like this one:

you can have a look at some more examples in the example_package.


there are two options:
The example_package or the dipswitch files :

the dipswitch_v0.3__example_package.zip contains:

  • css
    • dipswitch.css
    • main_example.css
  • js
    • jquery.js
    • jquery.slight.dipswitch.js
    • jquery.ui.core.js
    • jquery.ui.widget.js
    • licens.txt
  • index.htm

the dipswitch_v0.3.zip contains:

  • css
    • dipswitch.css
  • js
    • jquery.slight.dipswitch.js
    • licens.txt

the Script is dual licensed under MIT and GPL licenses.
There are some files in the example-package that are just given for easy beginning.
You should look at http://jquery.com/ and http://jqueryui.com/ to get the current versions and more informations about the used files.
The Script is tested with Firefox 9.0.1. and should work with all current browsers… 🙂

Download jquery.slight.dipswitch_v0.3__example_package.zip
Download dipswitch__v0.3.zip

pleas link only to project.s-light.eu the direct links could change. (hopefully some magic day in the future i will find time to upload this thing to github..

How to integrate in own project:

First steps to get something up and running is todownload the example_package.
It contains all necessary files.
extract the zip and open index.html in your favorite web browser.
than you can see a demo side like this one.

Now if you want to integrate the dipswitch Widget in your own side here are the necessary steps:
(alternative to his guide you just can look at the source of the index.html in the example_package.)

1. add the following lines of source code in the head section of your page to link to the needed files:


<!--Stylesheet -->
<link   type="text/css" rel="stylesheet"  href="css/dipswitch.css">
<!--Functionality for dipswitch-->
<script type="text/javascript" src="js/jquery.slight.dipswitch.js"></script>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>

and – jea – you have to edit the links to the locations of your system…

2. define a ‘div’ element with an id you remember in the body part of your page. (in this Example: ‘DipSmile’ 🙂 )


<div id="DipSmile"></div>

3. add the following script in your side (head or body)

<script type="text/javascript">
//run sourcecode when page DOM is ready..
$(document).ready(function() {
//Initialize and create dipswitch:
$( "#DipSmile" ).dipswitch();

this is the easies way of initializing / creating a Dipswitch in your side.

There are more options and possibilities to manipulate the behavior
— if you are interested – read on 🙂


after you have ‘created’ a dipswitch on your side you can manipulate it with the following options:

all Options are set-able in two ways:
1. for single settings with “option”

$( "#DipSmile" ).dipswitch("option", "decimalvalue", 105);

2. multiple options

$( "#DipSmile" ).dipswitch({ decimalvalue : 105 });
$( "#DipSmile" ).dipswitch({
decimalvalue : 105,
userinput	 : false

with the multiple options way you can override the default options during initialization:

$( "#DipSmile" ).dipswitch({
decimalvalue : 3,
userinput	 : false
bits		 : 5;

so you can set the options and initialize in on step 🙂

Set Decimal Value

$( "#DipSmile" ).dipswitch("option", "decimalvalue", 105);

Allow or Disable User Input

$( "#DipSmile" ).dipswitch("option", "userinput", true);

Set quantity of Bits

$( "#DipSmile" ).dipswitch("option", "bits", 9);

Set custom Bitvalues

$( "#DipSmile" ).dipswitch("option", "aBitvalues", [1, 5, 16]);


Reverse direction of Bits

$( "#DipSmile" ).dipswitch("reversBits");


Event ‘change’

the dipswitch triggers an event every time something changes: ‘dipswitchchange’;
there are two ways to ‘bind’ to it:
1. As Option to change:

$( "#Dip8High" ).dipswitch("option", "change",
function( event, data ) {
//your code here..

2. Bind eventhandler to event with jQuery .on():

$( "#DipSmile" ).on("dipswitchchange",
function( event, data ) {
//your code here..

sometimes you want to know if the ‘dipswitchchange’ event is triggered by user or program.
therefor you can check ‘event.originalEvent’:
event.originalEvent ===
undefined : programmatically changed
keyup : user has made an input in text field
click : user clicked a switch
so with something like

$( "#DipSmile" ).on("dipswitchchange",
function( event, data ) {
if ( event.originalEvent !== undefined ) {
console.log("event.originalEvent.type = ", event.originalEvent.type);
//your code - runs when user has triggerd change!

you can check that only if the user has clicked or write something in the input field the trigger is fired.

2 thoughts on “DipSwitch jQuery UI Widget”

  1. Hello,

    I followed this project on OLA list, it’s great 🙂
    But the link for example_package is dead :/


    1. its a little bit to late that i have seen your comment here..
      at the moment both links work for me – i hope for all others too 🙂

Comments are closed.