The JavaScript blog.


jquery plugins jqueryui widgets angularjs select

jQuery Roundup: Selleckt, Drag and Drop AngularJS, jqfactory

Posted on .

Note: You can send your plugins and articles in for review through our contact form.


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:

  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">{{list1.title}}</div>  

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


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.


jquery plugins galleries images select

jQuery Roundup: 1.10.1, 2.0.2, ikSelect, photoWall.js

Posted on .

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.

The full background to this bug was documented in ticket #13939. Another animation-related bug was fixed, and an IE selector/iframe issue as well.


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:

<div class="photowall">  
  <div class="pw-slide">
    <img class="pw-image" src="images/image-filename.jpg" />
    <div class="pw-image-desc">
      <!-- Any HTML content can go in here. -->

The plugin is invoked using $(selector).photoWall(), and supported options include event handlers and animation speed.


jquery plugins select

jQuery Roundup: Anchorify.js, Minimalect

Posted on .

Note: You can send your plugins and articles in for review through our contact form.


Anchorify.js (GitHub: willdurand / anchorify.js, License: MIT) by William Durand automatically inserts unique anchored headings. The default markup is an anchor with a pilcrow sign, but this can be overridden if desired.

Even though the plugin is relatively simple, William has included QUnit tests and put the project up on jQuery's new plugin site.


Minimalect (GitHub: groenroos / minimalect, License: MIT) by Oskari Groenroos is a select element replacement that supports optgroups, searching, keyboard navigation, and themes. It comes with two themes that are intentionally simple, allowing you to easily customise them using CSS, and no images are required by default.

Options include placeholder text, a message when no search results are found, class name overrides, and lifecycle callbacks.


jquery templating plugins markup select

jQuery Roundup: 1.10, jquery-markup, zelect

Posted on .

Note: You can send your plugins and articles in for review through our contact form.

jQuery 1.10

A new 1.x branch of jQuery has been released, jQuery 1.10. This builds on the work in the 1.9 line:

It's our goal to keep the 1.x and 2.x lines in sync functionally so that 1.10 and 2.0 are equal, followed by 1.11 and 2.1, then 1.12 and 2.2...

A few of the inclded fixes were things originally planned for 1.9.x, and others are new to this branch. As always the announcement blog post contains links to full details of each change.


jquery-markup (GitHub: rse / jquery-markup, License: MIT) by Ralf S. Engelschall is a markup generator that works with several template engines (including Jade and handlebars). By adding a tag, <markup>, $(selector).markup can be used render templates interpolated with values.

Ralf said this about the plugin:

I wanted to use template languages like Handlebars but instead of having to store each fragment into its own file I still wanted to assemble all fragments together. Even more: I wanted to logically group and nest them to still understood the view markup code as a whole.

The <markup> tag can include a type attribute that is used to determine the templating language -- this means you can use multiple template languages in the same document.


zelect (GitHub: mtkopone / zelect, License: WTFPL) by Mikko Koponen is a <select> component. It's unit tested, and has built-in support for asynchronous pagination.

Unlike Chosen, it doesn't come with any CSS, but that might be a good thing because it keeps the project simple. Mikko has provided an example with suitable CSS that you can use to get started.

If Chosen seems too large or inflexible for your project, then zelect might be a better choice.