jqTransform jQuery Plugin

This plugin allows you to create custom form elements. You can customize all types of form inputs, textarea, buttons with only one plugin.

How to use

Download the sources from here.

1. Add the javascript files and the stylesheet to the head of your page

<link href="/css/jqtransform.css" rel="stylesheet"/>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript src="/js/jquery.jqtransform.min.js"></script>

*You can customize the CSS file with you own images and styles.

2. The HTML markup

<form class="jqtransform">
  <input type="checkbox" name="checkbox" />
  <input type="radio" name="radio-btn" value="1" checked="checked"/>
  <input type="radio" name="radio-btn" value="2" />
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  <select>
</form>
You can use the ‘jqtransform’ class on the entire form, like in the example above, or you can use it only for some formfields in the form, like below.
<form>
  <div class="form-row jqtransform">
    <input type="checkbox" /> <!-- this checkbox will be styled -->
  </div>
  <input type="checkbox" /> <!-- this checkbox will not be styled -->
</form>
3.  Use the plugin. Include the following script to start using the plugin
<script type=type="text/javascript">
 $(function() {
   $(".jqtransform").jqTransform();
   //finds all elements with class 'jqtransform' and apply your style, even if you use it on all the form or only in a section of the form
 });
 </script>

Visit the plugin page for more information.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s