Book IV 2 in Java

Painting QR Code ISO/IEC18004 in Java Book IV 2

Spry Collapsible Panel: A single collapsible panel that can contain a large amount of content in a small defined space Visitors can expand and collapse the panel by clicking on the panel s tab Spry Tooltip: Provides tool tips to visitors when they hover their mouse over a particular object or bit of text on the Web page Tips disappear when the visitors move their mouse away from the object that triggered the tooltip To use these widgets, start by inserting a Spry widget into your page, like the ones shown in Figure 2-26 After the widget is inserted, you can modify how it works by adding customized content, and, if you like, by editing the look and feel of how the widget appears in the browser, as all of the Spry widgets are styled with an external CSS file Each time you insert a Spry widget into your page, a corresponding CSS file (such as SpryAssets/SpryTabbedPanelscss) and JavaScript file (such as SpryAssets/SpryTabbedPanelsjs) is added to the root level of your managed site inside a folder called SpryAssets Sometimes, the widget may include graphics too, and those are also automatically added to the SpryAssets folder You must upload this folder and its contents along with the page containing the Spry widget to the host server for the widget to function properly All of the general Spry Widgets listed in the preceding section can be inserted on to your pages in the same way After insertion, you can customize them with your own data and modify their styles through the CSS Styles panel

To insert a Spry Menu Bar, Spry Tabbed Panel, Spry Accordion panel, Spry Collapsible Panel, or Spry Tooltip onto your page, follow these steps:

Insert panel When inserting the Spry Menu Bar, you are prompted to select either a Horizontal or Vertical layout before Dreamweaver adds the code to the page For all other widgets, the code is automatically inserted onto the page

Design view), use the Properties inspector to customize the widget By default, the widget is generically named (such as sprytooltip1 or Accordion2); however, you can change the name, which appears as the widget s id attribute, on the Properties inspector, and Dreamweaver updates all instances of the widget on the linked JavaScript and CSS files

Spry Menu Bar: Add, remove, label, and reorder menu and submenu items, and add links, link title, and link targets Spry Tabbed Panel: Add, remove, label, and reorder tabs, set the default panel that is opened when the page loads, and add content to each of the tab panels Spry Accordion: Add, remove, label, and reorder tabs on the accordion and add content to each of the tab panels Spry Collapsible Panel: Label and add content to the panel, set the panel display and default state to open or closed, and enable or disable panel animation Spry Tooltip: Customize trigger and tooltip content, specify the trigger from a menu of all elements on the page with id attributes, set the horizontal and vertical offset, hide and show delay, special effect (none, blind, fade), and whether the tip should follow the mouse or hide on mouse out

The CSS files for each of the widgets are listed in the CSS Styles panel Finding the right one to edit, however, may be a bit difficult without Dreamweaver s Help File documentation Here s a listing of all the links for customizing each of the widgets:

wwwadobecom/go/learn_dw_sprymenubar_custom wwwadobecom/go/learn_dw_sprytabbedpanels_custom wwwadobecom/go/learn_dw_spryaccordion_custom wwwadobecom/go/learn_dw_sprycollapsiblepanel_custom

To customize the style of the Spry Tooltip widget, expand the SpryTooltipcss listed in the CSS Styles panel and make adjustments, as desired, to the iframeTooltip and tooltipContent styles For more information about Spry Framework for Ajax, see Adobe s Online Developers Guide at http://livedocsadobecom/en_US/Spry/SDG/ indexhtml, where you can discover more about Spry widgets and effects, Spry data sets, and building dynamic pages with Spry You can also find helpful tutorials on the Spry Framework for Ajax Technology Center at www adobecom/devnet/spry/ and informative video tutorials at wwwadobe com/designcenter/video_workshop/