jQuery-custom-form-v2

Free plugin (cross browser) – jQuery-custom-form-v2.

Plugin that allows you to play with input type(checkbox and radio) design, with disabled action and custom SELECT. The new structure model is in Example 2. You can target any input[type=”checkbox”] for example, or class from your project > example below(Example 1).

After the input tag, from your html, there will be generated a span tag(class “cus_che” for checkbox and class “cus_rad” for radio buttons), that can be customized, very easy. When the user clicks the element, the generated span element and his parent element, will have a custom class. For each default(checkbox and radio) input to hide it, you just have to add this class “cus_box_hidden” to his parent, prepared from the css file. The demo css file, is targeting elements just by class, so you will restyle elements very easy with your global css file.

Some elements from inside the holder(holder like div,li,td, or any kind of html element), example of elements from inside: label, span and the default input type(checkbox and radio) will work on click event. Maybe you can find this useful for you. Works even on IE7,8.

Here is a demo using an older version of jQuery: jQuery 1.6.4, and codes: HTML, CSS, JavaScript.

Demo here

Screenshots (default demo design):

How to instal it?

Whell, prepare your html,php or asp file, where:
1. – between your <head> tag, put the css file and the jquery library like “jquery-1.9.0-min.js”, after this, create another one for “jquery-custom-form-v2.js” (Example 1).

Example 1:

 <link rel="stylesheet" type="text/css" href="your-path/jquery-custom-form-v2.css" />
 <script type="text/javascript" src="your-path/jquery-1.9.0-min.js"></script>
 <script type="text/javascript" src="your-path/jquery-custom-form-v2.js"></script>
 <script type="text/javascript">
      jQuery(document).ready(function(){

          jQuery(".cus_checkbox").cuscheckbox(); // for checkbox elements
          jQuery(".cus_radio").cusradio();  // for radio elements
          jQuery(".cus_select").cusselect(); // for selected elements

      }); 
 </script>

2. – checkboxes: you just have to add for this type of input(checkbox), this class “cus_checkbox” (Example 2), or target your class like this: $(“.cus_checkbox”).cuscheckbox();  This class will automatic generate custom classes for parents. If you want to have one input active , just add “cus_active” class to his parent (Example 2b).

If you want to have one input type checkbox checked and disabled, just add this class “cheked_disabled” (Example 2c) and for unchecked and disabled this class “uncheked_disabled”

Example 2:

<element>
     <input class="cus_checkbox" type="checkbox" name="a" />
     <label>text label here</label>
 </element>
 <element>
     <input class="cus_checkbox" type="checkbox" name="a" />
     <label>text label here</label>
 </element>
 <element>
     <input class="cus_checkbox" type="checkbox" name="a" />
     <label>text label here</label>
  </element>

Example 2b:

 <element class="cus_active">
     <input class="cus_checkbox" type="checkbox" name="a" />
 </element>
 <element>
     <input class="cus_checkbox" type="checkbox" name="a" />
 </element>
 <element>
     <input class="cus_checkbox" type="checkbox" name="a" />
 </element>

Example 2c:

 <element>
     <input class="cheked_disabled cus_checkbox" type="checkbox" name="a" />
 </element>
 <element>
     <input class="cus_checkbox" type="checkbox" name="a" />
 </element>
 <element>
     <input class="cus_checkbox" type="checkbox" name="a" />
 </element>

3. – radio buttons: you just have to add for this type of input(radio), this class “cus_radio” (Example 3). or target your class like this: $(“.cus_radio”).cusradio();  This class will automatic generate custom classes for parents. If you want to have one input active , just add “cus_active” class to his parent (Example 3b).

If you want to have one input type radio checked and disabled, just add this class “cheked_radio_disabled” (Example 3c) and for unchecked and disabled this class “uncheked_radio_disabled”

IMPORTANT: for this type of input(radio), do not forget to put,  grouped name for the attribute “name” in html!!

– All these classes will control all the grouped checkboxes and radio buttons and make them to work ok.

Example 3:

   <element>
      <input class="cus_radio" type="radio" name="group_name" />
   </element>
   <element>
      <input class="cus_radio" type="radio" name="group_name" />
   </element>
   <element>
     <input class="cus_radio" type="radio" name="group_name" />
   </element>

Example 3b:

 <element class="cus_active">
     <input class="cus_radio" type="radio" name="group_name2" />
 </element>
 <element>
     <input class="cus_radio" type="radio" name="group_name2" />
 </element>
 <element>
     <input class="cus_radio" type="radio" name="group_name2" />
 </element>

Example 3c:

 <element>
     <input class="cheked_radio_disabled cus_radio" type="radio" name="group_name3" />
 </element>
 <element>
     <input class="cus_radio" type="radio" name="group_name3" />
 </element>
 <element>
     <input class="cus_radio" type="radio" name="group_name3" />
 </element>

4. – select: you just have to add for this type of form element, this class “cus_select” (Example 4), or target your class like this: $(“.cus_select”).cusselect();  This will generate a span with class “value_select” that can be styled.

Example 4:

<div>
   <select class="cus_select">
     <option value="test 1">test 1</option>
     <option value="test 2">test 2</option>
     <option value="test 3">test 3</option>
     <option value="test 4">test 4</option>
   </select>
 </div>

– remember: for each input(checkbox and radio) to hide it, you just have to add this class “cus_box_hidden”, to his parent, prepared from the css file. 😉

If you find bugs, please contact me here, and maybe i can fix it! 😀

Download plugin!


Share This:

13 thoughts on “jQuery-custom-form-v2

  1. My friend Nicholas and I like to find and try a lot of new stuff like this and we are happy to have come across this. Lots of fun :)

  2. I used this plugin for many projects and it works very well.Really easy to use and very helpfull. I recommend it .Nice job

  3. I’ve been using this plugin for some time, and it’s working exactly as it should! The developer’s support is AWESOME! I’ve contacted him several times and he never disappointed!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>