10 jQuery Widgets

Sam Deering
10 pretty darn good jQuery widgets for you to check out! The jQuery library includes a number of useful widgets. Widgets are user interface (UI) controls that augment standard XHTML controls. This section provides some tutorials on how to install some cool widgets that helps you make a better webpage.


1. How to Add Images Gallery Widget With jQuery Hover/Zoom To Your Blogger

Through this tutorial, only 3 steps you’ll be able to make your own gallery widget with jQuery, to add it for your blogger blog, you add add it to header, sidebar, above posts area, on footer columns, and anywhere else on your template.
How-to-Add-Images-Gallery-Widget-With-jQuery-Hover-or-Zoom-To-Your-Blogger-.jpg
Source


2. WordPress Plugin – jQuery Drop Down Mega Menu Widget

This WordPress widget plugin will allow you to quickly and easily create drop down mega menus from any WordPress custom menu.
Wordpress-Plugin-–-jQuery-Drop-Down-Mega-Menu-Widget-.jpg
Source


3. Understanding jQuery UI widgets – A tutorial

Widget, to most means a user-interface element, like a button or something more complicated like a popup date picker, but in jQuery UI terms it means a class, members of which are associated with HTML elements, things like Draggable and Sortable.
Understanding-jQuery-UI-widgets-.jpg
Source


4. Beginners Guide to jQuery Sorting

Beginners might often steer away from trying to reorder lists by dragging and dropping, the thought of doing something like that may sound daunting. Thankfully, jQuery UI has made it relatively simple, and this tutorial shows you how.
Beginners-Guide-to-jQuery-Sorting-.jpg
Source


5. Making a Google Wave History Slider

In this tutorial, they will show you how to create a Google Wave-like history slider. Using it, it will enable your sites visitors to go back and forth in time to view the changes that take place within a comment thread.
Making-a-Google-Wave-History-Slider-.jpg
Source


6. Making a Content Slider with jQuery UI

In this tutorial you’ll use the jQuery UI slider widget to create an attractive and functional content slider. You’ll have a container, which has a series of elements each containing different blocks of content.
Making-a-Content-Slider-with-jQuery-UI-.jpg
Source


7. jQuery UI Tabs with Next/Previous

Tabbed areas are lovely, but when you start getting to more than 3 or 4 different tabs, they start to get a little crowded and it makes sense to provide alternative navigation for them. It makes sense to supply universally located Next/Previous buttons, so without even moving your cursor you can click through each of them.
jQuery-UI-Tabs-with-Next-or-Previous-.jpg
Source


8. Custom 404 with jQuery and jQuery UI

This tutorial isn’t limited to only 404 error pages, you can use the animation technique illustrated in this tutorial on any page. Here’s the premise – a 404 page were the user actually sees the page breaking and cracking into bits.
Custom-404-with-jQuery-and-jQuery-UI-.jpg
Source


9. jQuery UI – Getting Started with ThemeRoller

ThemeRoller is a web app that offers a fun and intuitive interface for designing and downloading custom themes for jQuery UI.
jQuery-UI-–-Getting-Started-with-ThemeRoller-.jpg
Source


10. Making a Sleek Feed Widget with YQL, jQuery & CSS3

Today we are making a sleek feed widget, which will fetch any feed and display it in your blog sidebar. You can set it up to show the latest posts from the different categories of your blog, your latest stumbles, or even people mentioning you on twitter.
Making-a-Sleek-Feed-Widget-with-YQL-jQuery-CSS3-.jpg
Source

Win an Annual Membership to Learnable,

SitePoint's Learning Platform