jQuery Roundup: Jewel, Custom Drag and Drop, TouchTouch, BetterExamples.js

2012-05-08 00:00:00 +0100 by Alex R. Young
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.


Jewel (License: MIT) by Vadim Demedes is an ActiveRecord-inspired DOM query API:

var Post = Jewel.define('#posts', {
  keys: {
    title: 'h1'
  , body: 'p'

  template: function(fields) {
    return '<div class="post"><h1>' + fields.title + '</h1><p>' + fields.body + '</p></div>';

// Get all of the posts
var posts = Post.all;

// Create a new post
var post = new Post();
post.title = 'Latest post';
post.body = 'Latest content';
post.save(); // Will be prepended to #posts

It actually combines templating and querying, which seems to work quite well. The author has included some Mocha unit tests, and he's tested it in everything except IE.

Custom Drag and Drop with Mouse

Roll your own drag-and-drop handling, with help from jQuery UI by Jo Liss is a tutorial that explains how to build customised drag-and-drop interfaces using the jQuery UI Mouse widget.

It's interesting because I've struggled to get Draggable to do what I wanted in more complex or unique situations, and building on Mouse seems to offer the flexibility some projects demand.



TouchTouch (GitHub: martinaglv / touchTouch, License: MIT, Demo by Martin Angelov is an image gallery that's also touchscreen-friendly. It features a responsive interface with CSS3 animations and gestures like swiping.

All it needs is a list of images with links: $('#thumbs a').touchTouch();


BetterExamples.js (GitHub: willemmulder / BetterExamples.js, License: CC BY-SA 3.0) by Willem Mulder is an attempt to make JavaScript code examples more interactive.

It'll display both logging and errors, next to the code that generated them. This is something that I'd like to succeed because even with great tools like jsFiddle I feel like it's still difficult to create easy to follow interactive code examples.