-
Notifications
You must be signed in to change notification settings - Fork 486
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
jQuery UI: Adding guide to using jQuery UI with AMD. #462
Closed
Closed
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next
Next commit
jQuery UI: Adding guide to using jQuery UI with AMD.
- Loading branch information
commit cbb1ef77513b625d212e939b512811c096a3710e
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
title: Using jQuery UI | ||
level: intermediate | ||
--- | ||
|
||
In addition to being available on [CDN](http://code.jquery.com/)s and [Download Builder](http://jqueryui.com/download/), jQuery UI also integrates into a number of development environments. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,123 @@ | ||
--- | ||
title: Using jQuery UI with AMD | ||
level: intermediate | ||
--- | ||
|
||
As of jQuery UI 1.11, all of the library's source files support using AMD. This means that you can manage your jQuery UI dependencies without using [Download Builder](http://jqueryui.com/download/), and load jQuery UI's source files asynchronously using an AMD loader such as [RequireJS](http://requirejs.org/). | ||
|
||
In this article we'll walk through the process of using AMD with jQuery UI. Let's start by discussing the files we'll need. | ||
|
||
### Requirements | ||
|
||
We'll need to download three things to get up and running: jQuery core, jQuery UI, and an AMD loader. | ||
|
||
While any AMD loader will work, we'll use RequireJS in this article, which you can download from <http://requirejs.org/docs/download.html>. If you don't have a version of jQuery core handy, you can get it from <http://jquery.com/download/>, and you can download jQuery UI directly from <http://jqueryui.com/>. | ||
|
||
### Directory Structure | ||
|
||
Now that we have the files we need, we have to discuss where to place them. For this tutorial, we'll build a small application that uses the following directory structure. | ||
|
||
<pre> | ||
├── index.html | ||
├── js | ||
│ ├── app.js | ||
│ ├── jquery-ui | ||
│ │ ├── accordion.js | ||
│ │ ├── autocomplete.js | ||
│ │ ├── button.js | ||
│ │ ├── core.js | ||
│ │ ├── datepicker.js | ||
│ │ ├── dialog.js | ||
│ │ └── ... | ||
│ ├── jquery.js | ||
│ └── require.js | ||
</pre> | ||
|
||
As you can see, we're placing all JavaScript files in a `js` directory. `jquery.js` and `require.js` are direct children of `js`, and all of jQuery UI's files are within a `jquery-ui` directory. `app.js` will contain our application code. | ||
|
||
With RequireJS you're free to use any directory structure you'd like, but with alternative structures you'll have to [change some configuration](http://requirejs.org/docs/api.html#config) so RequireJS knows how to find your dependencies. | ||
|
||
### Loading the Application | ||
|
||
Now that we have the files in place, let's use them. Here are the contents of our app's `index.html` file. | ||
|
||
``` | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
... | ||
</head> | ||
<body> | ||
|
||
<script src="js/require.js" data-main="js/app"></script> | ||
|
||
</body> | ||
</html> | ||
``` | ||
|
||
`require.js` is loaded in a `<script>` tag, which [by convention](http://requirejs.org/docs/start.html) asynchronously loads and executes the file specified in the `data-main` attribute - in this case `js/app.js`. If you put a `console.log()` statement in `app.js`, you can verify that it loads appropriately. | ||
|
||
``` | ||
/* app.js */ | ||
console.log( "loaded" ); | ||
``` | ||
|
||
Our boilerplate is now in place. Next, we have to load jQuery and jQuery UI. | ||
|
||
### Requiring jQuery and jQuery UI | ||
|
||
The `require()` function is AMD's mechanism for specifying and loading dependencies; therefore, we can add one to our `app.js` file to load the necessary files. The following loads jQuery UI's autocomplete widget. | ||
|
||
``` | ||
require([ "jquery-ui/autocomplete" ], function( autocomplete ) { | ||
... | ||
}); | ||
``` | ||
|
||
When this code executes, RequireJS asynchronously loads `jquery-ui/autocomplete.js` as well as its dependencies: jQuery core (`jquery.js`), jQuery UI core (`jquery-ui/core.js`), the widget factory (`jquery-ui/widget.js`), the position utility (`jquery-ui/position.js`), and the menu widget (`jquery-ui/menu.js`). | ||
|
||
When all dependencies are resolved and loaded, RequireJS invokes the callback function. | ||
|
||
### Using jQuery UI's Files | ||
|
||
All widgets built with the widget factory expose their constructor function when required with AMD; therefore we can use them to instantiate widgets on elements. The following creates a new `<input>`, initializes an autocomplete widget on it, then appends it to the `<body>`. | ||
|
||
``` | ||
require([ "jquery-ui/autocomplete" ], function( autocomplete ) { | ||
autocomplete({ source: [ "One", "Two", "Three" ] }, "<input>" ) | ||
.element | ||
.appendTo( "body" ); | ||
}); | ||
``` | ||
|
||
Each widget's constructor function takes two arguments: the widget's options, and the element to initialize the widget on. Each widget has a default element that is used if no element is provided, which is stored at `$.namespace.widgetName.prototype.defaultElement`. Because `$.ui.autocomplete.prototype.defaultElement` is `<input>`, we can omit the second argument in our autocomplete example. | ||
|
||
``` | ||
require([ "jquery-ui/autocomplete" ], function( autocomplete ) { | ||
autocomplete({ source: [ "One", "Two", "Three" ] }) | ||
.element | ||
.appendTo( "body" ); | ||
}); | ||
``` | ||
|
||
Even though we're loading jQuery UI's files with AMD, the files' plugins are still added to the global `jQuery` and `$` objects; therefore you can alternatively use the plugins to instantiate widgets. The following also creates the same autocomplete. | ||
|
||
``` | ||
require([ "jquery", "jquery-ui/autocomplete" ], function( $ ) { | ||
$( "<input>" ) | ||
.autocomplete({ source: [ "One", "Two", "Three" ]}) | ||
.appendTo( "body" ); | ||
}); | ||
``` | ||
|
||
### Datepicker | ||
|
||
Since jQuery UI's datepicker widget is the only jQuery UI widget not built with the widget factory, it does not return a constructor function when required with AMD. Because of this, it's best to stick with datepicker's plugin to instantiate datepicker instances. The following requires datepicker, then uses its plugin to instantiate a datepicker instance on a newly created `<input>`. | ||
|
||
``` | ||
require([ "jquery", "jquery-ui/datepicker" ], function( $ ) { | ||
$( "<input>" ) | ||
.appendTo( "body" ) | ||
.datepicker(); | ||
}); | ||
``` |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should add another article about using Bower and link to that from here.