JQuery code snippets that make a beautiful interface

Question

We're creating a web app which is going to designed to be fully 2.0 (AJAX-ed and what not).

As a rich-client and server-side developer, I know Javascript only at a functional level, but I'm beginning to learn JQuery based on recommendations and seeing how simply much of it.

I've found things like SlideDown in its' API which will slide an element into view.

I'm wondering what else is there that makes for beautiful interfaces relatively easily.

Libraries or core JQuery is fine.

Answer 1

Have a look at jQuery UI. It provides a good-looking set of base components, including theme support.

Answer 2

For the biggest bang:buck ratio, look at jQuery plugins.

Basic jQuery is excellent, and it's designed for hand-rolling great effects. Plugins, on the other hand, are usually fully-baked, higher-order web widgets.

Answer 3

Have you looked ay jQuery-ui? Its not as rich as soem other libraries (yet) but it has many basic components (dialogs, accordians, drag&drop, sliders, etc..). Although form the way you described your app id have to recommend using Dojo instead (as much as i ADORE jQuery).

Answer 4

As more of a front-end guy, my advice would be to draw up your ideas first, then seek out jQuery Plugins (jQueryUI is fantastic, but there are tons of 3rd party plug-ins out there) that will enhance that design in terms of UX. A good design and workflow all begins with planning -- much like development. A beautiful UI will always start with a solid design.

Answer 5

jQuery UI's not a bad place to start for a UI, but there are tons of plugins for jQuery that can make your life easier. Why reinvent the wheel if someone else already invented it better?

I've stumbled upon an excellent site with resources for designers using jQuery. http://jqueryfordesigners.com/ explains the JS in a way that beginners or advanced users can use.

Answer 6

jQuery Tools is a nice alternative to jQuery UI. It doesn't have as many features as jQuery UI or the ThemeRoller though.

Answer 7

I think most of the beauty of an interface is going to be in the HTML/CSS - sparse layout, spacing, colors, rounded corners, textures, etc.

That said...

• fadeIn() and fadeOut(), slideDown(), etc - all these are nice, but animate() is the granddady of them all. You can animate any CSS property you like. If you don't need to animate properties, only change them, it's much cleaner to define CSS classes and use addClass() and removeClass() or toggleClass().
• jQuery UI's effect highlight is nice when you use AJAX to add something to the screen; it's like "hey, look at this for a second!" then fades back to normal. (jQuery also makes AJAX easy; these functions are easy wrappers for the lower-level interface, which has more options)
• If you've got a lot of floated items on a page (for example, product listings) and you start hiding/showing some of them based on user criteria, the way that the float adjusts looks pretty cool

'A beautiful interface' is subjective, but if you Google for sites that use jQuery (some are linked from jQuery's own page), you can find sites you like and use firebug or Chrome developer tools to inspect their jQuery