William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

jQuery: jqtransform

Swith theme: using simple jqtransform

Jqtransform is a jQuery styling plugin which allows you to skin form elements:
http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

It is very easy to use, and with good effect. It by default changes all the elements type and outlook such as submit, reset, input buttons, and removes all the events on these elements.

However, I don’t want to replace some <input> buttons, such as close button, coz there is default event on it. e.g. a close button has a ‘click’ event:

<input type="button" value="close" onClick="$('#div_search_2', window.parent.document).hide(); $('#div_search_1', window.parent.document).show();" />

If using jqtransform, it will replace the ‘close‘ button like this:

<button id="" name="" type="button" class="jqTransformButton"><span><span>Close</span></span></button>

It is not exactly I want, because it deletes its original ‘click’ event.
To make ‘close‘ button work properly, I have to modify the source codes of jqtransform.js. By doing slight changes, it works:

1. orginal:
$('input:submit, input:reset, input[type="button"]', this).jqTransInputButton();  
2. change to:
$('input:submit, input:reset', this).jqTransInputButton();

This will igore all the input with type=”button” inside this form.

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

%d bloggers like this: