Dynatable (GitHub: JangoSteve / jquery-dynatable, License: AGPL or commercial) by Steve Schwartz is a library for displaying JSON data as friendly and efficient HTML tables. It provides a framework for searching, sorting, and filtering data. It uses jQuery, and can be invoked with $.dynatableSetup.
Dynatable can convert plain HTML tables into JSON. The properties for the JSON can be camelCase, but other styles are supported, including dashed and underscore. This is set with the table.defaultColumnIdStyle option.
JSON can also be fetched from a server. In this case you can use the dataset option:
It expects a corresponding skeleton table node, with thead and tbody.
The documentation is thorough and includes examples for each of these things, and the other features provided by the library.
Nobody's sent me a jQuery gallery for a while. nanoGALLERY (GitHub: Kris-B / nanoGALLERY, License: CC BY-NC 3.0) by Christophe Brisbois supports Flickr and Google+, and supports responsive layouts. You can get a gallery going with a Google account like this:
It comes with CSS, but you can theme it. It displays a gallery navigator using folders, so it could scale up quite well to a large collection.
Documentation for the main options and expected markup can be found in the project's readme file.
jQuery Audit (GitHub: zertosh / jquery-audit, License: MIT) by Andres Suarez is a Chrome Developer Tools extension for auditing jQuery. It adds a sidebar (under Elements) that includes details of delegated events and internal data.
The documentation has explanations of the main features, and instructions on how to use the extension properly. For example, you can dig into bound functions for event handlers which can be bound differently based on the library.
Note: You can send your plugins and articles in for review through our contact form.
jQuery 1.10.1 and 2.0.2
"A new release already? It's only been a week! Yes, because you deserve it. We're greatly encouraged by all the people who upgraded and found our well-hidden 'we completely hosed relative animations' easter egg," writes Dave Methvin, about the release of jQuery 1.10.1 and 2.0.2.
ikSelect (GitHub: Igor10k / ikSelect) by "Igor10k" is another select replacement plugin! This one supports custom markup and inline-block, optgroup, adding and removing options, callbacks, and event triggers.
The API is clean and idiomatic jQuery. There's a single entry point, $(selector).ikSelect which can be used to apply the plugin to a select, or issue commands to an instance of ikSelect. Various options are supported, like setting the width automatically and adding search support (known as filtering in this case).
photoWall.js (GitHub: jeremyjcpaul / photowall, License: MIT, jQuery: photowall) by Jeremy JC Paul creates a photo gallery in a similar style to Google+/Picasa, where clicking on an image opens a panel that displays additional metadata.
The markup allows the photo's title and description to be specified like this:
<img class="pw-image" src="images/image-filename.jpg" />
<!-- Any HTML content can go in here. -->
The plugin is invoked using $(selector).photoWall(), and supported options include event handlers and animation speed.
To list a plugin on the registry, take a look at the Publishing Your Plugin guide. The workflow is based around Git, and you'll need to write a jquery.json manifest file so the registry can display appropriate metadata. Even though dependencies are listed, there isn't an official automated tool for installing them (a jQuery npm or component equivalent):
If you're looking to just browse and use jQuery plugins in your application or site, not a lot has changed. Plugins each have basic pages that provide a link to the plugin download, as well as past versions, documentation, issue tracker, and source code repository. Download links may serve you a zip file with the plugin assets, or link to the best resource to download the build of the plugin you're looking for.
imagemax (GitHub: zerostatic / imagemax, License: MIT) by Matt Wallace is a fullscreen slideshow plugin. Images are displayed in the background and scaled to fit the window.
Like other gallery plugins, this one will display a set of images in a container, but it also takes an array of images as an argument:
jQuery Sortable (GitHub: johnny / jquery-sortable, License: BSD3) by Jonas von Andrian is a drag-and-drop sort library that doesn't require jQuery UI. It supports nested lists, and the demo (with default options) shows a nice "drop" indicator so it's easy to see where an element is being moved to.
The author has demonstrated it being used with Bootstrap, and it works well with Bootstrap's markup and styles. It allows tables to be sorted, but this won't work as well in Konqueror or IE.
trunk8 (GitHub: rviscomi / trunk8) by Rick Viscomi is a text truncation plugin. Truncating text in browsers is actually quite awkward to do well, and I haven't yet found a plugin that does it particularly well when a certain number of vertical lines is required. However, this one appears to do that through the lines option, and it also does a lot more: tooltips can be created, character count is supported, and the internal calculations are cached so it should perform very well.
The author has attempted to address performance using several familiar client-side hacks, so if speed is an issue this might be a good choice. The author hasn't included unit tests or benchmarks, so it might take a bit of jsPerf to really see how efficient it is.
tcsst by Paul Battley is a CSS testing script for jQuery. The author wrote it because "life's too short to click around". It's basically a simple test runner with a CSS-specific flavour: tests are defined in terms of CSS selectors:
tc.test('top of paragraph should be at a multiple of line-height', 'p',
var lineHeight = parseInt($('body').css('line-height'), 10);
var diff = $(element).offset().top % lineHeight;
test.assert((0 == diff), 'Off by ' + diff + 'px');
It's an interesting concept, and I think there's a lot of room for time-saving assertions that are tailored for CSS.
A grumble can be rotated around a given element at any angle, all 360
degrees. Any distance can be specified. Any CSS style can be applied.
There's auto-magic size adjustment for use with localised text. FX
queues for animating multiple grumbles.
It uses CSS3, but will use Microsoft's proprietary filters for IE6+.
The example seen on the site's homepage works like this:
(GitHub: goldfire / miniTip,
License: MIT and GPL) by James Simpson is a lightweight tooltip
plugin. This one uses title attributes to display neat little tooltips.
There are options for customising the content, delay, events,
animations, but the most basic usage is just \$('#tip).miniTip();.
Mosaiqy (GitHub: fcalderan /
mosaiqy, License: CC BY-ND
3.0) by Fabrizio
Calderan is a plugin for displaying images in a grid and manipulating
them with animations. HTML5 and JSON/JSONP are used for the templates
and data. CSS3 hardware acceleration is used where available, and it
will fetch data from popular sites like Flickr and Instagram.