The Tab Panel Magic Booklet
PVII is the leader in creative extensions for Dreamweaver.
More Tab Panel Examples and Tutorials | Tab Panel Magic Home
About this tutorial
We're going to design a Tab Panel Magic widget that looks like a booklet. To complete this tutorial you will need the latest version of Tab Panel Magic 2, so please check your version and update if necessary.
Once you complete the booklet, there is an optional section that will show you how to launch it in a popup box powered by PVII Tooltip Magic.
See the finished widget Live
Of course, you'll want to see what you will be building so click the link below to see the magic booklet. The booklet will launch inside a PVII Tooltip, which you'll learn how to do in the optional last section of this tutorial.
1. Download the magic-booklet folder
We've prepared a folder for you to use while taking this tutorial.
Download the magic-booklet folder now
Unzip the folder and copy it to your defined Dreamweaver Web site. This is what the folder looks like:
2. Create your Tab Panel Widget
Open the booklet.htm page, which should look like this:
Place your cursor inside the placeholder text Insert Tab Panel Here and switch to Code View.
<div id="book_wrapper">
<div class="book_inner">
<div class="book_left">
<h3>Designing a widget Booklet</h3>
<div class="p7TPM11">
MOVE TABS HERE
</div>
</div>
<div class="book_right">
INSERT TAB PANEL HERE
</div>
</div>
</div>
Backspace over the placeholder text until the line it is on is empty.
<div class="book_right">
</div>
With your cursor on the blank line, click the Tab Panel Magic 2 icon on your Insert Bar (or Panel) or choose
Insert > Studio VII > Tab Panel Magic 2 by PVII...
The Tab Panel Magic interface will open.
Add 2 new triggers so you have 3 in total. Change the trigger text to Section 1, Section 2, and Section 3
Set Animation to 2-Horizontal Panel Slider
Set Style Theme to 06-Basic
Leave all other settings default
Click OK
Switch to Design View.
Your page now looks like this:
Preview in a browser:
You have a working Tab Panel widget. Now we need to move the triggers (tabs) into the left column.
3. Move the Tab Panel Triggers
Place your cursor inside the Section 1 trigger.
Switch to Code View
Move 4 lines up in the code and you'll find this line:
<div id="p7TPMtabs_1" class="p7TPMtabs_06">
Place your cursor inside the above line. In the middle is fine. Now locate the Tag Selector Bar along the bottom of your window (just above the Property Inspector)
On the Tag Selector Bar, find the tag listed as <div.ptTPMtabs_06#p7TPMtabs_1> and click it.
The entire DIV will highlight in blue.
Choose Edit > Cut (CTRL - X) to cut the code to your clipboard.
Now locate the placeholder text Move Tabs Here:
<div class="p7TPM11">
MOVE TABS HERE
</div>
Backspace over the placeholder text until its line is empty:
<div class="p7TPM11">
</div>
With your cursor on the blank line formerly occupied by the placeholder text, choose Edit > Paste (CTRL - V) to paste in the trigger code.
Switch to Design View.
Your page should now look like this:
Preview in a browser:
Good job! You have successfully built a Tab Panel Magic booklet.
4. pop up your booklet in a tooltip (optional)
This optional step requires Tooltip Magic. Make sure you are using the latest updated version.
In your booklet.htm file, click the Tooltip Magic Advanced Interface icon on your Insert Bar or Panel. Or choose:
Insert > Studio VII > Tooltip Magic by PVII > Insert Tooltip - Advanced...
The Tooltip Magic Advanced UI opens:
Leave Tag Name set to A
For Content Source, select Element ID carried in Attribute and type REL into the box next to it.
Set tooltip Width to 740
Set Position to 12-Lightshow Display
Check the Show Close Button box
Set Trigger Action to Click Only
For Style Theme, select 16-The UnStyle
Leave all other options and settings default.
Click OK
Create a Tooltip Trigger
Now we need a trigger for your tooltip.
Switch to Code View
Locate the opening <body>
tag on or about line 16
Create a new line just below the <body>
tag and enter the following code:
<p><a href="#" rel="book_wrapper">Show me the booklet</a></p>
Switch to Design View
Your page should look like this:
Preview in a browser
All you will see is the link you just created. The Tooltip Magic script will detect that you've set the Tab Panel as a content source and will automatically hide it until you click the tooltip trigger Show me the booklet.
Click the tooltip trigger
The booklet will pop open centered vertically and horizontally in your window and the page will dim out beneath it. Use the Close Button (X) or click anywhere off the booklet to close it.
That's a wrap!
Closing Notes
CSS3 effects such as drop shadows and curved corners are supported by modern browsers. Older browsers simply display perfectly nice rectangular corners without shadows. This concept is commonly called progressive enhancement.
We hope you've enjoyed this tutorial. If you need, or would like, further information on any part of this tutorial simply start a topic on our Web forum or contact us directly.