How to Enhance Forms Using jQuery UI
jQuery UI css classes are grouped and named on the basis of their functionality. This convection allows developers to create and integrate their classes more easily.
ui.helper classes are used for working with the basic visual properties like hiding elements, resetting an element’s property etc.
Let’s take a look at some of the classes -
- ui-helper-reset – This is a class that reset’s the properties of an element such padding, margins, style. It is similar to reset.css file but unlike the reset.css file which resets the whole html page, it targets a particular element.
- ui-helper-hidden – This class hides the element.
- ui-helper-hidden-accessible – This class also hides the elements by positioning them outside the viewport of the page.
widget classes are the core classes used for theming of jQuery UI widgets or custom made widgets.
- ui-widget – This class applies proper visual settings to all its sub nodes such as font-size, font family etc.
- ui-widget-header – It is used to display the headings.
- ui-widget-content – This class is for the contents of the widgets.
State classes are used for representing the elements on different events and actions.
- ui-state-default – This class changes the visual to present the element when no action has been performed on it.
- ui-state-active – This class is used when element is in active state.
- ui-state-hover – Class for changing elements visual when mouse hovers.
- ui-state-disabled – This class represents element is it’s inactive state.
jQuery UI provides an icon framework that provides almost all icons needed. To use icon first you must add the ui-icon class and then the class for the icon you want to use.
Theming Form Elements
Now let’s start off by creating a js file, we will name it ui.form.js . We will mould our js code into a jQuery UI plugin.
We will start off by creating a basic skeleton for a jQuery UI plugin.
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.
42 Responses »
- Tweets that mention Enhancing Forms using jQuery UI | TutToaster -- Topsy.com
- Enhancing Forms using jQuery UI | Design Newz
- How to Enhance Forms using jQuery UI | Design Shack
- Linktipps der Woche 14-2010
- This Weeks Twitter Design News Roundup N.32 - Speckyboy Design Magazine
- 50 Useful jQuery Plugins to Enhance your Forms - Noupe Design Blog
- 50 Useful jQuery Plugins to Enhance your Forms | Woupe Design Blog
- 15 Simple & Effective jQuery Plugins that Enhance Your Forms | Bitmag
- 15 jQuery Plugins for Simple & Effective Forms User Interface | Blog for designers web developers bloggers freelancers SEO
Leave a Response
We do love friendly, well-constructed and respective comments. We do not love bitchy, stupid and disrespectful comments. Find something wrong in this post?, feel free to send us a note and we will fix the issue asap.