Working with spry widgets (general instructions) – Adobe Dreamweaver CC 2014 v.13 User Manual
Page 279
Working with Spry widgets (general instructions)
About Spry widgets
Spry widgets resources and tutorials
Insert a Spry widget
Select a Spry widget
Edit a Spry widget
Style a Spry widget
Get more widgets
Change the default Spry assets folder
Note: Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your
page, you cannot add new spry widgets.
About Spry widgets
A Spry widget is a page element that provides a richer user experience by enabling user interaction. A Spry widget comprises the following parts:
Widget structure An HTML code block that defines the structural composition of the widget.
Widget behavior JavaScript that controls how the widget responds to user-initiated events.
Widget styling CSS that specifies the appearance of the widget.
The Spry framework supports a set of reusable widgets written in standard HTML, CSS, and JavaScript. You can easily insert these widgets—the
code is HTML and CSS at its simplest—and then style the widget. The behaviors in the framework include functionality that lets users show or
hide content on the page, change the appearance (such as color) of the page, interact with menu items, and much more.
Each widget in the Spry framework is associated with unique CSS and JavaScript files. The CSS file contains everything necessary for styling the
widget, and the JavaScript file gives the widget its functionality. When you insert a widget by using the Dreamweaver interface, Dreamweaver
automatically links these files to your page so that your widget contains functionality and styling.
The CSS and JavaScript files associated with a given widget are named after the widget, so it’s easy for you to know which files correspond to
which widgets. (For example, the files associated with the Accordion widget are called SpryAccordion.css and SpryAccordion.js). When you insert
a widget in a saved page, Dreamweaver creates a SpryAssets directory in your site, and saves the corresponding JavaScript and CSS files to that
location.
Spry widgets resources and tutorials
The following on-line resources provide more information on customizing Spry widgets.
Insert a Spry widget
Select Insert > Spry, and select the widget to insert.
When you insert a widget, Dreamweaver automatically includes the necessary Spry JavaScript and CSS files in your site when you save the page.
Note: You can also insert Spry widgets by using the Spry category in the Insert panel.
Select a Spry widget
1. Hold the mouse pointer over the widget until you see the widget’s blue tabbed outline.
2. Click the widget’s tab at the upper-left corner of the widget.
Edit a Spry widget
Select the widget to edit and make your changes in the Property inspector (Window > Properties).
For details on making changes to specific widgets, see the appropriate sections for each widget.
272