Better Check Boxes with jQuery and CSS

In this short tutorial, we will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable.

HTML

The first step is to lay down the structure of the underlying HTML document. We will need a form with checkboxes which we will later be replacing with their enhanced jQuery versions.

index.html

Better Check Boxes with jQuery and CSS | Tutorialzine Demo
  • Display effects:
  • Enable location tracking:
  • Include me in search results:
  • Email notifications:


The main container element – the #page div, holds our form. Inside it is an unordered list with a number of label elements which describe the checkboxes. Something that is good from a usability standpoint, is that clicking a label will check/uncheck the corresponding checkbox (specified by the for attribute).

Notice the HTML5 data attributes, specified on some of the labels. We are using these to attach custom data to every tag in an HTML5 document. In our case the attributes will determine the text labels of the on / off states of the checkbox replacements.

And here is the markup of our replacement checkboxes:

ON When our plugin is called, it will loop through the checkboxes, and insert the HTML code you can see above after each one, while at the same time hiding the original. The checked class determines the styling of the checkbox replacement (on or off state).

Checkbox Replacements Explained


Now lets move on to the styling.

CSS

We are using a single transparent PNG background image to style the checkbox replacements. The top part of the image is the checked (on) state and the bottom – the off state. The width of the checkbox replacement grows with the text labels.

jquery.tzCheckbox.css

.tzCheckBox{ background:url('background.png') no-repeat right bottom; display:inline-block; min-width:60px; height:33px; white-space:nowrap; position:relative; cursor:pointer; margin-left:14px; } .tzCheckBox.checked{ background-position:top left; margin:0 14px 0 0; } .tzCheckBox .tzCBContent{ color: white; line-height: 31px; padding-right: 38px; text-align: right; } .tzCheckBox.checked .tzCBContent{ text-align:left; padding:0 0 0 38px; } .tzCBPart{ background:url('background.png') no-repeat left bottom; width:14px; position:absolute; top:0; left:-14px; height:33px; overflow: hidden; } .tzCheckBox.checked .tzCBPart{ background-position:top right; left:auto; right:-14px; } The .tzCheckBox span is positioned as an inline-block, which keeps it on the same line as the surrounding text, while giving us the ability to style its margin and padding properties as a block element. It also has a relative positioning assigned, so we can use the sliding doors technique and show the .tzCBPart span with the remaining part of the background.

Depending on whether we are displaying the on or off state, the .tzCPContent span is either aligned to the left or the right, with the appropriate paddings so that it makes its .tzCheckBox container span grow.

Better Checkboxes - jQuery Plugin


Now it is time to build the actual jQuery plugin.

jQuery

We are going to name our plugin tzCHeckbox. It is going to take a JavaScript object, with a labels property as a parameter. This property is an array specifying the text labels displayed in the on / off state.

jquery.tzCheckbox.js

(function($){ $.fn.tzCheckbox = function(options){ // Default On / Off labels: options = $.extend({ labels : ['ON','OFF'] },options); return this.each(function(){ var originalCheckBox = $(this), labels = []; // Checking for the data-on / data-off HTML5 data attributes: if(originalCheckBox.data('on')){ labels[0] = originalCheckBox.data('on'); labels[1] = originalCheckBox.data('off'); } else labels = options.labels; // Creating the new checkbox markup: var checkBox = $('<span>',{ className : 'tzCheckBox '+(this.checked?'checked':''), html: ''+labels[this.checked?0:1]+ '' }); // Inserting the new checkbox, and hiding the original: checkBox.insertAfter(originalCheckBox.hide()); checkBox.click(function(){ checkBox.toggleClass('checked'); var isChecked = checkBox.hasClass('checked'); // Synchronizing the original checkbox: originalCheckBox.attr('checked',isChecked); checkBox.find('.tzCBContent').html(labels[isChecked?0:1]); }); // Listening for changes on the original and affecting the new one: originalCheckBox.bind('change',function(){ checkBox.click(); }); }); }; })(jQuery); All changes to the checkbox replacement are propagated back to the original checkbox (which is hidden, but still on the page). This also works the other way around, as in certain circumstances (when you click on a label element for example) the original checkbox might be changed. This will trigger the change event and update the replacement.

Keeping the original checkboxes on the page is important, as this way submitting the form (with or without AJAX) would also send the correct values the user has chosen.

Using the plugin is also pretty straightforward:

$('input[type=checkbox]').tzCheckbox({ labels: [ 'Enable', 'Disable' ] }); This selects all the checkboxes on the page and passes them to tzCheckbox with ‘Enable’ and ‘Disable’ as replacement text.

With this our checkbox replacement jQuery plugin is complete!

Conclusion

You can use today’s plugin to enhance the admin or configuration panels of your web apps, or even built better mobile sites with it. If, for some reason, JavaScript has been disabled on the user’s browser, they will still see the default checkboxes as a fallback.




Read more (locally) ...
Partner : Tutorialzine


LOGECT Publisher Network™ (beta) is a Service that allows others to publish their syndicated content by RSS Feeds.

موضوعات مشابه: