jQuery UI/Mobile plugin providing a slider-based button ("slide to activate")
The sliderbutton plugin provides a button which is triggered by sliding a handle to the side. This is a simple technique to avoid accidentally pressing a button.
The plugin is based on the jQuery UI/Mobile slider widget. Since this widget differs in its implementation in jQuery UI and jQuery mobile, the plugin comes in two versions: one for jQuery UI and one for jQuery Mobile. The plugin tries to hide the differences between the versions, which means that the API applies to both versions (exceptions are marked accordingly) but the generated markup and CSS differs.
The sliderbutton is created from a div element. When the sliderbutton is activated, the activate
event is triggered. So to execute the desired action, bind a function to the activate event.
// Initialize the sliderbutton
$('#SliderDiv').sliderbutton({
text: "slide to submit", // Set slider lane text
activate: function() { alert('Submitted!'); } // Bind to the activate event during initialization
});
// Bind to the activate event after initialization
$('#SliderDiv').bind('sliderbuttonactivate', function() { alert('Activate!'); });
// Turn sliderbutton around
$('#SliderDiv').sliderbutton('option', 'direction', 'right');
The demos folder in the download contains a demonstration of most of the features of both versions of the sliderbutton plugin.
There are also demos on jsFiddle and JS Bin where you can play around with the plugin:The documentation of all the options, methods and events can be found in the README on GitHub.
The plugin requires
The UI version of the plugin has been successfully tested with jQuery 1.7.2 and jQuery UI 1.8.20 and it should be compatible with future versions as long as the implementation of the jQuery UI slider does not change.
The mobile version has been successfully tested with jQuery 1.7.2 and jQuery Mobile 1.1.0 and it should be compatible with future versions as long as the implementation of the jQuery mobile slider does not change.
Copyright © 2012 Jochen Ulrich
http://github.com/j-ulrich/jquery-sliderbutton
Licensed under the MIT license.
Note that Apple Inc. holds the U.S. Patent 8,286,103 which covers unlocking a touch-sensitive device via predefined gestures. In other words: don't use the sliderbutton to unlock devices unless you own a license from Apple.