Customizing the form--jquery making a personalized checkbox

To make the elements in the form a personalized style, it is quite difficult to implement them only through styles, and it is clear to everyone that the browser of each kernel, and the style of parsing form elements under each system platform, are inconsistent. If you want the form element to have a unified style on various platforms or browsers, it is difficult to achieve a unified standard by just making CSS, but it is not a very difficult thing to achieve, and you can do it easily with jquery. So start today with a series that uses jquery to make form elements so you don't get a headache.

Today we'll take a look at the first example, which was brought to us by Martin Angelov "Better Check Boxes with JQuery and CSS." In this short tutorial, we'll learn how to beautify the checkboxin the form with jquery. Just write a plugin through jquery, you can change the default style of the browser according to your own needs, but when the user does not support JavaScript, the browser can be displayed in the default style. The specific effect is shown in the following demo:

HTML Markup

The first step is to create an HTML structure for the checkbox form. And the need to create another structure that replaces the default checkbox form.

<Formaction="./"Method="POST" ><Ul><Li><LabelFor="Ch_effects" >display effects:</Label><InputType="checkbox"Id="Ch_effects"Name="Ch_effects"data-on="Show Effects"data-off="Hide Effects"/></Li><Li><LabelFor="Ch_location" >enable Location Tracking:</Label><InputType="checkbox"Id="Ch_location"Name="Ch_location"Checked="Checked"/></Li><Li><LabelFor="Ch_showsearch" >include Me In Search results:</Label><InputType="checkbox"Id="Ch_showsearch"Name="Ch_showsearch"/></li><li> <label for= "Ch_email" > Email notifications:</label>< input type= "checkbox" id = "Ch_email" name= "Ch_emails" data-on= "on" data-off = " OFF "/></li></ul>< span class= "tag" ></FORM>          

We put the check box and the description text in the list, from the user's interaction point, we can click on the label to select/uncheck the corresponding check box. In HTML5 we can also use the "data" property to specify some labels. In this example, we used date-on and Date-off to set the label for the check/cancel.

The code above is the HTML for the default form, and we also need a new HTML structure, which is used primarily to replace the HTML tag of the default check box:

<class="Tzcheckbox checked" ><class="tzcbcontent" >on</span> <class="Tzcbpart" ></span></span>    

When our plugin comes in, he iterates through all the checkboxes, inserts the above code behind the check box, and hides the default check box at the same time. and use the . Checked class to control whether the check box is a checked/canceled state.

CSS Code

First, simply define the default form style.

FormUl{List-style:None}Formli {padding:  15px;} form li:nth-child (even) { background:  #ccc; }form label {display: Inline-block; color:  #333; font-size: 20px;}    

You can, of course, make better styling based on your own needs. In addition, we use a background image to modify the style that overrides the default check box, the green section above represents the check box selected, and the red section below indicates that the check box is unchecked, and its width follows the description text adaptive width. Shown is the specific description of the check box style:

We use a transparent PNG background image to modify the override of the default check box elements of the style, the upper half of the picture is used to beautify the selected state, and the following large red is used to beautify the cancellation state, and has an adaptive width, let's look at the specific code

JQuery.tzCheckbox.css

/*==========jquery.tzcheckbox.css==============*/. Tzcheckbox{BackgroundUrl' Images/bg-tzcheckbox.png ') no-repeat right bottom;DisplayInline-block;Min-width:60px;Height33px;White-space:NoWrapPositionRelativeCursorPointerMargin-left:14px;}. Tzcheckbox. checked{Background-position:Top left;Margin014px00;}. Tzcheckbox. tzcbcontent{ColorWhiteLine-height: 31px;Padding-right: 38px;Text-align:Right}. Tzcheckbox. checked. tzcbcontent{Text-align:LeftPadding00038px;}. Tzcbpart{BackgroundUrl' Images/bg-tzcheckbox.png ') no-repeat left bottom;Width14px;PositionAbsolutetop:0; left:-14px; height:33px; overflow: Hidden;} .tzcheckbox.checked .tzcbpart{< span class= "rule" >background-position:top right; left:auto; right:-14px;}     

JQuery Code

Next we use jquery to create a Tzcheckbox plugin. The check/Cancel function used to implement the checkbox.

(Function ($) {$.fn.tzcheckbox =function (options) {Define on/off label options = $.extend ({labels: [' On ',' OFF ']},options);ReturnThis.each (function () {var Originalcheckbox = $ (This), labels = [];Check the data-on and Data-off propertiesif (Originalcheckbox.data (' on ') {labels[0] = Originalcheckbox.data (' on '); labels[1] = Originalcheckbox.data (' Off ');}else {labels = options.labels;}Create a new checkbox for the HTML structurevar CheckBox = $ (' <span> ', {class:' Tzcheckbox ' + (This.checked?' Checked ':‘‘),Here ' Tzcheckbox ' need to add a space, or it will be linked with checked HTML:' <span class= ' tzcbcontent ' > ' + labels[ this.checked? 0: 1] +  ' </span><span class= ' Tzcbpart ' > </span> '}); //insert a custom checkbox and hide the default Checkboxcheckbox.insertafter (Originalcheckbox.hide ()); Checkbox.click (function () {Checkbox.toggleclass ( ' checked '); var isChecked = Checkbox.hasclass ( ' checked '); 0: 1]);}); //monitor changes the original checkbox and synchronizes the New CheckBox effect Originalcheckbox.bind (function () {Checkbox.click ();});}) (jQuery);                 

Above is the main part of today, without this plugin our custom checkbox will not work properly. You can put the above code alone in a file, you can also put in the page you need to use, I personally recommend the use of a single file, easy to manage, so for example, I named it jquery.tzCheckbox.js.

Before we use it formally, we need to move the jquery repository, along with the plugins created above, into your project.

<type=src="Http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" ></ script><type=src="js/jquery.tzcheckbox.js" <</script>  

And the use of plugins is also very easy, as long as you need to use the page, and you want to customize the checkbox on the use of the following section of the Jquey code:

<type="Text/javascript" >$ (document). Ready (function () {$ (' input[type=checkbox] '). Tzcheckbox ({labels:[' Enable ',' Disable ']}); </script>        

As long as you select the checkbox, the "Enable" and "Disable" will be passed to the "Tzcheckbox" plugin to replace the default text. You can also set the text content you want according to your own needs. This completes the custom beautification of our check box. As shown in the demo below.

Of course, you can change the style according to your own needs. If you are unsure about this method, you can directly click on Martin Angelov wrote "Better Check Boxes with JQuery and CSS", you can also click here to download the source of their own learning. Finally thank Martin Angelov for bringing us such a good tutorial Better Check Boxes with JQuery and CSS.

Customizing the form--jquery making a personalized checkbox