31 | 07 | 2010
Main Menu
Affiliates
Login Form



Alexa
JoomlaWatch Stats 1.2.6 by Matej Koval
10 Best jQuery Interactive Design Plugins and Tutorials
Written by Phoenix   
Thursday, 27 August 2009 14:50

Rating 0.0/5 (0 vote)

Interactivity is essential for an application. Monotonous applications with no interactivity fail to attract users. This simple collection of tutorials on plugins for creating Interactive applications in jQuery will help create Interactive jQuery applications.

 

1. Glimmer

Glimmer allows you to easily create interactive elements on your web pages by harnessing the power of the jQuery library. Without having to hand-craft your JavaScript code, you can use Glimmer’s wizards to generate jQuery scripts for common interactive scenarios. Glimmer also has an advanced mode, providing a design surface for creating jQuery effects based on your existing HTML and CSS.

 

2.  jQuery Interactive Date Range Picker with Shortcuts

We recently modified jQuery UI's Datepicker, created and maintained by jQuery UI contributor Marc Grabanski. Our version is optimized for quickly selecting a date from a list of preset dates/ranges, and we added smooth transitions when additional options are revealed.

Our modifications to the original date picker include:

    * shortcut links to preset date ranges, for example, "Past 30 days" or "Current YTD,"
    * links to "All dates before..." and "All dates after..." to simplify selecting a range of values where the data set is very large or the high or low end value is an unknown, and
    * only showing the number of calendars needed for choosing a particular range (i.e., you only need one calendar to choose "All dates before...", but you'll need two to select a custom range).

 

3.  Fully Interactive jQuery File Tree

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive, valid and semantic XHTML file tree with as little as one line of JavaScript code. jQuery File Tree is fully customizeable via CSS with the ability to style icons based on file extension. It also supports custom connector scripts for extended functionality. The expand and collapse event are customizable as well. jQuery File Tree works in all browsers supported by jQuery. It has been fully tested in Internet Explorer 6 & 7, Firefox 2, Safari 3 and Opera 9.

 

4.  Interactive jQuery plugin : QuickFlip

 

QuickFlip is a jQuery plugin I wrote that uses a CSS trick to cause a div, paragraph or any other piece of HTML markup to flip like a card. With a result similar to the UI animation on the iPhone, this jQuery plugin is easily integrated into your webpage to make any portion appear to flip and show its back.

 

5. Building an interactive map with jQuery instead of Flash

 

At the end of last year, we launched a website for Coastal & Marine Sciences in North Carolina with one of our Agency Partners, Liaison Design Group.  As a part of the project, the website was supposed to have an interactive map that showed some information and the location of the various Marine Science outposts across the state. The locations would be represented by dots and upon clicking one an info box would pop up and display information about the location.To make the map as engaging as possible, there needed to be smooth animations and crisp graphics.  Traditionally such a project would require the use of Flash. We try to avoid Flash whenever possible, so I began to consider how the project could be accomplished in jQuery.

 

6. 3 JQuery Methods for Interactive Menu Effects


3 recent articles show how to get interactive effects on menus, proving that you don't need Flash for this kind of simple interactivity.

 

7. A jQuery Plugin for Zoomable, Interactive Maps

A couple of months ago we launched a site about Marine Science in North Carolina with one of our design partners, Liaison Design Group. A key part of the project was an interactive map that allowed visitors to find important Marine Science resources in North Carolina. Each location on the map would be represented by a bullet. Clicking the bullet would bring up more information on the location. Since the locations of the bullets tended to be highly clustered, zooming into select subregions was possible.

 

8. bullsEye - jQuery plugin to add interactive and visualization features to tables

This plugin converts a normal table with both row and column level headers to an somewhat interactive format - it is named bullsEye because the goal was to create a targeting effect when the mouse is being moved on the cells and row and column headings. Maybe something like “draw cell lines” or “table zoom” would have been more appropriate but I don’t feel the need to agonize over names.

 

9. Interactive Barcode, Cool jQuery-Based Online Portfolio

Alexandre Plennevaux pointed us to a jQuery-based online portfolio of the the photographer Lisa Pram. The interface is a specific design approach to online image galleries aiming to produce an integrated graphical product based on the work itself. The result of this search is an "interactive barcode", generating a unique representation of Lisa Pram’s work in a non-metaphorical manner, through indexing of her image sets according to four main keywords, which stand for the main areas of her work - Professional, Experimental , Advertising and Editorial.

 

10. Interactive jQuery selector tester

An Interactive jQuery selector tester.

Comments
Search
Only registered users can write comments!

3.22 Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

Last Updated ( Thursday, 27 August 2009 14:51 )