Plugins

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

sort


Display Tag Ajax Plugin

Provides AJAX refresh capability to Display Tag tables.

Prequisites:

- Setup Display Tag framework in your application, for more information go to http://displaytag.sourceforge.net/1.2

Setup Steps:

1) Import display-tag-ajax-1.2.js in your jsp.

.
.
<head>
<script type="text/javascript" src="../js/jquery.displaytag-ajax-1.2.js"></script>
</head>
.
.

3) Enclose area that contains the display tag table with a div and assign the div an id. Below a div with id displayTagDiv has been created.
.
.

<div id="displayTagDiv">
<% request.setAttribute( "test", new TestList(10, false) ); %>
<display:table name="test">
  <display:column property="id" title="ID" />
  <display:column property="name" />
  <display:column property="email" />
  <display:column property="status" />
  <display:column property="description" title="Comments"/>
</display:table>
</div>

.
.
3)Call displayTagAjax() onload


.
.

jQuery Drag And Drop Sort

jQuery Drag And Drop Sort easily converts any group of elements into a list that you can sort by dragging the items. This can be used on lists, tables, paragraphs or indeed anything as long as you group the items.

Please let me know if you have any questions or comments as I am actively developing these plugins.

View a demonstration

Read the documentation

Animated table-sort (REGEXP-friendly)

This is an animated table-sort plugin, which can sort on a REGEXP match against a TD's content as well as on its whole content.

To download or see demos, head over to http://mitya.co.uk/scripts/Table-sort---now-REGEXP-friendly-111.

Call it on a table, e.g.

$('#myTable').sortTable(params)

...where params is an object of property/value pairings including:

  • onCol (int, required) - the index of the column in your table to sort on (not zero-indexed)
  • keepRelationships (bool, default: false) - if true, row relationships wil be maintained. That is, the sibling TDs will move also
  • regexp (RegExp, default: null) - a string representing a regular expression (/pattern/) to sort on instead of the complete contents of the TD. Useful with regexpIndex - see below

MicroView

Here we go with my newest JQuery Plugin called MicroView. The main purpose of MicroView is to provide an easy stylable component / widget to display data recieved by JSON or XML. To achieve this, MicroView isn't table based but uses div-nested spans to display the data. This different approach enables you to present your data in many different ways, as the first picture shows.

Switching between views is easy as well - and can be triggered client side. By switching a view you can also change the columns you wish to display (and of course their width). And oh yes, as you see in te picture, you can edit your data in every view, as long as your template allows it.

Your data, your style (oh what a catchphrase).

Element Sorter

You can sort all the child elements in a table, ul, ol, what ever....

The goal of this plugin is to keep assumptions to a minimum and allow you to implement sorting as you want. This plugin doesn't add any sorting classes or do anything to modify the DOM except to sort the children.

Parameters

{
sortOn: '.selector',  //selector of the column to sort on
direction: 'asc' | 'desc' //optional..defaults to asc
sortType: 'string | date | number' //optional..defaults to string
}

Examples

Sort on a single column

var sortParams = 
{
sortOn: '.selectorOfColumn',
direction: 'asc',
sortType: 'string'
}
$('selectorOfParentNode').sort(sortParams);

Sort on multiple columns

qsort

The plugin allows you to sort the selected elements in the ascending or the descending order according to the specified attribute. It also allows you to treat the numbers as string or numbers during sort. You can also specify whether to make the sort case-sensitive or case insensitive.

(mb)Tabset, choose your content and sort your tabs

organize your tabs!

A usefull component that let you build a tabbed interface really easily; ad you can sort your tab as you want!

DEPENDENCIES:

ui.core.js
ui.sortable.js

optional:
jquery.metadata.js

HOW DOES IT WORK:

here is the js call:

$("#tabset1").buildMbTabset({
sortable:true,
position:"left",
start:function(){},
stop:function(){}
});

here is the code for each tabset:

<div class="tabset" id="tabset1">
<a id="a" class="tab {container:'cont_1'}">tab 1</a>
<a id="b" class="tab {container:'cont_2'}"  >tab 2 con testo lungo</a>
<a id="c" class="tab disabled {container:'cont_3'}">tab 3</a>
<a id="d" class="tab {container:'cont_4'}" >tab 4</a>
</div>

here is the code for each tabContent:

container 1

container 2

SORT

This jQuery extension will allow you to easily sort a jQuery object by one or more attributes. This was developed to sort JSON data, but can sort any jQuery object with attributes.

sort(attr, sortDesc)

Accepts:
attr

  • String. The name of the attribute to sort on. (ex. "Attribute1")
  • Array. A list of attributes to sort. (ex. ["Attribute1", "Attribute2",...])

sortDesc (optional)

  • String ("asc" or "desc")
  • Boolean(true = Descending, false = Ascending)

Example:

$(dataSet).sort("userName", "asc");
$(dataSet).sort(["division", "employee"], false);

sort(attr)

Accepts:
Key/Value Map
Key = "Attribute to Sort";
Value = "Ascending/Descending" (See Above for details)

Example:

$(dataSet).sort({"companyName":"desc", "employeeName":true});

3 State Switch Plugin

jQuery 3 State Switch Plugin(J3SSW) is a jQuery Plugin that represents the switch button express the selection and some states of list item at the same time using radio button and checkbox.
The applications of J3SSW includes some interfaces for sort key or filter key of any search results.
you can find some compressions (jsmin, packed, YUI) and examples on http://www.memorycraft.jp/project/jquery/j3ssw/index.html