jQuery Roundup: Selleckt, Drag and Drop AngularJS, jqfactory

09 Jul 2013 | By Alex Young | Tags jquery plugins jqueryui widgets angularjs select
Note: You can send your plugins and articles in for review through our contact form.

Selleckt

Selleckt (GitHub: BrandwatchLtd / selleckt, License: MIT) by Graham Scott is another select replacement. This one comes with Mocha tests, multiple select support, mustache.js for templating, and works as an AMD module or jQuery plugin.

The basic syntax (taken from the demo page) looks like this:

$select3.selleckt({
  mainTemplate: fancyTemplate,
  selectionTemplate: selectionTemplate,
  selectedClass: 'selected',
  selectedTextClass: 'selectedText',
  itemsClass: 'items',
  itemClass: 'item'
});

There are tonnes more options which are documented in the project’s readme on GitHub.

Drag and Drop for AngularJS

Drag and Drop for AngularJS (GitHub: codef0rmer / angular-dragdrop, License: MIT) by Amit Gharat is an AngularJS directive for jQuery UI’s Draggable Widget.

It supports draggable items and droppable targets, and activity can be observed using a controller’s $scope. The markup for the relevant directives looks like this:

<div class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" jqyoui-draggable="{animate:true}" ng-hide="!list1.title"></div>

The project comes with a Grunt build script and unit tests.

jqfactory

jqfactory (GitHub: gfranko / jqfactory, License: MIT) by Greg Franko is an API for building stateful jQuery widgets. It’s inspired by the jQueryUI widget factory, and supports jQuery prototype namespacing support, deferred/promises, clean event binding and clean up, and AMD.

The project’s readme contains a walkthrough that demonstrates how to wrap your code in Greg’s API. Here’s a snippet that shows how to support options, the constructor, and reinitialisation:

(function($, window, document, undefined) {
    // Your plugin will go here
    // namespace - person
    // name - greg
    $.jqfactory('person.greg', {
        // Your plugin instance properties will go here
        // Default plugin options
        options: {
            occupation: 'JavaScript Engineer',
            age: 24
        },
        // Plugin Constructor
        _create: function() {
            // This is where you can set plugin instance properties
            this.fullname = 'Greg Franko';
        },
        // Plugin re-initialized
        _init: function() {
            // You can include any logic that you like when your plugin constructor is re-called
        }
    }
    });
}(jQuery, window, document));

The project includes more documentation, a Grunt build script, and Jasmine tests.


blog comments powered by Disqus