Use spinners to divide your page content into sections, each of which you can show or hide individually.
The Code
The code for index.php is shown in Example 1.
Example 1. PHP allowing for user selection of a specific spinner
<?phpfunction start_section( $id, $title ){?><table cellspacing="0" cellpadding="0"><tr><td width="30" valign="top"><a href="javascript: void twist('<?php echo($id); ?>');"><img src="up.gif" border="0" id="img_<?php echo($id); ?>"/></a></td><td width="90%"><h1><?php echo( $title ); ?></h1><div style="visibility:hidden;position:absolute;"id="<?php echo($id); ?>" class="spin-content">
<?php}function end_section( ){?></div></td></tr></table><?php}function spinner_header( ){?><style type="text/css"> body { font-family: arial, verdana; }h1 { font-size: medium; border-bottom: 1px solid black; }.spin-content{font-size:small;margin-left:10px;padding:10px;}</style><script language="Javascript">function twist( sid ){imgobj = document.getElementById( "img_"+sid );
divobj = document.getElementById( sid );
if ( imgobj.src.match( "up.gif" ) )
{
imgobj.src = "down.gif";
divobj.style.position = "relative";
divobj.style.visibility = "visible";
}
else
{
imgobj.src = "up.gif";
divobj.style.visibility = "hidden";
divobj.style.position = "absolute";
}
}</script><?php}?><html><head><?php spinner_header( ) ?></head><body><?php start_section( "one", "Report part one" ) ?>This report will tell you a lot of stuff you didn't
know before.And that's good.
Because that's what a report should do.But it will tell you so much that it needs to be
rolled up into sectionsso that you don't have to gasp as you see it all at once.<?php end_section( ) ?><?php start_section( "two", "Report part two" ) ?>This is a table of numbers and such:<br/><table><tr><th>State</th><th>Total</th></tr><tr><td>CA</td><td>$35M</td></tr><tr><td>PA</td><td>$22M</td></tr><tr><td>NC</td><td>$5M</td></tr><tr><td>FL</td><td>$15M</td></tr></table><?php end_section( ) ?></body></html> The script starts by defining the start_section and end_section functions, which bracket the blocks of content on the page that will be shown (or hidden) interactively. The top section also defines a spinner_header function that will define the CSS and JavaScript used by the DHTML portion of the system.
The start_section function creates a table where the first column has the spinner graphic, and the second has the title of the section and a div element that will hold the content. The div element is initially set to be invisible, and its position attribute is set initially to "absolute" (a div element that is positioned as "relative" will still be accounted for in the layout). To make the div element and its content disappear, the position attribute's value is set to "absolute"; it can then be set back to "relative" for a reappearance.
Running
Upload the code and images to the server, and point your browser at index.php. You should see something that looks like Figure 1
Figure 1. The sections closed up
Click on the arrow next to the first part of the report, and watch it spin to expose the report section (as shown in Figure 2).
Figure 2. The first section opened up
When writing code that does dynamic repositioning, as with this hack, it's very important to test it on every browser you intend to support. Positioning visible and invisible elements is one of those "gotcha" areas in DHTML.
0 komentar:
Post a Comment