Overview

Turn checkboxes and radio buttons into toggle switches. This library is created by Mattia Larentis and maintained by the core team, with the help of the community.

Usage

<!-- Load jQuery -->
<script src="../../../../global_assets/js/main/jquery.min.js"></script>

<!-- Load Bootstrap -->
<script src="../../../../global_assets/js/main/bootstrap.min.js"></script>

<!-- Load plugin -->
<script src="../../../../global_assets/js/plugins/forms/styling/switch.min.js"></script>

<!-- Create element -->
<input type="checkbox" name="my-checkbox" checked="checked">

// Initialize plugin
$(function() {
	$("[name='my-checkbox']").bootstrapSwitch({
		// options
	});
});

Plugin options

The Options API allows you to customize the dropdown list by setting custom options and getting all current options.

function(event, state) {}

function(event, state) {}

Plugin methods

// Methods
$('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);

Available methods:

Plugin events

// Events
$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
	console.log(this); // DOM element
	console.log(event); // jQuery event
	console.log(state); // true | false
});

Available events:

Overview

Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly. Supported by all modern browsers: Chrome, Firefox, Opera, Safari, IE8+.

Usage

<!-- Load plugin -->
<script src="../../../../global_assets/js/plugins/forms/styling/switchery.min.js"></script>

<!-- Create element -->
<input type="checkbox" name="my-checkbox" checked="checked" class="switcher">

// Initialize plugin
var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);

Plugin options

Plugin API

Overview

Sexy form elements with jQuery. Now with HTML5 attributes! Works well with jQuery 1.6+, but we've received patches and heard that this works with jQuery 1.3.

Usage

Installation of Uniform is quite simple. First, make sure you have jQuery installed. Then you’ll want to link to the jquery.uniform.js file in the head area of your page.

<!-- Load jQuery -->
<script src="../../../../global_assets/js/main/jquery.min.js"></script>

<!-- Load plugin -->
<script src="../../../../global_assets/js/plugins/forms/styling/uniform.min.js"></script>

<!-- Create element -->
<input type="checkbox" name="my-checkbox" checked="checked" class="styled">

// Initialize plugin
$("select").uniform({
	// options
});

Plugin options

Plugin API

Tips and tricks

Uniform is supposed to be pretty simple, but there are a few things that can be tricky. Here are some tips that may make your experience simpler:

• Remember to change the CSS classes in the theme if you change the parameters for elements’ classes. This can be tedious work, but if you don’t do it, it’s not going to look correct. Find and Replace is your friend.
• Uniform cannot automatically sniff out dynamic value changes. If you make changes to elements in JavaScript or using a reset button of some kind, remember to call $.uniform.update(); to sync the changes with Uniform. See Issue #270 for the little bit of code you will need.
• Likewise, when you add elements to the DOM, perhaps via AJAX, and they need to get styled, you will need to use $('#newElement').uniform() on it so the styling is applied.
• There is a bug in Safari 5.1 that will cause the web rendering process to crash when you use custom fonts. For more information, see Issue #183.
• With IE9, you may have problems with some fonts on your site. See Issue #226 if you mysteriously see a blank page or blank form elements. The fonts in Uniform have been arranged to work around this, but custom themes may not work properly.
• If you are having problems with automatically sized select elements in Firefox, double check and ensure your CSS files are listed before jQuery, Uniform and your code that uniforms the form elements. Also check the selectAutoWidth property's documentation.