Designers by nature love to change things. If they aren’t dropping caps to suit a design, they are trying to push the boundaries of what the browser can do. I’ve recently been involved in a project that has needed some different looks for standard user interface elements such as forms. While I wouldn’t normally condone such activity (from a usability point of view, its a bad idea to change standard UI elements) sometimes graphic designers need “appeased.” (read “shut up”). If you are looking how to go about changing your standard forms and interface to be a bit different you’ve come to the right place.
JNice takes us to a fancy form, with fancy dropdowns. This is where the majority of the Jquery legwork has been done, with styles dynamically attached for the other form elements.
Load Content While Scrolling
Interface Elements for JQuery
Demo Page: http://interface.eyecon.ro/demos/?page=demos
Interface Elements is to jQuery, as Script.aculo.us is to Prototype. Using this set of UI elements can bring you no end of rich interface joy. Implements Draggables, Lightbox amongst others.
SuckerFish Dropdowns with JQuery
Everyone knows what a suckerFish dropdown is? No? Head over to Alistapart and do some background reading. When you are done, come back here and see what its like when you replicate the same thing with JQuery. Its pretty darn lovely.
JQuery Validation on steriods.
Ok, so its not exactly a part of the user interface, but you are going to need some way to tell when your input data is wrong. And hey – it has a built in AJAX captcha. So no more nasty bots ruining your forms.
Sometimes, you are going to want to scroll either the page, or elements within your page. So this is where JQuery’s scrollTo plugin comes in. See I told you you’d like JQuery.
Need an area of your site to scroll independant of the main scrollbars? No problem, JScrollpane is the perfect solution, just add a small snip of Jscript and add your images. It also allows external links (outside the pane) to control the scrolling. i.e. if you need to implement Anchored positions within your content pane.
I do have a list of other accordion solutions further down the article, but this one is my favourite so far. It rocks the boat.
Coda Popup Bubbles.
I really like this effect, and it truely shows off the beauty of JQuery. Best of all, unlike something like Lightbox, it’s not over used. For popups that go “puff”.
Forms have long been a pain in the rear for web developers, both from a positioning point of view, and from a styling point of view. Do we position with tables, definition lists, labels or plain old Div’s? Anyway the positioning is for another day, how do we go about changing the styles of some form elements?
Some Overall alternative form samples
If behaviourially you need your checkboxes to change, and yet you want to maintain their functionality, then this link is for you, allowing you to select say only two checkboxes in a group etc.
An alternative to the
select element with enabled
An alternative to a select element, this would make an easy “jump-to” menu, or could be easily ammended to create actual selected item functionality.
Rounded Input Boxes
If you like your OSX style boxes, then this is the badboy for you.
Describes a simple rounded corner technique for input boxes.
Again based closely on the Mac OS input style.
Note: I also found that (<input type=”search“ name=”blah“ value=”Search“/>) is another MacOs safari only rounded corner solution. Great if you only want the Mac fanboys to see it.
Ajax Autocomplete Boxes
Input Autocomplete Boxes
As seen on Google suggest etc.
This guy lives, breathes and sleeps JQuery. His name is Jörn Zaefferer and he is the man. We the development community bow to you.
Not one of these.
Cross browser accordion, created with scriptaculous.
Or if you prefer something more lightweight – a moo.fx equivalent.
If you like Apple’s site, then you are going to love these drawers. This is a JQuery Accordion that replicates the menu.