Graphics Reference
In-Depth Information
Figure 7.3
jQuery UI offers a variety of components.
You can try them out on the jqueryui.
com website.
7.1.4 jQuery UI Components
Many projects require more complex data entry components for forms or other
features. Since the first version of Edge Animate does not offer any compo-
nents of this type, we have to rely on external component libraries. Since Edge
Animate already includes the jQuery framework, look for the extension in the
jQuery UI components to keep the overall composition as lean as possible. The
following example shows the use of jQuery UI in an Edge Animate composition.
First off, two containers are created and filled via the
html()
method with a
simple text input field. The second one is also assigned an additional unique
ID. The yepnope function outlined above is used to load the minified version
of the jQuery UI and its style sheet. In this example, we are assuming that both
files were previously downloaded from the jQuery UI website and have been
stored in the
libs
folder of our Edge Animate project. Alternatively, you can
also use online versions of the jQuery CDN server (http://code.jquery.com/).
Once both files have been loaded, the text box with the
datepickerID
creat-
ed earlier is converted into an input field for a date with the jQuery statement
$(“# datepicker”). datepicker()
. The final code looks as follows and
can be used, for example, in the
compositionReady
event of the composition:
// Simple Input (1)
var ex1 = sym.$( "example1" );
ex1.html( '<input type="text" />' );
// Datepicker (2)
var ex2 = sym.$( "example2" );
ex2.html( '<input type="text« id="datepicker" />' );
// Load jQuery
yepnope({
both: [
