This time I will share jQuery Plugin and tutorial about jQuery Plugin For Form Elements Replacement – controlReplace, hope it will help you in programming stack.
controlReplace is a simple jQuery plugin that makes the form elements (checkboxes, radio buttons, and selects) fully customizable via CSS.
More examples:
How to use it:
1. Load the jQuery javascript library from a CDN.
1 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> |
2. Load the jQuery controlReplace plugin after jQuery library.
1 |
<link rel="stylesheet" href="css/control.replace.css"> |
2 |
<script src="jquery.control.replace.js"></script> |
3. Put your form elements in an extra DIV element with CSS class of ‘control’. All the form elements needs at least an ‘id’ to be replaced.
02 |
<input id="demo1" name="group_input1" type="checkbox" class="demo" value="ex1"> |
03 |
<label for="demo1">Element Label 1</label> |
06 |
<input id="demo2" name="group_input2" type="checkbox" class="demo" value="ex2"> |
07 |
<label for="demo2">Element Label 2</label> |
10 |
<input id="demo3" name="group_input3" type="checkbox" class="demo" value="ex2"> |
11 |
<label for="demo3">Element Label 3</label> |
4. Initialize the plugin and you’re done.
1 |
jQuery(document).ready(function(){ |
2 |
jQuery("input.demo").controlReplace(); |
5. Options and defaults.
02 |
additionalClass: null, |
Change log:
v0.3.2 (2016-04-08)
v0.1.3 (2014-08-19)
v0.1.2 (2014-07-09)
This awesome jQuery plugin is developed by eisbehr-. For more Advanced Usages, please check the demo page or visit the official website.
