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.

view


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).

Cliche

Cliche takes a model (any basic Javascript object) and a template view (a block of HTML/XML/other text with embedded field names) and produces a view of the model. This lets you use MVC techniques on the client-side to simplify the creation of dynamic web applications.

jQBinder

JQBinder is a light-weight template engine that allows client-side data binding between an HTML template (embedded in HTML file itself) and JSON data (which is typically asynchronously fetched from the server).

The syntax is very simple. You just need to put something like this in HTML (HTML snippet between outer is the template):

<div id="#target">
<img src='$(.user.profile_image_url)' />
<div>$(.text)</div>
</div>

Then, simply call
$("#stage").dataBindTo( { url: urlToJSONP } );

It will load a json data from the specified URL (which must be an array), then generate HTML snippet for each row of data using the template above - replacing all $(.propertyName) with the specified property of each row data.

I have tested it on Safari 4.0, Chrome 4.0, Firefox 3.5, Opera 9.0 and IE 8.0 so far.

jquery.claypool

Claypool

Claypool is a small, fast, railable application framework, built on jQuery that provides all the usual important patterns for large, long-lived client-side apps, server-side apps, or something strangely, beautifully in the middle.

Features:

  • Small, 14K gzipped.
  • MIT/GPL Style License.
  • Scales memory effeciency.
  • Powered by jQuery.

jQuery Finder (Mac OS X like Finder)

The purpose of this plugin is to provide an alternative to treeview
navigation. Making it look just like the Finder on a Mac is not my
goal, I am after its core functionality. Having said this, I think
that implementing useful features that exist on Mac's Finder (search,
toolback w/ options, etc) is time well spent.

Pan view of full sized images

Creates a image like div with the image as background with ability to pan it with mouse.

See the Github page for more information.

Example: $("img#mypic").panFullSize(300,200);