jQuery gives ou the ease and flexibilit to design attractive GUI. This collection of good GUI Applications, Tutorials and plugins showcase the best jQuer GUI capabilities.

1. How to Create a Simple News Ticker

In this tutorial we’ll be looking at how we can transform some semantic and accessible underlying HTML into an attractive and functional news ticker that smoothly scrolls its contents. Some news tickers are horizontal and some are vertical; the one that we’re going to create today will be vertical.

2. Easily Implement a Live Search Effect: New Plus Tutorial

The live search effect is no novelty in desktop apps. In Mac OS X or Windows Vista/7, just type a few letters in a search box, and almost instantly you get the search results on the fly. Having to hit the submit button is becoming old school. This tutorial will show you how to bring this cool effect to the web world with jQuery. The code used in this tutorial is modified based on John Resig's approach.

3. A Different Top Navigation

When designing a new site, web designers usually face the age-old question: vertical or horizontal navigation? There are pros and cons to both solutions. One example being horizontal navigation limits the number of links you can have due to a limited page width. This is usually solved by including a drop down system. However, if you are attempting to make your particular site stand out, you might consider thinking outside the "norm".

In this tutorial, we will be doing precisely that. We will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.

4. Create a Twitter-Like “Load More” Widget

Both Twitter and the Apple App Store use a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, Javascript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.

5. Creating a Keyboard with CSS and jQuery

Sometimes it's just fun to play around with the programming languages we know and see what we can create. I thought it might be nice to create a little online keyboard with CSS, and then make it work with jQuery. The keyboard includes "action" keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked. I'll show you how to build it today.

6. Making a Content Slider with jQuery UI

In this tutorial we’re going to be using the jQuery UI slider widget to create an attractive and functional content slider. We’ll have a container, which has a series of elements each containing different blocks of content. There will be too many of these elements to display at once, so we can use the slider to move the different content blocks in and out of view.

7. “Outside the Box” Navigation with jQuery

Just about every website uses the regular navigation concepts we're all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn't new, it's certainly not common.

8. Fun With Canvas: Create a jQuery Graph Plugin

Combine the versatile canvas element with the robust jQuery library to create a bar graphing plugin. In this first part, we are going to code the core logic of the plugin as a standalone version.

9. Create a Fun Tweet Counter With jQuery

In this tutorial, we will look at using jQuery to call Twitter’s API and then use the results to create a widget for a blog or personal website that shows what hours during the day we tweet at the most.

10. Build an Auto-Scrolling Slideshow That Works With and Without JavaScript

Create a jQuery slideshow that enables you to click through each slide when JavaScript is disabled, without having to display all slides one under the other.

11. Building a jQuery Image Scroller

In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.

12. Submit A Form Without Page Refresh using jQuery

Previously on NETTUTS, Philo showed how you can use jQuery to add form validation to wordpress comments that works without any page reload. Another great way of utlizing jQuery to enhance user experience is to not just validate, but to submit your form entirely without a page refresh. In this tutorial I'll show you how easy it is to do just that -- submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background). Let's get started.

13. Create a Progress Bar With Javascript

The Progress Bar is one of the latest components to be added to the excellent library of UI widgets and interaction helpers built on top of jQuery. It was introduced in the latest version of the library, which at the time of writing is 1.7.

14.Fancybox - simple and fancy jQuery plugin

FancyBox is tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.

15. Pop!

Enjoy simple dropdown menus with pop!, an unobtrusive javascript plugin for jquery.

16. Slide out and drawer effect

The effect is commonly known as an ‘accordion’ and it’s usually used to slide up, or down blocks of content to expose new blocks. The Apple web site is a great demonstration of this effect in action, where the mouse settles on the title of the ’section’ and the associated links are exposed. What makes this effect particularly cool, is that the drawers maintain a fixed height and slide between restricted area.

This tutorial will walk through how to create your own simple plugin, and then replicate the Apple downloads drawers using the very excellent Accordion plugin.

17. AutoCompleter Tutorial - jQuery(Ajax)/PHP/MySQL

I thought i would write this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more (this has been demonstrated with the other apps i have written here)!

18. jQuery treeView Basic

Create a nice expanding and collapsing tree view control using jQuery. This is version one. A simple list that gets enhanced.

19. Using jQuery for Background Image Animations

After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too.

Changing the position of the background image felt to be the best approach to creating the type of effect we're looking for (and I'm not the first to think so: see the examples at the end of this article).

jQuery is a great library for this type of task but out of the box, it can't animate background position properly because of the need to animate two values instead of just one (too bad not all browsers implemented the non-standard background-position-x and -y like Internet Explorer). Grab the latest version (1.0.2 as of this writing) of the Background-Position plugin. Previous versions didn't support negative or decimal values properly.

20. Gritter

A jQuery plugin to demonstrate transparent pop up notifications on a bckground.

---

Add this page to your favorite Social Bookmarking websites