JQuery snippets that create a beautiful interface

Question

We are creating a web application that is planned to be created in full 2.0 (AJAX-ed and what not).

As a developer with a rich client and server-side, I know Javascript only at the functional level, but I start to learn JQuery based on recommendations and seeing how much it is.

I found things like SlideDown in my API that will move the element to the view.

I am wondering what else is there that makes beautiful interfaces relatively easy.

The library or main jQuery is fine.

Answer 1

As before, my advice would be to first draw up your ideas, and then look for jQuery plugins (jQueryUI is fantastic, but there are many third-party plugins out there) that will improve this design from a UX point of view. Good design and workflow starts with planning - just like development. A beautiful user interface will always begin with a solid design.

Answer 2

Take a look at jQuery UI . It provides a beautiful set of basic components, including theme support.

Answer 3

The jQuery UI is not a bad place to run the user interface, but there are many jQuery plugins that can make your life easier. Why reinvent the wheel if someone else came up with this better?

I came across a great resource site for designers using jQuery. http://jqueryfordesigners.com/ explains JS the way beginners or advanced users can use it.

Answer 4

I think that most of the beauty of the interface will be in HTML / CSS - a rare layout, distance, colors, rounded corners, textures, etc.

That said ...

• fadeIn () and fadeOut (), slideDown (), etc. - all this is nice, but animate () is the granddady of all. You can animate any CSS property that you like . If you don’t need to animate the properties, just change them, it’s much easier to define CSS classes and use addClass () and removeClass () or toggleClass ().
• The jQuery UI highlight effect is good when you use AJAX to add something to the screen; he likes "hey look at this for a second!" then gradually disappears. (jQuery also simplifies AJAX, these functions are simple wrappers for a lower-level interface that has more options)
• If there are a lot of floating elements on the page (for example, product lists), and you start to hide / show some of them based on user criteria, the way to configure the float looks pretty cool.

The "beautiful interface" is subjective, but if you use Google for sites that use jQuery (some of them are associated with your own jQuery page), you can find the sites you like and use the firebug or Chrome development tools to test their jQuery

Answer 5

For the highest bang: buck ratio look at jQuery plugins .

The base jQuery is superb and designed for hand-made great effects. Plugins, on the other hand, are usually fully baked higher order web widgets.

Answer 6

Have you watched ay jQuery-ui? It is not as rich as other libraries (for now), but it contains many basic components (dialogs, chords, drag & drop, sliders, etc.). Despite how you described, your app id should recommend using Dojo instead (as much as I have ADORE jQuery).

Answer 7

jQuery Tools is a good alternative to the jQuery user interface. It doesn't have as many features as jQuery UI or ThemeRoller.