Dreamweaver Help Title - Working with the Spry Tabbed Panels
Home       
 

A Tabbed Panels  is a set of panels that can store content in a compact space. Site viewers hide or reveal the content stored in the Tabbed Panels by clicking the tab of the panel they want to access. The panels  open accordingly as the visitor clicks different tabs. In a Tabbed Panels , only one content panel is open at a given time. The following example shows a Tabbed Panels , with the third panel open:

A. Tab B. Content C. Tabbed Panels  D. Tabbed panel 

The HTML code for the Tabbed Panels  comprises an outer div tag that contains all of the panels, a list for the tabs, a div to contain the content panels, and a div for each content panel. The HTML for the Tabbed Panels  also includes script tags in the head of the document and after the Tabbed Panel ’s HTML markup.

 

Insert and edit the Tabbed Panels 

Insert the Tabbed Panels 

  • Select Insert > Spry > Spry Tabbed Panels.

Note:

You can also insert a Tabbed Panels  by using the Spry category in the Insert panel.

Add a panel to a Tabbed Panels 

  1. Select a Tabbed Panels  in the Document window.
  2. Click the Panels plus button in the Property inspector (Window > Properties).
  3. (Optional) Change the tab name by selecting the tab’s text in Design view and altering it.

Delete a panel from a Tabbed Panels 

  1. Select a Tabbed Panels  in the Document window.
  2. In the Panels menu of the Property inspector (Window > Properties), select the name of the panel you want to delete and click the minus button.

Open a panel for editing

  • Do one of the following:
    • Move the mouse pointer over the tab of the panel you want to open in Design view and click the eye icon that appears at the right of the tab.

    • Select a Tabbed Panels  in the Document window and click the name of the panel you want to edit in the Panels menu of the Property inspector (Window > Properties).

Change the order of panels

  1. Select a Tabbed Panels  in the Document window.
  2. In the Panels menu of the Property inspector (Window > Properties), select the name of the panel you want to move.
  3. Click the up or down arrows to move the panel up or down.

Set the default open panel

You can set which panel of the Tabbed Panels  opens by default when the page opens in a browser.

  1. Select a Tabbed Panels  in the Document window.
  2. In the Property inspector (Window > Properties), select the panel you want open by default from the Default panel pop-up menu.

Customize the Tabbed Panels 

Although the Property inspector enables you to make simple edits to a Tabbed Panels , it does not support customized styling tasks. You can alter the CSS rules for the Tabbed Panels.

All CSS rules in the topics below refer to the default rules located in the SpryTabbedPanels.css file. Dreamweaver saves the SpryTabbedPanels.css file in the SpryAssets folder of your site whenever you create a Spry Tabbed Panels . This file also contains useful commented information about various styles that apply.

Although you can easily edit rules for the Tabbed Panels  directly in the accompanying CSS file, you can also use the CSS Styles panel to edit the Tabbed’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the Tabbed, especially if you use the panel’s Current mode.

Style Tabbed Panels  text

You can style the text of a Tabbed Panels  by setting properties for the entire Tabbed Panels  container, or by setting properties for the components of the Tabbed individually.

  • To change the text styling of a Tabbed Panels , use the following table to locate the appropriate CSS rule, and then add your own text styling properties and values:

    Text to change

    Relevant CSS rule

    Example of properties and values to add

    Text in the entire Tabbed

    .TabbedPanels

    font: Arial; font-size:medium;

    Text in panel tabs only

    .TabbedPanelsTabGroup or .TabbedPanelsTab

    font: Arial; font-size:medium;

    Text in content panels only

    .TabbedPanelsContentGroup or .TabbedPanelsContent

    font: Arial; font-size:medium;

Change Tabbed Panels  background colors

  • To change the background colors of different parts of a Tabbed Panels , use the following table to locate the appropriate CSS rule, and then add or change background color properties and values to your liking:

    Color to change

    Relevant CSS rule

    Example of property and value to add or change

    Background color of panel tabs

    .TabbedPanelsTabGroup or .TabbedPanelsTab

    background-color: #DDD; (This is the default value.)

    Background color of content panels

    .Tabbed PanelsContentGroup or .TabbedPanelsContent

    background-color: #EEE; (This is the default value.)

    Background color of selected tab

    .TabbedPanelsTabSelected

    background-color: #EEE; (This is the default value.)

    Background color of panel tabs when the mouse pointer moves over them

    .TabbedPanelsTabHover

    background-color: #CCC; (This is the default value.)

Constrain the width of tabbed panels

By default, the Tabbed Panels  expands to fill available space. You can constrain the width of a Tabbed Panels , however, by setting a width property for the accordion container.

  1. Locate the .TabbedPanels CSS rule by opening the SpryTabbedPanels.css file. This rule defines properties for the main container element of the Tabbed Panels .

    You can also locate the rule by selecting the Tabbed Panels , and looking in the CSS Styles panel (Window > CSS Styles). Make sure the panel is set to Current mode.

  2. Add a width property and value to the rule, for example width: 300px;.
@ pure software code