ScrewDefaultButtons

VERSION 2

ScrewDefaultButtons is a simple jQuery plugin allowing you to replace the browser defaults for radio buttons and checkboxes with your own custom design.

DOWNLOAD
Version 2.0.5
  • Only 3kb when minified
  • Use the markup you know

Try it out:


Easy as 1-2-3

1. After downloading, link to the ScrewDefaultButtons plugin. You may do this by placing the following lines in your HTML:

<script src="js/jquery.screwdefaultbuttonsV2.min.js" ></script>

2. Apply the .screwDefaultButtons() method to your radio buttons and/or checkboxes (Note: Use separate calls). Here is where you will define your replacement image with the button's height and width. Below is an example:

$('input:radio').screwDefaultButtons({ 
	image: "url(images/radio.jpg)",
	width:	 85,
	height:	 85
});

3. To add things like margin and positioning, you may use the classes .styledRadio and .styledCheckbox in your own css. The following is an example of how it may look:

.styledRadio {
    /* Your styles here */
}

.styledCheckbox {
    /* Your styles here */
}

New Features

I've received a lot of great feedback about ScrewDefaultButtons. This is what lead me to rewriting the plugin so that I could implement these suggestions. I now bring you Version 2!

Sprites

You asked for it, so here it is. Please use the following layout and you'll be good to go:

Sprites layed out vertically in order: Unchecked, Checked, Disabled-Unchecked, Disabled-Checked

Helpful Commands

ScrewDefaultButtons now comes with it's own commands. These are handy when you would like to change the state of a button with Javascript:

"check"

Checks a single or multiple radio buttons or checkboxes

$('.myBtn').screwDefaultButtons("check");

"uncheck"

Unchecks a single or multiple radio buttons or checkboxes

$('.myBtn').screwDefaultButtons("uncheck");

"toggle"

Toggles between checking and unchecking those buttons

$('.myBtn').screwDefaultButtons("toggle");

"disable"

Disables a button

$('.myBtn').screwDefaultButtons("disable");

"enable"

Enables a button

$('.myBtn').screwDefaultButtons("enable");

Data Attributes

A common request was to use different images for different buttons. While it now works with multiple calls, it's even easier using the "sdb-image" data attribute:

<input type="radio" data-sdb-image="url('images/myImage.jpg')" />

Not all has changed

ScrewDefaultButtons still has some of your favorite features:

Compatible with <label>'s

No special markup needed, just make sure you are using the 'for' attribute correctly.

Inherits 'class' and 'onclick'

This is great for styling as well as ensuring that any that any events you may have created are still triggered.

Preselected Buttons

The 'checked' attribute indicates that a input should be preselected when the page loads. ScrewDefaultButtons will recognize this and make sure your custom radio buttons and checkboxes are also preselected.


Looking for Version 1?

If you are still looking to use the original ScrewDefaultButtons, I've moved the site here: Version 1

Questions? Leave a comment...

comments powered by Disqus

... or buy me a coffee

If you feel ScrewDefaultButtons saved you some time, or just want to say thanks in the nicest way possible. Cheers!