windowed.js

windowed.js is a jQuery plugin that implements Chris Norström's awesome "Windowed Slider" concept. It takes your regular checkboxes or <select> lists and transforms them into slick 'windowed sliders'.

Concept by Chris Norström

When an option is selected with the slider, the value of the original checkbox or <select> is updated too, so it should work seamlessly with existing forms.

I've tested the plugin on recent versions of Firefox, Chrome and Safari (mobile & desktop) - theoretically it should work fine in IE7+ and Opera, but these are untested. Requires jQuery 1.7+.

windowed.js is freely distributable under the terms of the MIT license.

Contents

Usage & demos

For all the examples below, you'll first need to add the windowed.min.css and jquery.windowed.min.js files to your HTML page:

1
2
3
4
5
6
7
8
<head>
  <link rel="stylesheet" href="path/to/windowed.min.css">
</head>
<body>
  <!-- blah blah -->
  <script src='jquery.js'></script>
  <script src='/path/to/jquery.windowed.min.js'></script>
</body>

Note: I've simplified the HTML in the examples for brevity's sake. For instance, when using this in real life, make sure your <input>/<select> elements have a name attribute.

Checkbox

To get started, just call .windowed() on a checkbox or dropdown.

HTML:

1
<input type='checkbox'>

JavaScript:

1
$("input:checkbox").windowed();

Select box

HTML:

1
2
3
4
5
<select>
  <option>WE</option>
  <option>HAVE</option>
  <option>CHOICES!</option>
</select>

JavaScript:

1
$("select").windowed();

Vertical

You can make a vertical select using by setting the vertical option to true.

HTML:

1
2
3
4
5
6
<select>
  <option>If you need more room for choices</option>
  <option selected='selected'>Feel free to go with the vertical orientation</option>
  <option>It's not as elegant as using a radio button</option>
  <option>But it's an option</option>

JavaScript:

1
2
3
$("select").windowed({
  vertical: true
});

Custom text, width and height

Customize the label text on a checkbox with the on and off options.

JavaScript:

1
2
3
4
$("input:checkbox").windowed({
  on: "ENABLED",
  off: "DISABLED"
});

You can use CSS to set the component's width and height. Alternatively, you can pass a width or height option to the JS function.

CSS:

1
2
3
4
.window-toggle {
  width: 200px;
  height: 50px;
}

Callback

Set a callback (fires on change) using the change option.

The callback function will be passed:

Note: if the DOM element has an onchange event, that will still be fired - although using a windowed.js change callback is preferable.

JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("input:checkbox").windowed({
  change: function(event, checked) {
    alert( "The checkbox is now " + (checked ? "checked" : "unchecked") );
    console.log( $(this) );
  }
});

$("select").windowed({
  change: function(event, selected) {
    alert( 
      "You selected item #" + ($(selected).index() + 1) + 
      " - " + $(selected).text()
    );
  }
});

Themes

The theme option can change the style of the component, by adding classes to the component's container <div>. Included by default are 4 themes: info, success, warning and danger.

theme can be a string, or if set to true, windowed.js will use the CSS classes already present on the checkbox/dropdown.

For info on creating a custom theme, see custom themes below.

HTML:

1
2
3
4
5
<input id="themeDemo" type="checkbox">

<input class="success" type="checkbox" checked="checked">
<input class="warning" type="checkbox">
<input class="danger" type="checkbox" checked="checked">

JavaScript:

1
2
3
4
5
6
7
$("#themeDemo").windowed({
  theme: "info"
})

$("input:checkbox:not(#themeDemo)").windowed({
  theme: true
});

Disabled

Enable · Disable · Toggle

Set disabled to true to make a disabled component. The component will also inherit the disabled state (if present) on the existing <input> or <select>.

You can also change the enabled/disabled state by calling windowed('disable'), windowed('enable'), windowed('toggleEnabled').

HTML:

1
2
3
4
5
6
7
8
9
10
<input id="demoDisable" type="checkbox">

<button class="btn enable">Enable</button>
<button class="btn disable">Disable</button>
<button class="btn toggle">Toggle enabled</button>

<select disabled="disabled">
  <option>Hello</option>
  <option>World</option>
</select>

JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("#demoDisable").windowed({
  disabled: true
});

$("select").windowed();

$(".btn.enable").click(function(){
  $("#demoDisable").windowed('setEnabled', true);
});

$(".btn.disable").click(function(){
  $("#demoDisable").windowed('setEnabled', false);
});

$(".btn.toggle").click(function(){
  $("#demoDisable").windowed('toggleEnabled');
});

Animation


Set animate to false to disable animation.

You can change the speed of animation (in milliseconds), using the animateDuration option.

HTML:

1
2
3
4
5
6
7
<input type="checkbox">

<select>
  <option>TAKE</option>
  <option>IT</option>
  <option>SLOW</option>
</select>

JavaScript:

1
2
3
4
5
6
7
$("input:checkbox").windowed({
  animate: false
});

$("select").windowed({
  animateDuration: 1000
});

Change state

On · Off · Toggle

1 · 2 · 3

You can change a checkbox's state using .windowed('setState', s) where s can be true (checked) or false (unchecked); or using .windowed('toggleState').

For dropdowns, use windowed('selectOption', n) where n is the (0-based) index of the option you want selected.

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input type="checkbox">

<button class="btn on">On</button>
<button class="btn off">Off</button>
<button class="btn toggle">Toggle</button>

<select>
  <option>ONE</option>
  <option>TWO</option>
  <option>THREE</option>
</select>

<button class="btn num">1</button>
<button class="btn num">2</button>
<button class="btn num">3</button>

JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$("input:checkbox, select").windowed();

$(".btn.on").click(function(){
  $("input:checkbox").windowed('setState', true);
});

$(".btn.off").click(function(){
  $("input:checkbox").windowed('setState', false);
});

$(".btn.toggle").click(function(){
  $("input:checkbox").windowed('toggleState');
});

$(".btn.num").click(function(){
  // We have to -1 because the index is 0 based
  // i.e. the first option's index is 0, 2nd is 1 etc.
  $("select").windowed('selectOption', $(this).text() - 1);
});

Tinted window

You can tint the window in CSS, using an RGBa background property - in browsers that support it.

CSS:

1
2
3
.windowed .slider {
  background: rgba(0, 0, 0, 0.1);
}

Custom themes

You can use CSS to style the windowed.js component. Some useful classes:

HTML:

1
2
3
4
5
6
7
<input type="checkbox">

<select>
  <option>BLACK</option>
  <option>IS</option>
  <option>BEAUTIFUL</option>
</select>

JavaScript:

1
$("input:checkbox, select").windowed({theme: "custom"});

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.windowed.custom {
  background-image: -moz-linear-gradient(center bottom, #000, #333)
}

.windowed.custom .slider {
  border-color: #6c3;
  box-shadow: 0 1px 1px 1px #363 inset, 0 0 0 2px #363;
}

.windowed.custom .checkstate, .windowed.custom .option {
  color: #ddd;
  text-shadow: 1px 1px #000;
}

.windowed.custom .selected {
  color: #bfa;
}

Options

Option Type Default
animate boolean true
Enables jQuery animation on the slider window.
animateDuration integer/string 400
Sets the duration of the animation (if enabled). As with jQuery's .animate() method, this can be a number, indicating the animation duration in milliseconds, or a predefined string (e.g. 'fast', 'slow').
disabled boolean false
Controls the disabled state of the component. Note: if the component is disabled, the original DOM element will be disabled too.
height integer undefined
Sets the height of the component. Note: it's recommended that you instead use CSS to set this, if possible.
on string "ON"
Sets the label for the checked state of a checkbox-based component.
off string "OFF"
Sets the label for the unchecked state of a checkbox-based component.
theme string/boolean undefined
Allows theming of the component. If a string, the string will be appended to the component's container <div>'s class attribute. If set to to true, the container <div> will inherit the classes from the original DOM element.
vertical boolean false
Enables vertical mode. Can only be applied if the component was created from a <select>.
width integer undefined
Sets the width of the component. See also: height.

Overriding defaults

You can change the global defaults by modifying the $.fn.windowed.defaults object.

Methods

windowed.js includes a few utility methods. The methods follow the jQuery UI pattern:

1
$('select').windowed('methodName', [optionalParameters]);

setEnabled

1
$('select').windowed('setEnabled', enabled)

Enables/disables the component. enabled is a boolean, where true enables the component, and false disables it. The method returns this boolean value.

toggleEnabled

1
$('select').windowed('toggleEnabled')

Toggles the component's enabled/disabled state. Returns a boolean value indicating the component's new state, where true == enabled.

setState

1
$('input:checkbox').windowed('setState', state)

Checks/unchecks a checkbox component. state is a boolean, where true checks the component, and false unchecks it. The method returns this boolean value.

toggleState

1
$('input:checkbox').windowed('toggleState')

Toggles a checkbox component's checked/unchecked state. Returns a boolean value indicating the component's new state, where true == checked.

selectOption

1
$('select').windowed('selectOption', optionIndex)

Selects an option on a <select>-based component. optionIndex is an integer, representing the 0-based index of the option to be selected. The selected .option is returned.

Todo and contributing

If you want to have a stab at any of the todo items above - or anything else - pull requests are gratefully received.

For any bug reports or feature ideas, head over to Github's issue tracker.