04.02.2013 Views

Spry User Guide - Support - Adobe

Spry User Guide - Support - Adobe

Spry User Guide - Support - Adobe

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

2 Locate the <strong>Spry</strong>ValidationTextarea.css file and add it to your web site. You might choose to add it to the main<br />

directory, a <strong>Spry</strong>Assets directory, or to a CSS directory if you have one.<br />

3 Open the web page to add the Text Area widget to and link the <strong>Spry</strong>ValidationTextarea.js file to the page by<br />

inserting the following script tag in the page’s head tag:<br />

<br />

Make sure that the file path to the <strong>Spry</strong>ValidationTextarea.js file is correct. This path varies depending on where<br />

you’ve placed the file in your web site.<br />

4 Link the <strong>Spry</strong>ValidationTextarea.css file to your web page by inserting the following link tag in the page’s head tag:<br />

<br />

Make sure that the file path to the <strong>Spry</strong>ValidationTextarea.css file is correct. This path varies depending on where<br />

you’ve placed the file in your web site.<br />

5 Add a text area to the page and give it a name and a unique ID:<br />

<br />

6 Add a container around the text area by inserting span tags around the tags, and assigning the widget<br />

a unique ID, as follows:<br />

<br />

<br />

<br />

7 Initialize the text area object by inserting the following script block after the HTML code for the widget:<br />

<br />

var sprytextarea1 = new <strong>Spry</strong>.Widget.ValidationTextarea("sprytextarea1");<br />

<br />

The new JavaScript operator initializes the Text Area widget object, and transforms the span tag content with the ID<br />

of sprytextarea1 from static HTML code into an interactive text field object. The <strong>Spry</strong>.Widget.ValidationTextarea<br />

method is a constructor in the <strong>Spry</strong> framework that creates text area objects. The information necessary to initialize<br />

the object is contained in the JavaScript library, <strong>Spry</strong>ValidationTextarea.js, that you linked to at the beginning of this<br />

procedure.<br />

Make sure that the ID of the text area’s container span tag matches the ID parameter you specified in the<br />

<strong>Spry</strong>.Widgets.ValidationTextarea method. Make sure that the JavaScript call comes after the HTML code for the<br />

widget.<br />

8 Save the page.<br />

The complete code looks as follows:<br />

SPRY<br />

<strong>User</strong> <strong>Guide</strong><br />

69

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!