HTML
Splash!
PostScript
  
Template Toolkit Examples: Splash! Library: Boxes with Tab Sets

  tabset
tabsbox
dropbox  

Boxes with Tab Sets

The splash/tabsbox template generates a set of tabs attached to a box.

Source #1:
    [%  tabs = [
     	{ link => '#wait',  text => 'Wait'  }
     	{ link => '#meet',  text => 'Meet'  }
     	{ link => '#shade', text => 'Shade' }
        ]
    %]
    
    [% WRAPPER splash/tabsbox %]
    
    <h3>A Pattern Language</h3>
    
    More extracts taken from 'A Pattern Language'
    by Christopher Alexander, et al.
    <br>
    Oxford University Press, 1977,
    ISBN 0-19-501919-9
    
    [% END %]
    
Output #1:

Wait
Meet
Shade

A Pattern Language

More extracts taken from 'A Pattern Language' by Christopher Alexander, et al.
Oxford University Press, 1977, ISBN 0-19-501919-9


Source #2:
    <a name="wait"> </a>
    
    [% WRAPPER splash/tabsbox select=1 %]
    
    <h3>A Place to Wait</h3>
    
    In places where people end up waiting
    (for a bus, for an appointment, for a
    plane), create a situation which makes
    the waiting positive. Fuse the waiting
    with some other activity - newspaper, 
    coffee, pool tables, horseshoes; 
    something which draws people in who 
    are not simply waiting.
    
    [% END %]
    
    
Output #2:

Wait
Meet
Shade

A Place to Wait

In places where people end up waiting (for a bus, for an appointment, for a plane), create a situation which makes the waiting positive. Fuse the waiting with some other activity - newspaper, coffee, pool tables, horseshoes; something which draws people in who are not simply waiting.


Source #3:
    <a name="meet"> </a>
    
    [% WRAPPER splash/tabsbox 
         select = 2
         width  = '80%'
         fill   = 'grey75'
         pad    = 10
         tablocate = 'center'
    %]
    
    <h3>Small Meeting Rooms</h3>
    
    The larger meetings are, the less people
    get out of them.  But institutions often
    put their money and attention into large
    meeting rooms and lecture halls.
    
    [% END %]
    
Output #3:

Wait
Meet
Shade

Small Meeting Rooms

The larger meetings are, the less people get out of them. But institutions often put their money and attention into large meeting rooms and lecture halls.


Source #4:
    <a name="shade"> </a>
    
    [% WRAPPER splash/tabsbox 
         select = 3
         border = 1
         invert = 1
         pad    = 10
    %]
    
    <h3>Tapestry of Light and Dark</h3>
    
    Create alternating areas of light and dark 
    throughout the building, in such a way that 
    people naturally walk toward the light,
    whenever they are going to important places:
    seats, entrances, stairs, passages, places of
    special beauty, and make other areas darker,
    to increase the contrast.
    
    [% END %]
    
Output #4:

Tapestry of Light and Dark

Create alternating areas of light and dark throughout the building, in such a way that people naturally walk toward the light, whenever they are going to important places: seats, entrances, stairs, passages, places of special beauty, and make other areas darker, to increase the contrast.
Wait
Meet
Shade