jQuery plugin : jqTransform

Author : DFC Engineering
License : GPL
Release version : 1.1
Released on : 2009 August
Release note:
- add click event on checkbox and radio
- Auto resize the select field if necessary

Context

This plugin is a jQuery styling plugin wich allows you to skin form elements.


 

Here is a default form. Your browser, depending on your OS, skins the form as it wants.

oui oui

 



Then here is the same Form skinned with your own options whatever the browser you use.

Pay attention to details, see how the inputs change their color both on mouse rollover and mouse click event.

 

 

Usage

1- Add javascript inclusion in the header section of your web page

//required
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>

2- Write your form

<form class="jqtransform">
<div class="rowElem">
<label for="name">Name: </label>
<input type="text" name="name"              />
</div>
<div class="rowElem"><input type="submit" value="send"              /><div>
</form>

3- Finally use the plugin

After it, select the forms and call the jqTransform plugin. See some examples:


<script type="text/javascript">
$(function() {
    //find all form with class jqtransform and apply the plugin
    $("form.jqtransform").jqTransform();
});
</script>

Additional information

Options available

Just edit the css file to customize your form, that's it.

Compatibility

We did our best to make it work on ie 6+, safari 2+, firefox 2+



To unpack it on window, please use 7-zip or other but do not use windows embeded unpacker.

 
Copyright © 2007 DFC Engineering. Conditions Générales | Mentions Légales | Nous contacter | Plan de site