16 16 Using Spry Widgets and Effects Introduction The Spry framework is a JavaScript library that allows you to use built-in HTML, CSS, and JavaScript code to create widg-ets, add speci
Trang 116
16
Using Spry Widgets and
Effects
Introduction
The Spry framework is a JavaScript library that allows you to
use built-in HTML, CSS, and JavaScript code to create
widg-ets, add special effects, and integrate HTML or XML data in
your Web pages
A spry widget is a page element, such as a menu bar,
tabbed or collapsible panels, or form validation, that provides
added functionality without all the scripting A widget
con-sists of three different parts: structure, behavior, and styling
A widget structure is HTML code that defines the structure of
the widget A widget behavior is JavaScript that specifies
what happens to a widget when an event occurs Widget
styling is CSS code that determines the look of the widget
You can insert a built-in spry widget, Dreamweaver takes
care of all three aspects of the widget It provides the HTML,
CSS, and JavaScript as well as the style of the widget, which
you can modify to suit your own needs For example, you
can edit menu items, modify panels, and change the
appear-ance of the page The CSS and JavaScript files related to the
widget are named with the same name as the spry widget,
and stored in a SpryAssets folder in your site
Dreamweaver also includes built-in spry effects that allow
you to apply visual effects, such as highlighting information
or creating transitions, to elements on a page You can apply
one or more effects, such as a fade, highlight, blind up and
down, slide up and down, grow and shrink, shake, and
squish, to create a dynamic user experience
In this chapter you'll learn how to insert and work with
spry widgets, and add spry effects to elements on your Web
pages with minimal or no knowledge of JavaScript If you
have a strong knowledge of JavaScript you can create your
own spry widgets or effects
What You’ll Do
Insert Spry Widgets Select and Edit Spry Widgets Work with Spry Panel Widgets Work with Spry Validation Widgets Work with Spry Menu Bar Widgets Create a Spry Tooltip
Display Spry Data Sets Create a Spry Region Create a Spry Repeat List Customize a Spry Widget Add and Remove Spry Effects Check Out Spry Samples
Trang 2Inserting Spry
Widgets
Insert a Spry Widget
Open the Web page you want to
insert a spry widget
Click to place the insertion point
where you want to insert the spry
widget
Click the Spry tab on the Insert
panel, or click the Insert menu,
and then point to Spry.
Click the spry widget you want
to insert:
◆ Spry Data Set Access HTML or
XML data for regions, tables, or
lists
◆ Spry Region Creates an area to
wrap around objects, such as
tables and repeat lists
◆ Spry Repeat Creates a
duplicate region
◆ Spry Repeat List Creates an
ordered, unordered, definition
list, or drop-down list
◆ Spry Validation Create form
validation for a text field or
area, check box, password,
confirm, or radio group
◆ Spry Menu Bar Creates a set of
navigational menu buttons
4
3
2
1
Dreamweaver provides a wide variety of spry widgets you can insert in your Web pages Some of the widgets include page region definition, tables, menu bars, form validation, and panels to store data in a com-pact space When you insert a spry widget, Dreamweaver creates a SpryAssets folder (on first use) in your local root site to store the widget, data, and any spry effects The CSS and JavaScript files related with the widget are named with the same name as the spry widget and also stored in a SpryAssets folder If you want (which is not recom-mended), you can change the default folder location where Dreamweaver saves and stores your spry assets
3
1
Downloading Spry Files Before You Begin
Before you add Spry widgets, you need to download and link the lat-est required Spry Framework files from the Adobe Labs Web site (http://labs.adobe.com/technologies/spry/) Unzip the Spry Framework files into the SpryAssets folder on your local root site You can put all
the files (includes great samples) to the SpryAssets to make sure you
have everything If space is tight, make sure you copy the includes and widgets folders, and the SpryData.js, SpryEffect.js, and xpath.js
For Your Information
Trang 3◆ Spry Tabbed Panels Creates a
set of panels to store data in a
compact space
◆ Spry Accordion Creates a set
of collapsible panels to store
large amounts of data in a
compact space
◆ Spry Collapsible Panel Creates
a set of collapsible panels to
store data in a compact space
◆ Spry Tooltip Creates a tooltip
for page elements
If prompted, specify widget or
input tag accessibility attribute
options; the widget options vary
depending on the widget
Click OK If prompted, click Yes or
No to add a form tag.
Change the Default Spry Assets
Folder
Click the Sites menu, and then
click Manage Sites.
Select the site you want to
change, and then click Edit.
Click the Advanced Settings
category
Click the Spry category.
Enter a path and folder name to
the location where you want to
store spry assets, or click the
Browse For Folder icon to select a
folder location
Click Save, and then click OK to
cache files, if necessary
Click Done to close the Manage
Sites dialog box
7
6
5
4
3
2
1
6
5
3
5
Trang 4After you insert a spry widget, you can select and edit the widget to customize it for your specific needs You can edit the parameters and options for a spry widget or modify the style, or appearance, of a spry widget using CSS Before you can edit a spry widget, you need to select it first by pointing to the widget until you see the widget’s blue tabbed outline and then clicking the widget’s tab in the upper left corner
Selecting and Editing
Spry Widgets
Select and Edit a Spry Widget
Open the Web page with the spry
widget you want to edit
Point to the widget until you see
the blue tabbed outline, and then
click the widget tab to select it
Click the Window menu, and then
click Properties to display the
Properties panel
Specify the options you want in
the Properties panel for the
selected widget; the options vary
depending on the widget you
select
Make changes to the content of
the widget in the Design window
5
4
3
2
4
Did You Know?
You can edit the style of a spry widget
in the related CSS file You can open
the CSS file located in the SpryAssets
folder, make the changes you want,
and then save it, or open the CSS panel
and change the CSS styles for the spry
widget
Trang 5Change the Appearance of a
Spry Widget
Open the Web page with the spry
widget you want to edit
Click in the part of the spry widget
you want to change
Click the Window menu, and then
click Properties to display the
Properties panel
Specify the options you want in
the Properties panel for the
selected widget
◆ Widget Specify the settings
you want for the selected
widget For example, for a
selected text field, you can
specify name, character width,
maximum characters, type,
class, or initial value
◆ CSS Click CSS to change
cascading style sheet options
in the CSS Styles panel Click
the Target Rule list arrow to
change the current style
◆ HTML Click HTML and then
use the normal formatting
options, such as: Format, Font,
Size, Bold, Italic, and alignment
and spacing buttons
4
3
2
1
3
2 1
4
CSS HTML Widget: TextField
Trang 6Working with Spry
Panel Widgets
Insert and Work with Spry Panel
Widgets
Open the Web page you want to
insert a spry widget, and then click
to place the insertion point where
you want it
Click the Spry tab on the Insert
panel, or click the Insert menu,
point to Spry, and then select the
spry panel element you want:
◆ Spry Tabbed Panels Creates a
set of panels to store data in a
compact space
◆ Spry Accordion Creates a set
of collapsible panels to store
large amounts of data in a
compact space
◆ Spry Collapsible Panel Creates
a set of collapsible panels to
store data in a compact space
Select the panel widget
Point to a tab, click the eye icon (if
available) to edit the panel
contents, or select the panel
contents and edit it
Click the Window menu, and then
click Properties to display the
Properties panel
5
4
3
2
1
A spry panel widget allows you to store content in a compact space using tabs Dreamweaver provides three different types of spry panels:
accordion, collapsible, and tabbed Each spry panel type provides a tab-like interface that displays content when a visitor clicks a tab The differences between the spry panel types lies in the display and style of the tabs If you have a large amount of content, the accordion panel is your best bet Try each one to see which one works best with the con-tent you want to display
2