Template:Dropbox

From Wikibooks, open books for an open world
Jump to: navigation, search
{{{1}}}
{{{2}}}



Usage[edit]

Template name: DROPBOX (currently identical functionality to DROPIMAGE). Place text for a heading in parameter one position. Place definitions for images, galleries, text, or an HTML table in parameter two position. The content hides initially in the collapsed state, and drops when the link button is clicked. The link toggles to collapse and expand the drop control.

The initial width of the control is not necessarily the dropped width, since the control expands to display the contents. The width option sets the initial width. the drop contents can contain links. The template can be nested.

Three simple examples of its use, with results, are shown:

Image example code:

{{dropimage|width=100px|align=left|Image|[[image:Primula_aka.jpg|thumb|300px|center]]'''Primula'''   :
    [http://en.wikipedia.org/wiki/Primula ''Main article.'']}}
Image
Primula aka.jpg
Primula  :     Main article.



Gallery example code:

{{dropimage|width=100px|align=center|Gallery|<gallery Caption="Gallery Markup Code Example">
Image:Jonquil flowers06.jpg|Jonquil
Image:Chamomile@original size.jpg|Chamomile
Image:2006-10-18Dahlia03m.jpg|Dahlia
Image:Galanthus nivalis close-up aka.jpg|Galanthus
Image:Tulip - floriade canberra.jpg|Tulip
Image:Krokus-kih.jpg|Crocus
Image:Nymphaea tetragona.jpg|Nymphaea Tetragona 
Image:Primula aka.jpg|[http://en.wikipedia.org/wiki/Primula Primula]
</gallery>}}
Gallery



Text box example code:

{{dropimage|width=100px|align=right|Text|<pre>Drop-down Images

For all the space saving qualities of the gallery,
it can be useful to save even more. If space is at
a premium, and there are just too many images to show,
then an image or even a  gallery o images can be tucked
away in a drop-down box. The display will appear
when the bar is clicked with the mouse; clicking it
again closes the gallery and restores the page to a
more tidy state.</pre>}}
Text
Drop-down Images

For all the space saving qualities of the gallery,
it can be useful to save even more. If space is at
a premium, and there are just too many images to show,
then an image or even a gallery of images can be tucked
away in a drop-down box.   The display will appear when
the bar is clicked with the mouse; clicking it again
closes the gallery and restores the page to a more
tidy state.
Drop-down gallery examples



HTML Table Example Code:

<!-- This is the code for an HTML table within a drop-control-->  
{{dropimage
| cp= 10px 0 30px 10px
| chta=center
| 1=HTML Table Example
| 2=<table class="wikitable" width=800px align=center style="text-align:left;background:lightyellow;color:maroon;">
<caption style="color:black;font-weight:normal;font-size:12pt">This is the table caption.</caption>
<tr>
 <th style="background:papayawhip;color:black;">Description</th>
 <th style="background:papayawhip;color:black;">Column Heading 1</th>
 <th style="background:papayawhip;color:black;">Column Heading 2</th>
</tr>
<tr>
 <th style="background:papayawhip;color:black;">Heading 1</th>
 <td>{{text}}</td>
 <td>{{text}}</td>
</tr>
<tr>
 <th style="background:papayawhip;color:black;">Heading 2</th>
 <td>{{text}}</td>
 <td>{{text}}</td>
</tr>
<tr>
 <th style="background:papayawhip;color:black;">Heading 3</th>
 <td>{{text}}</td>
 <td>{{text}}</td>
</tr>
<tr>
 <th style="background:papayawhip;color:black;">Heading 4</th>
 <td>{{text}}</td>
 <td>{{text}}</td>
</tr>
</table>
}}
HTML Table Example
This is the table caption.
Description Column Heading 1 Column Heading 2
Heading 1 The time has come for all good men to come to the aid of the party. The quick brown fox jumps over the lazy dog 0123456789 times. Of all the fishes in the sea the mermaid is the one for me. Peter Piper picked a pot of pickled pepper. The Leith police inhibiteth us. The time has come for all good men to come to the aid of the party. The quick brown fox jumps over the lazy dog 0123456789 times. Of all the fishes in the sea the mermaid is the one for me. Peter Piper picked a pot of pickled pepper. The Leith police inhibiteth us.
Heading 2 The time has come for all good men to come to the aid of the party. The quick brown fox jumps over the lazy dog 0123456789 times. Of all the fishes in the sea the mermaid is the one for me. Peter Piper picked a pot of pickled pepper. The Leith police inhibiteth us. The time has come for all good men to come to the aid of the party. The quick brown fox jumps over the lazy dog 0123456789 times. Of all the fishes in the sea the mermaid is the one for me. Peter Piper picked a pot of pickled pepper. The Leith police inhibiteth us.
Heading 3 The time has come for all good men to come to the aid of the party. The quick brown fox jumps over the lazy dog 0123456789 times. Of all the fishes in the sea the mermaid is the one for me. Peter Piper picked a pot of pickled pepper. The Leith police inhibiteth us. The time has come for all good men to come to the aid of the party. The quick brown fox jumps over the lazy dog 0123456789 times. Of all the fishes in the sea the mermaid is the one for me. Peter Piper picked a pot of pickled pepper. The Leith police inhibiteth us.
Heading 4 The time has come for all good men to come to the aid of the party. The quick brown fox jumps over the lazy dog 0123456789 times. Of all the fishes in the sea the mermaid is the one for me. Peter Piper picked a pot of pickled pepper. The Leith police inhibiteth us. The time has come for all good men to come to the aid of the party. The quick brown fox jumps over the lazy dog 0123456789 times. Of all the fishes in the sea the mermaid is the one for me. Peter Piper picked a pot of pickled pepper. The Leith police inhibiteth us.



Limitations[edit]

The width option sets the ititial width of the control. It expands on opening, and has been observed to involve some overlap of adjacent structures. This can be avoided by care in basic layout. The width option should be set to avoid an overtight fitting of the caption.

Attempts at setting the vertical text alignment have so-far failed.

The content cannot be a Wikitext table, since the pipe symbols confuse the code; use an HTML table instead.

Bear in mind that the use of <pre></pre> tags will be needed for verbatim text layout, and if the block of text itself has these same tags within it, that the literals should be used to replace the ones within the text. (ie: use these instead; &lt;pre&gt; and &lt;/pre&gt;). This avoids the corrupted functioning which would otherwise result.

Options[edit]

Container[edit]

width
initial width of the container, (collapsed), not including borders (default 300px)
align
horizontal alignment of container (default left)
border
the container border (default 1px solid black)
padding
the padding for the container (default 0px)
background
the background color of the container,(seen for padding > 0px), (default white)
margin
the container margin (default 10px 10px 10px 10px)

Heading[edit]

hff
heading font family (face) (default Arial)
hfs
heading font size (default 10pt)
hfw
heading font weight(default normal)
hbgc
heading background color (default white)
hfc
heading font color; (default black)
hhta
heading horizontal text alignment (default center)
hp
heading text padding (default 5px)

Content[edit]

cff
content font family (face) (default Arial)
cfs
content font size (default 10pt)
cfw
content text font weight(default bold)
cbgc
content background color (default white)
cfc
content font color; (default black)
chta
content horizontal text alignment (default center)
cp
content text padding (default 10px)
clh
content line-height (default normal)
cws
content word-spacing (default normal)
cls
content letter-spacing (default normal)