Category: Widget

jqTree – jQuery Drag and Drop Tree Widget

on April 23, 2012 in Development, Widget

jqTree is a jQuery tree widget plugin which features drag and drop with collapsable & sortable nodes.

The tree is initialised with data in json format and the plugin has many options to let you customise how data in the tree is manipulated. There are also callbacks that are fired for events such as clicking a node, right-clicking a node and moving a node.

The state of a tree can be preserved with cookies and this requires the cookie plugin. There is also a function for saving the updated tree as json data.

jqTree - jQuery Drag and Drop Tree Widget

Awesome jQuery Timeline Plugin

on April 21, 2012 in Development, Widget

Timeline is a jQuery plugin that creates an amazing timeline widget from a json data source. The widget can pull in and display media from sources such as twitter, youtube, vimeo, flickr, google maps, and sound cloud with more being added in the future.

To make things simple, it is possible to create a timeline from data within Google docs and a template is available here. If your going to create a timeline progmatically, your can create a json file server side and then add the source to the plugin configuration.

The style of the plugin can be customised with CSS and can be run full screen or in a containing element.

Awesome jQuery Timeline Plugin

Create Annotations on Any Web Page

on April 17, 2012 in Development, Toolkit, Widget

Annotator is a jQuery plugin that allows you to store annotations of anything on your web pages. There is also a bookmarklet available that enables you to create annotations across the web.

The plugin itself is extensible with a number of plugins (packaged & third party) that allow you to do things like save annotations to a web store, tagging, authentication & authorisation and much more.

If you are using Wordpress, a plugin is available here.

Create Annotations on Any Web Page

Facebook / Twitter Style Mentions Input – jQuery Plugin

on February 25, 2012 in Autocomplete, Development, Widget

Mentions Input is an auto-complete form input jQuery plugin that recreates the @mention used in Twitter and Facebook.

Unlike a traditional auto-complete widget, it is triggered with a character such as @ – but this can be changed in the configuration options.

The data store can be local or it can be retrieved remotely with AJAX. An image such as an avatar can also be returned and displayed in the drop-down results.

The plugin has a number of options and callbacks which makes it an extremely useful UI component.

It wont work in legacy browsers such as IE6 & IE7 without a poly-fill as it requires the HTML 5 input event but this is also included.

Facebook / Twitter Style Mentions Input - jQuery Plugin

Infinite Drag – jQuery UI Scroll Plugin

on February 8, 2012 in Development, Effects, Widget

Infinite Drag is a jQuery plugin that creates an infinite scrolling space within a view port by adding tiles as the view port is dragged.

As new tiles are created, a function is executed where code can be run to generate new content within the tile.

Infinite Drag - jQuery UI Scroll Plugin