DailyJS

DailyJS

The JavaScript blog.


Tagjquery-ui
Featured

jquery ui plugins async pagination jquery-ui

jQuery Roundup: UI 1.10.3, simplePagination.js, jQuery Async

Posted on .

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

jQuery UI 1.10.3

jQuery UI 1.10.3 was released last week. This is a maintenance release that has fixes for Draggable, Sortable, Accordion, Autocomplete, Button, Datepicker, Menu, and Progressbar.

simplePagination.js

simplePagination

simplePagination.js (GitHub: flaviusmatis / simplePagination.js, License: MIT) 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.

jQuery Async

jQuery Async

jQuery Async (GitHub: acavailhez / jquery-async, License: Apache 2) 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.

Featured

jquery plugins history bootstrap jquery-ui datepicker

jQuery Roundup: Sco.js, Datepicker Skins, LocationHandler

Posted on .

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

Sco.js

Sco.js (GitHub: terebentina / sco.js, License: Apache 2.0) by Dan Caragea is a collection of Bootstrap components. They can be dropped into an existing Bootstrap project, or used separately as well.

Some of the plugins are replacements of the Bootstrap equivalents, but prefixed with $.scojs_. There are also a few plugins that are unique to Sco.js, like $.scojs_valid for validating forms, and $.scojs_countdown for displaying a stopwatch-style timer.

In cases where Sco.js replaces Bootstrap plugins, the author has been motivated by simplifying the underlying markup and reducing the reliance on IDs.

Dan has included tests, and full documentation for each plugin.

jQuery Datepicker Skins

jQuery datepicker skins

Artan Sinani sent in these jQuery datepicker skins (GitHub: rtsinani / jquery-datepicker-skins). They're tested with jQuery UI v1.10.1 and jQuery 1.9.1, so they should work with new projects quite nicely.

LocationHandler

LocationHandler (GitHub: slv / 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.

Featured

jquery oo jquery-ui

jQuery Roundup: 1.8.3, UI 1.9.2, oolib.js

Posted on .

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

jQuery 1.8.3

jQuery 1.8.3 and jQuery Color 2.1.1 are out. There are a few interesting bug fixes in this release that you might want to check out:

jQuery UI 1.9.2

jQuery UI 1.9.2 is out:

This update brings bug fixes for Accordion, Autocomplete, Button, Datepicker, Dialog, Menu, Tabs, Tooltip and Widget Factory.

The 1.9.2 changelog contains a full breakdown of the recent changes.

oolib.js

oolib.js (GitHub: idya / oolib, License: MIT) by Zsolt Szloboda is a JavaScript object-oriented library that is conceptually similar to jQuery UI's Widget Factory. It supports private methods, class inheritance, object initialisation and deinitialisation, super methods, and it's fairly small (min: 1.6K, gz: 0.7K).

It looks like this in practice:

var MyClass = oo.createClass({  
  _create: function(foo) {
    this.myField = foo;
  },

  _myPrivateMethod: function(bar) {
    return this.myField + bar;
  },

  myPublicMethod: function(baz) {
    return this._myPrivateMethod(baz);
  }
});

var MySubClass = oo.createClass(MyClass, {  
  _myPrivateMethod: function(bar) {
    return this.myField + bar + 1;
  }
});

Featured

jquery backbone.js indexeddb jquery-ui

jQuery Roundup: jQuery UI 1.9.1, IndexedDB on Cordova, Backbone.ViewKit

Posted on .

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

jQuery UI 1.9.1

jQuery UI 1.9.1 was released a few days ago. This is a maintenance release that includes bug fixes for many widgets and the core library. The jQuery UI 1.9.1 Changelog has full details of the fixes.

Bootstrap 2.2.0

Bootstrap 2.2.0 templates

Bootstrap 2.2.0 is out. This version includes much needed additional templates, a media component, a new variable-driven typographic scale, and other more minor tweaks.

IndexedDB on Cordova

Parashuram Narasimhan has got his IndexedDB polyfill working on on Cordova. This means it can be used with iOS and Android applications:

Parashuram's posts include details on the techniques he uses to get IndexedDB working on each platform. For example, with Android he currently has to use JavaScript to inject the polyfill during the deviceready event.

Backbone.ViewKit

Backbone.ViewKit (License: MIT) by Scott Nelson is a Backbone.js plugin for managing views with transitions in an iOS-inspired fashion. It adds Backbone.ViewKit.ViewPort which renders sets of views, displaying one at a time. Stacks of views are managed using Backbone.ViewKit.ViewStack, which allows views to be pushed or popped as required.

Transition animations can be triggered using Backbone.ViewKit.Transition:

new Backbone.ViewKit.Transitions.Slide({  
   reverse: false
 , duration: 0.4
 , easing: 'ease-out'
 , delay: 0
});

There's a demo here: Backbone.ViewKit demo.

Featured

jquery mobile bootstrap jquery-ui

jQuery Roundup: Fuel UX, uiji.js, QuoJS

Posted on .

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

Fuel UX

Fuel UX

Fuel UX (GitHub: ExactTarget / fuelux, License: MIT) from ExactTarget is a lightweight library that extends Twitter Bootstrap with some additional JavaScript controls, a Grunt build, and AMD compatibility. At launch, the following controls are included:

  • Combobox - combines input and dropdown for easy and flexible data selection
  • Datagrid - renders data in a table with paging, sorting, and searching
  • Pillbox - manages selected items with color-coded text labels
  • Search - combines input and button for integrated search interaction
  • Spinner - provides convenient numeric input with increment and decrement buttons

The project is well-documented, covered in unit tests, and outside contributions are welcome and encouraged.

Contributed by Adam Alexander

uiji.js

uiji.js

uiji.js (GitHub: aakilfernandes / uiji) by Aakil Fernandes is a clever hack that inverts jQuery by allowing CSS selectors to create elements. This will create a paragraph with the class greeting, that contains the text Hello World!:

$('#helloWorld .output').uiji('p.greeting"Hello World!"')

Callbacks can be used to create hierarchy, and the API is chainable because the plugin returns $(this) once it has processed the input.

QuoJS

QuoJS (GitHub: soyjavi / QuoJS, License: MIT) by Javier Jiménez is a small library for mobile development. It supports HTML traversal and abstractions for touch-based gestures. It doesn't require jQuery, but has a similar API:

// Subscribe to a tap event with a callback
$$('p').tap(function() {
  // Affects "span" children/grandchildren
  $$('span', this).style('color', 'red');
});

The same author has written a few other ambitious projects, including Monocle (GitHub: soyjavi / monocle, License: MIT), which is an MVC framework for CoffeeScript application development.