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).

Example

A Dipswitch with the standard css looks like this one:

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

Download

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:

test.html

[sourcecode language=”html”]
<!–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>

<!–Dependencies:–>
<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>
[/sourcecode]

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’ 🙂 )

test.html

[sourcecode language=”html”]
<div id="DipSmile"></div>
[/sourcecode]

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

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

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 🙂

Options

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”

[sourcecode language=”javascript”]
$( "#DipSmile" ).dipswitch("option", "decimalvalue", 105);
[/sourcecode]

2. multiple options

[sourcecode language=”javascript”]
$( "#DipSmile" ).dipswitch({ decimalvalue : 105 });
//or
$( "#DipSmile" ).dipswitch({
decimalvalue : 105,
userinput : false
});
[/sourcecode]

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

[sourcecode language=”javascript”]
$( "#DipSmile" ).dipswitch({
decimalvalue : 3,
userinput : false
bits : 5;
});
[/sourcecode]

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

Set Decimal Value

[sourcecode language=”javascript”]
$( "#DipSmile" ).dipswitch("option", "decimalvalue", 105);
[/sourcecode]

Allow or Disable User Input

[sourcecode language=”javascript”]
$( "#DipSmile" ).dipswitch("option", "userinput", true);
[/sourcecode]

Set quantity of Bits

[sourcecode language=”javascript”]
$( "#DipSmile" ).dipswitch("option", "bits", 9);
[/sourcecode]

Set custom Bitvalues

[sourcecode language=”javascript”]
$( "#DipSmile" ).dipswitch("option", "aBitvalues", [1, 5, 16]);
[/sourcecode]

Functions

Reverse direction of Bits

[sourcecode language=”javascript”]
$( "#DipSmile" ).dipswitch("reversBits");
[/sourcecode]

Events

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:

[sourcecode language=”javascript”]
$( "#Dip8High" ).dipswitch("option", "change",
function( event, data ) {
//your code here..
});
[/sourcecode]

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

[sourcecode language=”javascript”]
$( "#DipSmile" ).on("dipswitchchange",
function( event, data ) {
//your code here..
});
[/sourcecode]

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

[sourcecode language=”javascript”]
$( "#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!
}
});
[/sourcecode]

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