90 great ajax scripts enhance your website

Having full control of elements on a page and the order they are presented in can be quite useful. Ajax as always is a safe choice to go for. There are several good quality plug-ins to pick from. This post provides an overview of plug-ins you can use to provide simple yet powerful functionality to reorder, filter, add drag and drop capabilities etc.

– Visually reorder all your table columns

Visually reorder all your table columns

Over the past several years, Stuart Langridges sorttable Javascript library has found widespread use. It’s easy to see why. Just add class=sortable to a table tag and its column headers automatically support click to sort. Pretty slick.

– Sortable Lists with JavaScript and CSS

Sortable Lists with JavaScript and CSS

This is a collection of Direct Manipulation examples that work in modern browsers. Each example is a proof of concept. It is not based on jQuery but I thought it deserved to be here anyway…

– Sortable table rows with jQuery

Sortable table rows with jQuery

Good tutorial taking you through the process of building drag and drop sortable tables.

– Drag and Drop ordering in a TreePanel

Drag and Drop ordering in a TreePanel

This example shows basic drag and drop node moving in a tree. In this implementation there are no restrictions and anything can be dropped anywhere except appending to nodes marked leaf (the files).

– jQuery List DragSort

jQuery List DragSort

A lightweight jQuery plugin that provides the ability to sort lists using drag and drop.

– jQuery UI multiple draggable plugin

jQuery UI multiple draggable plugin

The jQuery multiple draggable plugin is an extension to the jQuery UI Draggable plugin. This plugin extends the current functionality to allow for elements to be grouped and dragged as a group.

– NestedSortable

NestedSortable

NestedSortable is an extension to the original Sortable from the Interface plugin that allows you to both sort vertically and nest (make one item a child of other item) elements at the same time, using drag-and-drop. If can be set up exactly like a regular Sortable and allows you to use most options that are inherited from it.

– ppDrag

ppDrag

ppDrag is a Drag and Drop plugin for jQuery, which mimics the interface of jQuery UI Draggable. Currently supported is a small subset of its options, but the implementation is different .ppDrag focuses on performance.

– dragndrop

dragndrop

Get Drag and drop in a easy way.

– Sortable Lists Using jQuery UI

Sortable Lists Using jQuery UI

Unordered lists have a number of useful applications. They are commonly used to structure a sites navigation. I have found, in a number of web applications, that the ability to reorder (sort) such lists would be extremely useful. There are 2 jQuery plugins that allow elements to be sorted. These are the jQuery Interface plugin and jQuery UI and this tutorial use the latter and also provides a solution for saving the lists.

– Filtering Blocks

Filtering Blocks

Really cool script to filter a list of blocks. Each block has a wrapping div. It has one class that it shares with all other blocks for common styling and a class unique to its type.

– List Reorder

List Reorder

List Reorder is a jQuery plugin that allows you to reorder any simple ordered or unordered list. List Reorder is easy to use and does not require any additional markup. Its look and feel is completely customizable using a set of CSS classes.

– Table Drag and Drop JQuery plugin

Table Drag and Drop JQuery plugin

Dragging and dropping rows within a table can not be handled by general purpose drag and drop utilities for a number of reasons, not least because you need to move the whole row, not just the cell that receives the mouse events. Re-parenting the row also requires specific code. Sadly also, effects like fadeIn and fadeOut don’t work well with table rows on all browsers, so we have to go for simpler effects.

– Quicksand

Quicksand

Whit this really cool plugin you can reorder and filter items with a nice shuffling animation. The demo is a must see!

– Creating a Filterable Portfolio with jQuery

Creating a Filterable Portfolio with jQuery

If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. This tutorial will show you how to make filtering by category a little more interesting with just a little bit of jQuery.

– Using jQuery To Manipulate and Filter Data

Using jQuery To Manipulate and Filter Data

When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. This article will go through four techniques: hover effects, zebra rows, filtering, and sorting.

– jQuery Interface Elements

jQuery Interface Elements

Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery. With this components you can build rich client web applications and interfaces with the same simplicity as writing JavaScript with jQuery. You will find functions for reordering/sorting lists and tabs, various types of drag and drop etc.

– Highcharts

Highcharts

Highcharts is an incredibly elegant, highly customizable jQuery/ MooTools plugin for displaying graphs. It supports single or combinations of line, spline, area, areaspline, column, bar, pie and scatter charts.

– SyntaxHighlighter

SyntaxHighlighter

Handling over 20 different languages, SyntaxHighlighter is a simple and convenient way to format and theme code examples.

Share It

Related Posts