Backbone ToggleSwitch is the simple MVC widget you've been looking for...
You just need a toggle widget right? Sure, it wouldn't take too teribly long to implement this your self, but with Backbone ToggleWidget you can save your valuable time and in seconds have a beautiful Backbone based View and Model to support your sweet new web app!
To get ToggleSwitch up and running, make sure you have the requrements installed and attached to your document.
Include backbone.toggleswitch.css at the top of your document and backbone.toggleswitch.js below the dependencies.
- Backbone.js
- Underscore.js
- jQuery
var widget = new ToggleSwitch();
widget.$el.appendTo('#example-1');
Theme
var widget = new ToggleSwitch({theme: 'theme-yellow'});
Options:
- theme-red
- theme-green
- theme-blue
- theme-yellow
Animation
var widget = new ToggleSwitch({animated: true});
Specify a Model
var MyModel, widget;
MyModel = Backbone.Model.extend({
defaults: {
value: false
},
mySpecialFunction() {
alert("I'm better than the built in model!");
}
});
widget = new ToggleSwitch({model: new MyModel()});
Extend the Built-In Model
To extend the built in model, attach attributes to the first argument object.
var widget = new ToggleSwitch({
attributes: {
url: '/mydata.json',
parse: function(response) {
response.value = response.data.value;
return response;
}
}
});
Set Model Defaults
You can set the defaults for the switch model (value and enable).
var widget = new ToggleSwitch({
defaults: {
value: false,
enable: false
}
});
Accessibility
Backbone ToggleSwitch strives to be fully accessible. You can add labels to toggle switches which will be used by screen readers to help identify the purpose of a toggle switch.
var widget = new ToggleSwitch({
defaults: {
label: "make lunch"
}
});
Toggle
To change the value of the switch programatically, use the toggle method.
<button class='btn'>Toggle</button>
$('.btn').click(function() {
widget.toggle()
});
Get Value
You can of course get the current value of the switch by accessing the value attribute of the switch model ( true | false ).
$('.btn').click(function() {
var value = widget.model.get('value');
alert(value);
});
Detect Change
If you need to subscribe to 'change' events for the switch, add an event listener to the widget model.
widget.model.on('change', function() {
alert("changed to: " + this.get('value'));
});
Global Configuration
You can set global configuration options such as theme to using ToggleSwitch.config. Each of these options can be set individually as seen up above with the theme and animations.
ToggleSwitch.configure({
theme: 'theme-green', // Theme name. Defaults to theme-green.
animated: false, // Uses CSS3 animations on toggle. Defaults to false.
onValue: 'On', // Text for on value. Defaults to on.
offValue: 'Off' // Text for off value. Defaults to off.
});
Fun fact whenever you call the configure method, all switches will update automagically!
Enable/Disable
To disable or enable the switch, use the enable method, passing in either true or false. You can also use the disable method to disable a switch.
widget.enable(false);
For full documentation visit http://zacharybabtkis.com/demos/backbone-toggleswitch.