DailyJS

DailyJS

The JavaScript blog.


Tagjqueryui
Featured

libraries jquery jqueryui amd

Using jQuery UI with AMD

Posted on .

As of version 1.11 you can use AMD with jQuery UI. RequireJS will work, or any other AMD compatible loader.

That means you can do this:

require(['jquery-ui/autocomplete'], function(autocomplete) {  
  autocomplete({ source: ['One', 'Two', 'Three'] }, '<input>')
    .element
    .appendTo('body');
});

Doesn't that look a lot better than what we had before (script tags, monolithic $)? The old Autocomplete style would have used $(selector).autocomplete, which is low on syntax but high in coupling. Even though Autocomplete's API is always going to be coupled to jQuery, I prefer the idea of being able to load it in a modular way, and to potentially be able to inject a different dependency.

The jQuery/jQuery UI stack is still more monolithic than some of the newer MVVM or component-based solutions, but this may help you use some AMD-based techniques with your existing jQuery UI projects.

Also, I know there's always someone who wants to point out how great Dojo is, so here's Dojo's AMD post from 2011.

Featured

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

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">{{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.

Featured

jquery design plugins jqueryui

jQuery Roundup: Go Flat!

Posted on .

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

Apple's iOS 7 was announced yesterday, with a divisive flat-design-inspired interface. Some have called it out for having inconsistent icons, and others have praised it for exploring the z-axis.

Designmodo's Flat UI.

Flat design isn't new to the web. A few months ago, Designmodo's Flat UI burst onto the scene, grabbing a huge amount of attention on Hacker News and reddit. Bootstrap 3 also has a decidedly flat and minimal aesthetic.

jQuery Mobile Flat-UI Theme is based on Designmodo's project, and brings some of these design conventions over to jQuery Mobile.

If you're looking to really take a bite out of Apple's iOS 7 design, the use of transparency effects might edge you closer to Jony Ive's aesthetic. You could use something like Blur.js (GitHub: jakiestfu / Blur.js) to get a jQuery plugin API for transparency, or just write the relevant CSS by hand.

Although themes and plugins are useful, the focus of modern flat design seems to be on colours. Choosing a suitable palette can be difficult, but there are shortcuts. I liked Daniel Jalkut's post on Adobe's Kuler -- the iPhone app can be used to generate colour palettes from the camera, which Daniel describes as "granting superpowers to users".

For more inspiration, plenty of flat design gallery sites have started to spring up -- fltdsgn.com is one that I've enjoyed flicking through.

As interesting as Apple, Google, and Microsoft's recent shift to flat design has been, doesn't it seem a little bit reminiscent of the past?

You can't get flatter than this! Source: Operating System Interface Design Between 1981-2009.

Featured

jquery plugins jqueryui effects

jQuery Roundup: jQuery Color 2.1.0, jQuery UI 1.9 RC, Avgrund Modal

Posted on .

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

jQuery Color 2.1.0

jQuery Color 2.1.0 (GitHub: jquery / jquery-color, License: MIT) has been released. This plugin includes lots of methods for defining, parsing, and otherwise manipulating and animating colours. Version 2 includes new API methods that allow colours to be created and modified, and this includes support for RGBA and HSLA colours and animations.

Here are some examples of the plugin in use:

// String colour parsing
$.Color('#abcdef');
$.Color('rgba(100,200,255,0.5)');
$.Color('aqua');

// RGB
$.Color(255, 0, 0);

// RGBA
$.Color(255, 0, 0, 0.8);

// Objects work as well
$.Color({ red: red, green: green, blue: blue, alpha: alpha });

// Getters and setters
$.Color(255, 100, 130)
  .green(101)
  .green(); // 101

// Conversion
$.Color(255, 100, 130).toRgbaString(); // 'rgb(255,100,130)'

jQuery UI 1.9 RC

jQuery UI 1.9 RC has been released, and updates jQuery to 1.8 and jQuery Color to the 2.0 series. The jQuery UI team are also working on upgrading the project's infrastructure:

We're working on a new web site, new download builder, and new documentation site to accompany the new release.

Avgrund Modal

Avgrund

Avgrund Modal (GitHub: voronianski / jquery.avgrund.js, License: MIT) by Dmitri Voronianski is a modal plugin that attempts to create the impression of depth as the modal appears on the page. The main content zooms out as the modal appears -- the overall effect is surprisingly slick. Basic usage is $(selector).avgrund(), but the plugin has lots of options:

$('element').avgrund({
  width: 380
, height: 280
, showClose: false
, showCloseText: ''
, holderClass: ''
, overlayClass: ''
, enableStackAnimation: false
, template: 'Your content goes here..'
});

This plugin is based on the Avgrund concept by Hakim El Hattab.

Featured

jquery plugins jqueryui

jQuery Roundup: 2.0, UI 1.9 Beta, Handpicked jQuery Plugins v2

Posted on .

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

jQuery 2.0: Dropping Support for IE6-8

Last week, Dave Methvin posted about jQuery 1.9 and beyond. jQuery 2.0, which should be released in early 2013, will remove support for IE6-8. If you've followed the Let's Make a Framework posts, you'll have learned about a lot of the special cases frameworks have to include to support older versions of Internet Explorer. In an effort to clean up jQuery and stablise the API -- in fact, 2.0 should be compatible with 1.9:

Our goal is for 1.9 and 2.0 to be interchangeable as far as the API set they support. When 2.0 comes out, your decision on which version to choose should be as simple as this: If you need IE 6/7/8 support, choose 1.9; otherwise you can use either 1.9 or 2.0.

Due to the backlash (for and against) the IE support changes, Dave wrote a follow-up post: jQuery 1.9 and 2.0 - TL;DR Edition. This attempts to answer common questions asked by the community:

Why is the jQuery core team dropping support for oldIE (IE 6/7/8)? We're not! jQuery 1.9 will support oldIE when it's released next year. The jQuery team will continue to support and maintain version 1.9 even after jQuery 2.0 is released.

jQuery UI 1.9 Beta

jQuery UI 1.9 Beta has been announced, which includes:

  • Autocomplete accessibility updates
  • Accordion API redesign and accessibility updates
  • Tabs API redesign
  • Position API redesign

There are also new widgets, including the Spinner widget.

Handpicked jQuery Plugins v2

Handpicked jQuery Plugins (GitHub: higgo / handpicked.jquery.plugins.repo) has been updated to version 2. The collection now includes a CDN service, and features many more high-quality handpicked plugins.