How to Enhance Forms Using jQuery UI

Step 9 Themeing Check boxes

Theming checkboxes is a bit tricky, in this we need to create a proxy element whose click event will trigger the checkbox. First of all create the checkboxes function which accepts the checkbox element and follow the steps –

Insert a span next to the input. This will be the base for our UI.

Hide the checkbox using ui-helper-hidden class.

Since jQuery UI framework uses background images to scale them properly we will give dimensions by setting the parent’s css properties.

We will add hover class to the element so that it becomes responsive on the hover state.

Finally when main span is clicked we will toggle check icon of the inner span and state of the outer span. Lastly we will trigger the checkbox.

Like this:

Related

This entry was posted
on Monday, April 5th, 2010 at 19:05 and is filed under Tutorials.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback
from your own site.

Hi, I am Abhin from beautiful city of lakes Udaipur, India. When it comes to work, I have an obsessive compulsive disorder to do everything I find and most of the time, I end up doing nothing ;). UI/UE fascinates me.

It certainly makes pretty forms but I notice that your example is lacking any label elements. Labels are used to link the captions to the fields, much like those on your comment form. I much prefer clicking on a checkbox’s label to the checkbox itself. So my question is… does the jQuery UI still work correctly with labels in place? For example, is it able to check the checkboxes by clicking on the label?

@PhillS Hi, our main aim is create a jQuery UI plugin, Its really upto the user to use labels or not… a plugin has to provide maximum flexibility… If you want to add labels if can be done by binding label with the proxy element 🙂

@Mike yes… CSS3 rounded corners is not supported in IE, but you can overcome them using DD_roundies, @Diti u can use a simple php validation at server… the main aim of this article was to make forms pretty. But nice point 🙂

nice tutorial.
Are you sure with the use of the ui-state classes?
The UI Framework doc says that it should be applied on:
“Class to be applied to clickable button-like elements”

input fields and textareas primary are not clickable button-like elements?
In the end, you use ui-classes, but the implementation will not be constistant with other widgets, because the classes are not designed for input, and textarea elements?

For input and textarea you should use ui-widget-content-
For buttons you should use the ui. .button() method.

@rooki to answer your questions –
1) u can change the ui change of textarea, if u dont like its appearance. jQuery UI means you can create your own theme to the granular level (Themeroller).
2) Yes, I knw they stated that it should be applied on button like elements, but they had given a brief description of where to use these classes not compulsory rule to adhere to them. Even filament group uses jQueryUI state classes in different ways, The autocomplete widget uses state classes and its not a button.

So i have uploaded a complete version here of the modified file.
The modified lines are highlighted.
Now the select box works even if there is more than one instance on the page (no longer use a unique id) and the click event on a item close it.

hi you guys, I was just checkin’ out this site and I really love the foundation of the article, and have nothing to do, so if anyone would like to to have an enjoyable convo about it, please contact me on skype, my name is kevin kowalsky

Nice, Thanks.
since jquery 1.4 the line $(element).val($(this).html()); is invalid – select by text does not work anymore.
I have fixed it like that:
var selectedText=$(this).html();
$(element).find(“option”).each(function(){
if (selectedText==$(this).text())
{
$(this).attr(“selected”, true);
}
else {
$(this).attr(“selected”, false);
}
});

You shouldn’t do all that within the _init: it should be in the _create:.
_init fires every time you do $(‘form’).form();
However _create only fires the first time that you do $(‘form’).form();

Also you are running your selectors too much cache your variables or at least chain them.
For example you have this in the code
$.each(inputs,function(){
$(this).addClass(‘ui-state-default ui-corner-all’);
$(this).wrap(“”);

Then further down in this same loop you can just refer to $this instead of haveing to call $(this) over and over. With all the instance that you do this it could start to add upto quite an over head on a large form if you fixed everywhere that you are doing this type of thing.