Jquery is indeed a great technology. With jquery plug-ins, we can easily create websites with better user interfaces. In this article, we will share with you 40 jquery technologies and tutorials for creating a better user interface.
1. Custom Animation banner with jquery
In this tutorial, you will learn how to use jquery's easing plug-in and 2D transform plug-in to create custom animated banners. The idea of the tutorial is to integrate different elements into banners in the form of custom animations.
View instances
2. Moving boxes using usel with jquery
You will learn how to create a slider with buttons for changing the Panel and scaling the panel.
View instances
3. quick feedback form-jquery & PHP
Examples of quick feedback forms implemented by jquery and PHP.
View instances
4. wijmo-jquery UI Widgets
Wijmo is a library with over 30 jquery UI widgets.
View instances
5. One page navigation-jquery plugin
This is an example of how to smoothly navigate a page.
View instances
6. RSS reader with jquery mobile
7. Easy accordion-jquery plugin
The easy accordion plugin by Andrea CIMA serniotti will get your definition lists (DTS) and generate a nice and smooth horizontal accordion.
8. lettering-jquery typography plugin
In this article you will learn how to create, for example typographical css3 posters, or for really custom type headings, while keeping the text selectable.
9. annotation overlay effect with jquery
Create a simple overlay effect to display annotations.
10. snippet-jquery syntax highlighter
Snippet is a cool jquery syntax highlighting plugin built on top of the shjs script found on SourceForge. snippet jquery plugin provides a quick and easy way of highlighting source code passages in HTML documents.
11. Google powered site search with jquery
In this logical tutorial you will learn how to create a branded M search engine simply by using Google's Ajax search API, with which you can search for images and video and news items on your site-and you can also get general web results.
12. Build a Better tooltip with jquery awesomeness
In this tutorial, it shows how to quickly write a jquery plugin that will replace the typical browser tooltip with something a little flashier.
13. Simple tooltip-jquery & CSS
In this tutorial by Soh Tanaka you will learn how to create simple tooltip with jquery and an incredibly simple styling with CSS.
14. Coda popup bubbles
Jquery tutorial shows you how to create slick popup bubbles that appear when hovering over the target object.
View instances
15. Exposure jquery plugin
Exposure is an image viewing plugin for the jquery JavaScript library. it's designed for creating rich, fully customizable viewing experiences, and can handle very large amounts of images without pushing your bandwidth through the roof.
View instances
16. giveaway randomizer app-jquery
In this tutorial you will learn how to create a dedicated randomizer jquery application.
View instances
17. jquery smooth tabs plugin
Jquery smooth tabs is easy to use plugin, which allows you to display your content with some effects, for better user experience. all you need is a single container for your desired tabs and content, some nice CSS and images.
View instances
18. tn34 timetabs-jquery plugin
This jquery plugin by Mario Alves creates tab container that switches automatically every cycle to next tab. It is compatible with most modern browsers.
View instances
19. Full page image gallery with jquery
In this tutorial you are going to create a stunning full-page gallery with scrollable thumbnails and a scrollable full screen preview.
View instances
20. bgstretcher-jquery plugin
Bgstretcher (background stretcher) is a jquery plug-in which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize the image (s) to fill the entire window area. the plug-in will work as a slideshow if multiple images mode is used (the speed and duration for the slideshow is writable ).
View instances
21. slidenote-jquery plugin for slidingCommunications
Slidenote is a customizable, flexible jquery plugin that makes it easy to display sliding configurations on your website or in your web application.
View instances
22. Easy list splitter-jquery plugin
Easy list splitter keeps the HTML to the minimum. No unnecessary elements or Inline styles are added to the code. You'll get a clean plain HTML With some classes that you can use as hooks to easily style your lists. choose whether to order your list items vertically or horizontally. you can then decide whether to modify the default CSS or apply a new one.
View instances
23. Create a slide tabbed box using jquery
Show you how to create a set a module tab interface that slides content left and right as you click on the tabs.
View instances
24. Create a Tabbed interface using jquery
This very detailed step-by-step tutorial will show you how to create a Tabbed interface using jquery.
View instances
25. jquery Tabbed interface
Tabbed interface or tabbed structure menu show you how to build your own Tabbed interface using jquery with slidedown/slideup effect.
View instances
26. Create sliding image caption with jquery
This image gallery tutorial shows you an interesting interaction technique for having captions that slide up to reveal more information about a particle image when the user hovers over it.
View instances
27. Image cross fade transition
This tutorial will show you how to fade another image in, superimposing onto the current image when the user hovers it. It can be a great way to display more information about a particle image.
View instances
28. Image reveal using jquery
This quick and easy tutorial shows you the concept of hiding and showing elements by watching out for window events.
29. Slider Gallery
In this tutorial, you will learn how to create a sliding Gallery Based on jquery UI.
View instances
30. Simple jquery image slide show with semi-transparent Caption
It shows how to create a simple image slide show with a semi-transparent caption with jquery. It is suitable to display news headlines, or an image slide show in your website front page.
View instances
31. Create an Amazon books widget with jquery and XML
Create how to leverage jquery and the Amazon API to display products inside a content area that's horizontally-scrollable in this highly involved step-by-step tutorial.
View instances
32. Building a jquery-powered tag-cloud
A tag-cloud is a great way of showing visitors to your blog the main topics of interest that are available. There is also additional information contained in a tag-cloud.
33. Simple jquery spy Effect
In this tutorial, you'll discover an innovative technique for mimicking Digg's now defunctDigg spyApplication.
View instances
34. Creating a floating HTML Menu Using jquery and CSS
This jquery-based navigation menu tutorial will show you how to create a menu that follows you up and down the page as you scroll.
View instances
35. horizontal slide nav using jquery & CSS
Learn to create a spectacular sliding navigation whose animation is triggered when the user hovers over a navigation item.
View instances
36. Creating a slick ajaxed add-to-basket with jquery and PHP
This is a detailed tutorial which shows creating an unobtrusive ajaxed shopping cart using jquery & PHP and can guide you to ajaxify any e-commerce software you may already be using or coding. the main functions of the cart will be adding/removing items to the basket without the need of refreshing the page & displaying the actions with effects.
View instances
37. Create a Digg-style post sharing tool with jquery
Create a social bookmarking tool that look similar to Digg's. It looks cool, practical and useful! I also include the komodomedia's social bookmarking icons and a long list of submission URLs for one click bookmark.
View instances
38. Create an amazing music player using mouse gestures & hotkeys in jquery
We will use the mouse gestures and shortcuts in combination with XHTML and jquery technologies to create a music player. You can click and drag to operate the music player.
View instances
39. Creating a virtual jquery keyboard
This tutorial will explain how to implement a simple virtual keyboard.
View instances
40. Quick tip: resizing images based on browser window size
In fluid layouts it is easy to format the text to adjust nicely when the window is resized, but the images are not as fluid-friendly. this Quick tip shows you how to swap between two image sizes based on the current size of the browser, Div, or whatever you decide to make the deciding factor.
View instances
Link: http://www.1stwebdesigner.com/css/useful-jquery-techniques-tutorials/