Create Javascript classes is a topic which comes under a lot of debate.

Do we take an object based approach or do we use global variables and public methods? For applications I develop, I create unique classes for my applications organising my code as seen below:

$(function() {
  function MyConstructor() {
  }
  MyConstructor.prototype = {
    myMethod: function() {
    }
  };
  var instance = new MyConstructor();
});

This is a great approach that neatly tucks everything away while only executing the code when the DOM is ready. However, we encounter issues when our Javascript grows into a large file containing many objects and methods. To overcome this, we could look into Modules and the implementation used in Node to call specific classes when they're required.

Now onto the jQuery plugins for May 2013.

Minimalect

ALJT Media - Minimalect, jQuery Plugins

Minimalect is a simple select replacement in jQuery; developed 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.

SimplePagination.js

ALJT Media - Simple Pagination, jQuery Plugins

simplePagination.js by Flavius Matis is a pagination plugin that supports Bootstrap. It has options for configuring the page links, next and previous text, style attributes, onclick events, and the initialisation event.

There's an API for selecting pages, and the author has included three themes. When selecting a page, the truncated pages will shift, so it's easy to skip between sets of pages.

Async

ALJT Media - Async, jQuery Plugins

Async by Arnaud Cavailhez is a UI plugin for animating things while asynchronous operations take place. It depends on Bootstrap, and makes it easy to animate a button that triggers a long-running process.

The documentation has some clever examples that help visualise how the plugin works – two buttons are displayed so you can trigger the 'success' and'error' events by hand. It's built using $.Deferred, so it'll work with the built-in Ajax API without much effort.

LocationHandler

LocationHandler by Michele Salvini is a plugin for managing pushState and onpopstate. It emits events for various stages of the history change life cycle. Each supported state is documented in the readme, but the basic usage looks like this:

$(document).ready(function() {
  var locationHandler = new LocationHandler({
    locationWillChange: function(change) {
    },
    locationDidChange: function(change) {
    }
  });
});

The change object has properties for the from/to URLs, and page titles as well.

FlipClock.js

ALJT Media - FlipClock.js, jQuery Plugins

FlipClock.js is a jQuery clock that acts as a timer, countdown, clock and comes with an API and everything is 100% customisable through CSS. All the code is fresh and clean-coded, abstract classes allow you to reuse the code wherever you need it.

ChatJS

ChatJS - jQuery Plugins, ALJT Media

ChatJS is a full-featured, lightweight, Facebook style jQuery plugin for instant messaging. ChatJS also comes with a server side implementation for ASP.NET/SignalR out of the box.

FartScroll.js

fartscroll.js, jQuery Plugins

fartscroll.js provides your website with humorous noises when you scroll. This plugin has got you covered. Everyone farts. And now your web pages can too.

Clickable Map

Clickable Map, jQuery Plugins - ALJT Media Web Design

Clickable Map is a CSS & jQuery clickable map allows you to create an interactive map. It is supported across all browsers, mobile devices and tablets.

Dont forget! You can get in touch with us by mentioning #ALJTMedia on Twitter or by leaving a comment on our FacebookGoogle+ or LinkedIn page.

0
Ignite your brand, utilise user-generated content no matter where you or your audience are ›