2 // CardSet is a widget for displaying a stack of cards, e.g. for
3 // user preferences. It is skinnable by overloading.
4 // Default CardSet uses fieldsets for the cards,
5 // the derived class TabbedCardSet uses JavaScript-based tabs
8 // First, create a CardSet using the constructor
9 // Then, add cards to it
10 // Finally Render to get the HTML
12 class TabbedCardSet
extends CardSet
{
14 // Return the HTML of this CardSet
15 function renderToOutpage( &$out )
17 $s = "<div id=\"column-content\"><div id=\"content\">\n";
19 for ( $i=0; $i<count( $this->mLabels
); $i++
)
21 $s .= "<div class=\"usage\" id=\"area{$i}\"><div id=\"subheading{$i}\"><h2><a id=\"card{$i}\"></a>".
22 $this->mLabels
[$i] . "</h2></div>" . $this->mBodies
[$i] . "</div>\n\n";
24 $s .= "</div></div>\n\n<div id=\"bar\"><div id=\"p-cactions\" class=\"portlet\">\n<ul>\n";
26 for ( $i=0; $i<count( $this->mLabels
); $i++
)
28 $selected = ($i==0 ?
"class=\"selected\"" : "");
29 $s .= "<li id=\"tab{$i}\" {$selected} onclick=\"chgArea({$i},this);\"
30 onmouseover=\"hilight({$i});\" onmouseout=\"if(prev!={$i}){hilight(this,-1);}\"><a href=\"#card{$i}\">".
31 $this->mLabels
[$i] . "</a></li>";
34 $s .= "</ul></div></div>\n\n";
38 var elements=". count( $this->mLabels
) .";
42 for(i=0; i<elements; i++){document.getElementById('area'+i).style.display='none';}
43 document.getElementById('bar').style.display='inline';
46 function chgArea(n,obj){
48 hilight( document.getElementById('tab'+prev) , -1);
49 document.getElementById('area'+prev).style.display='none';
53 document.getElementById('area'+n).style.display='inline';
57 function hilight(obj,n){
58 if (n<0) { obj.className=\"\"; }
59 else { obj.className=\"selected\"; }
63 chgArea(0,document.getElementById('tab0'));
68 $out->setOnloadHandler( $out->getOnloadHandler() . "inittabs();" );
72 } // end of: class CardSet