Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
AMD-wrapped modules for jQuery UI for use in loaders like RequireJS
branch: master

This branch is 7 commits behind jrburke:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
example
.gitignore
.npmignore
LICENSE
README.md
jqueryui-amd.js
package.json

README.md

jqueryui-amd

A conversion script for translating jQuery UI files into AMD JavaScript modules.

The modules can be loaded by AMD script loaders like RequireJS.

Installing

The script requires nodejs 0.6 to run. Use npm to install it:

npm install -g jqueryui-amd

Using

jqueryui-amd path/to/jquery-ui-version

What happens

It is assumed a full source directory of jQuery UI is given to the conversion script. So, the directory should have a ui directory inside of it with the .js files for jQuery UI.

The script will a jqueryui directory that lives inside the directory given to the conversion script. The AMD modules will be inside the jqueryui directory.

Taking the example above, the path/to/jqueryui-version directory above would have the following contents (items that can be deleted if you do not use them -- they are not strictly part of making the example work -- are marked with a (d) below):

  • jqueryui-version
    • AUTHORS.txt
    • demos (d)
    • docs (d)
    • external (d)
    • GPL-LICENSE.txt
    • jquery-1.4.4.js (d)
    • jqueryui (directory created by convert)
    • MIT-LICENSE.txt
    • tests (d)
    • themes
    • ui (d)
    • version.txt

The conversion process transformed the following files:

  • jqueryui-1.8.14/ui/jquery.ui.?.js --> jqueryui-1.8.14/jqueryui/?.js
  • jqueryui-1.8.14/ui/jquery.effects.?.js --> jqueryui-1.8.14/jqueryui/effects/?.js
  • jqueryui-1.8.14/ui/i18n/jquery.ui.datepicker-?.js --> jqueryui-1.8.14/jqueryui/datepicker-?.js

These file/path name changes were done to fit better with module path expectations, and to make it easier/less typing to load the files.

Configuring AMD loading

Once the conversion is done, either configure the location to jqueryui in the AMD loaders config. Example for requirejs:

requirejs.config({
    paths: {
        jqueryui: 'path/to/jquery-ui-version/jqueryui'
    }
});

Or just place the path/to/jquery-ui-version/jqueryui directory directly in the baseUrl for the AMD project.

Then, just reference the modules with a jqueryui prefix:

define(['jquery', 'jqueryui/widget', 'jqueryui/button'], function ($) {
    //Use widget and button in here, off of the given $ variable.
});

Example

The example directory contains an example that includes a sample web project, in the webapp directory, along with the RequireJS optimizer, r.js. Run the webapp/app.html file to see the example in action.

Constraints

This script assumes a directory for jQuery UI contains a ui directory.

This script will need to be revisited if:

  • the naming convention of jquery.something.plugin.js changes.
  • the i18n approach changes.
  • more i18n files appear that are not for datepicker.
Something went wrong with that request. Please try again.