JQTransform - Exclude an element from styling?

I'm using JQTransform to style all form elements. Is it possible to disable the styling on a specific element, leaving all the others styled by JQTransform?

I've added if( $input.hasClass('ignore') == true ) { return; } to line 99 of the plugin to ignore any text fields with class=ignore. Maybe this will help you.

Felipe

Use the class jqtransformdone. It is built in-to the plugin.

I'm confirming that mattbee's solution has worked for me in leiu of a response from the member posting the question. As instructed, I pasted the code on line 99, above the following line:

if($input.hasClass('jqtranformdone') || !$input.is('input')) {return;}

To anyone that it isn't obvious to, paste the code ABOVE line 99 rather than REPLACING line 99 as follows:

/*Custom code: Regarding class for elements exceptional to transformation.*/  
/*Custom code: http://stackoverflow.com/questions/3727517/jqtransform-exclude-an-element-from-styling*/
if( $input.hasClass('ignore') == true ) { return; } 
if($input.hasClass('jqtranformdone') || !$input.is('input')) {return;}

I didn't see an option to comment on mattbee's answer so I've submitted it in the form of an an answer.

EDIT: The above code will prompt jqTransform to skip/exclude/ignore/avoid input elements. In my case I used it to exclude type="text" and type="image". However, applying the .ignore class to my textarea element indeed excluded the undesired transformation but for some reason additionally excluded the transformation of my select elements. Please note that the edit to jquery.jqtransfrom.js for the text area was made within the textarea function starting at line 201 of the original unedited document rather than the function for the text fields starting at line 95 in the above code block.

Here's an example of what I attempted (placed ABOVE line 207):

if( $textarea.hasClass('ignore') == true ) { return; }

To reiterate, it worked but also excluded the transformation of my select boxes which wasn't my intention.

After searching for solutions I came across the following blog post: http://www.deliciouscoding.com/post.cfm?entry=use-jqtransform-and-tinymce-together

Essentially, the table that jqTransform creates to replace textarea elements is replaced by a textarea or more simply put, it undoes the transformation:

<!--Undo textarea transformation.-->
<!--Source: http://www.deliciouscoding.com/post.cfm?entry=use-jqtransform-and-tinymce-together.-->
<script language="javascript">
jQuery(function(){
jQuery("form.transform table").replaceWith('<textarea></textarea>');
});
</script>

For those new to jQuery, the above code is to be placed in with the head of your document (i.e. between <head> and </head>).

there is new library I've created - csTransPie - basing it on jqtransform - jqtransform is a great library but it really has many problems, today css3 solves many of those problems and I like the idea of controls being normal controls and looking the same in every browser

https://github.com/pkoretic/csTransPie

It's a work in progress but even now it's better than jqtransform (more than half of the code rewritten, many bugs solved, clean css...), you must admit it...

Just use .transpie class on element you want!

Or you can simply add jqtranformdone class to your input :)

Here my version (Version 1.1 06.08.09) to skip inputs: edit this in jquery.jqtransform.js in line 497

  $('input:submit:not(.hidden), input:reset:not(.hidden), input[type="button"]:not(.hidden)', this).jqTransInputButton();
  $('input:text:not(.hidden), input:password:not(.hidden), input[type="email"]:not(.hidden)', this).jqTransInputText();
  $('input:checkbox:not(.hidden)', this).jqTransCheckBox();
  $('input:radio:not(.hidden)', this).jqTransRadio();
  $('textarea:not(.hidden)', this).jqTransTextarea();
  $('select:not(.hidden)', this).jqTransSelect()

You can simply add "jqtransformdone" class to element, you want to skip styling. Hope, it will help someone else.

I know this is a very old topic, but I have to say it's more suitable if you add extra class to your normal form, and it won't be transformed. For input texts and textarea add the 'jqtranformdone' class and it will be return without transform. For checkboxes, radio buttons and selects use the 'jqTransformHidden' class.

来源：https://stackoverflow.com/questions/3727517/jqtransform-exclude-an-element-from-styling

标签

jquery

jqtransform