Skip to main content

10 jQuery Widgets

By Sam Deering



😳 Ever felt a little embarassed sharing your JavaScript? Let's fix it.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

💁‍♀️ Fun Fact: Python was ranked #2 on a recent highest paid coders list. *

🤓 Ok. When did a code editor from Microsoft become kinda cool!?