--- nfo/php/libs/com.newsblob.phphtmllib/widgets/ActiveTab.inc 2003/01/30 03:29:43 1.1.1.1
+++ nfo/php/libs/com.newsblob.phphtmllib/widgets/ActiveTab.inc 2003/11/14 21:31:40 1.3
@@ -1,266 +1,312 @@
+ * @package phpHtmlLib
+ *
+ */
+
+/**
+ * This class is used for creating a tab panel of content
+ * where the tabs can be switched on the fly w/ JS, thereby
+ * eliminating a page turn to see the other tab's content.
+ *
+ * @author Walter A. Boring IV
+ * @package phpHtmlLib
+ */
class ActiveTab extends BaseWidget {
- /**
- * We have to code these here instead of
- * the css because JS is used to change
- * the colors. JS can't change a color
- * that is defined in a css class. It only
- * works on an inline style
- */
-
- /**
- * The active tab's background color
- *
- */
- var $_selected_background = "#eeeeee";
-
- /**
- * The hidden tab's background color
- */
- var $_hidden_background = "#e0e0e0";
-
-
- function ActiveTab($width="100%", $height="300px") {
- $this->set_width( $width );
- $this->_height = $height;
- }
-
-
- function render($indent_level=1, $output_debug=0) {
- $tabs = $this->build_tabs();
-
- $span = 2 + (count($this->_data) *2 );
-
- $td = new TDtag(array("colspan" => $span), $this->build_content() );
- $tabs->add_row( $td );
- $div = html_div("activetab", $tabs);
- $div->set_style("width:".$this->get_width());
- return $div->render($indent_level, $output_debug);
- }
-
- /**
- * This function MUST be called AFTER ALL content
- * has been added, in order for the js to work properly
- *
- * @return string
- */
- function get_javascript() {
- $function = "function show_activetab(tab) {\n";
-
- $function .= " var tabs = new Array();\n";
-
- foreach( $this->_data as $tab ) {
- $function .= " tabs['".$this->_tab_name($tab["title"])."'] = 1;\n";
- }
-
- $function .= " for (title in tabs ) {\n";
- $function .= " obj = document.getElementById('div_'+title).style.visibility = 'hidden';\n";
- $function .= " obj = document.getElementById('tab_'+title).style.borderBottom = '1px solid #a1a1a1';\n";
- $function .= " obj = document.getElementById('tab_'+title).style.fontWeight = '';\n";
- $function .= " obj = document.getElementById('tab_'+title).style.backgroundColor = '".$this->_hidden_background."';\n";
- $function .= " }\n";
-
- $function .= " // show the content of ips\n";
- $function .= " obj = document.getElementById('div_'+tab).style.visibility = 'visible';\n";
-
- $function .= " // draw the tab separator line\n";
- $function .= " obj = document.getElementById('tab_'+tab).style.borderBottom = 'none';\n";
- $function .= " obj = document.getElementById('tab_'+tab).style.fontWeight = 'bold';\n";
- $function .= " obj = document.getElementById('tab_'+tab).style.backgroundColor = '".$this->_selected_background."';\n";
-
- $function .= " // hide the content of the other tabs\n";
- $function .= "}\n";
- return $function;
- }
-
-
- /**
- * Add a tab
- *
- * @param string - the title of the tab
- * @param mixed - the conetnts for the tab
- * @param boolean - should this tab be
- * the default selected tab?
- * @param int - the width of the tab in pixels
- * defaults to 60
- *
- */
- function add_tab( $title, $content, $selected=FALSE, $width=NULL) {
- $this->_data[] = array("title" => $title,
- "content" => $content,
- "selected" => $selected,
- "width" => $width);
- }
-
-
-
- function build_tabs() {
- $table = html_table($this->get_width(), 0,0,0, "center");
-
- $tr = new TRtag;
-
- $tr->add( $this->_spacer_td() );
-
-
- foreach( $this->_data as $tab) {
- $tr->add( $this->_build_tab_td( $tab["title"],
- $tab["selected"],
- $tab["width"]) );
- $tr->add( $this->_spacer_td() );
- }
- $tr->add( $this->_end_td() );
-
- $table->add( $tr );
- return $table;
- }
-
- function build_content() {
- $div = html_div("content");
- $div->set_class( "content" );
- $div->set_style( "height:".$this->_height.";");
-
-
- foreach ( $this->_data as $tab ) {
- if ($tab["selected"]) {
- $class = "content_visible";
- } else {
- $class = "content_hidden";
- }
- $tab_div = html_div($class, $tab["content"]);
- $tab_div->set_id( "div_".$this->_tab_name( $tab["title"] ) );
- $div->add( $tab_div );
- }
+ /**
+ * We have to code these here instead of
+ * the css because JS is used to change
+ * the colors. JS can't change a color
+ * that is defined in a css class. It only
+ * works on an inline style
+ */
+
+ /**
+ * The active tab's background color
+ *
+ */
+ var $_selected_background = "#eeeeee";
+
+ /**
+ * The hidden tab's background color
+ */
+ var $_hidden_background = "#e0e0e0";
+
+ /**
+ * The default selected tab
+ */
+ var $_selected_tab = 0;
+
+
+ /**
+ * This is the constructor for the ActiveTab
+ * object.
+ *
+ * @param string - the width table
+ * @param string - the height of the tab's contents
+ * @param int - the selected tab.
+ */
+ function ActiveTab($width="100%", $height="300px", $selected_tab=0) {
+ $this->set_width( $width );
+ $this->_height = $height;
+ $this->_selected_tab = $selected_tab;
+ }
+
+
+ function render($indent_level=1, $output_debug=0) {
+ $tabs = $this->build_tabs();
+
+ $span = 2 + (count($this->_data) *2 );
+
+ $td = new TDtag(array("colspan" => $span), $this->build_content() );
+ $tabs->add_row( $td );
+ $div = html_div("activetab", $tabs);
+ $div->set_style("width:".$this->get_width());
+ return $div->render($indent_level, $output_debug);
+ }
+
+ /**
+ * This function MUST be called AFTER ALL content
+ * has been added, in order for the js to work properly
+ *
+ * @return string
+ */
+ function get_javascript() {
+ $function = "function show_activetab(tab) {\n";
+
+ $function .= " var tabs = new Array();\n";
+
+ foreach( $this->_data as $tab ) {
+ $function .= " tabs['".$this->_tab_name($tab["title"])."'] = 1;\n";
+ }
+
+ $function .= " for (title in tabs ) {\n";
+ $function .= " obj = document.getElementById('div_'+title).style.visibility = 'hidden';\n";
+ $function .= " obj = document.getElementById('tab_'+title).style.borderBottom = '1px solid #a1a1a1';\n";
+ $function .= " obj = document.getElementById('tab_'+title).style.fontWeight = '';\n";
+ $function .= " obj = document.getElementById('tab_'+title).style.backgroundColor = '".$this->_hidden_background."';\n";
+ $function .= " }\n";
+
+ $function .= " // show the content of ips\n";
+ $function .= " obj = document.getElementById('div_'+tab).style.visibility = 'visible';\n";
+
+ $function .= " // draw the tab separator line\n";
+ $function .= " obj = document.getElementById('tab_'+tab).style.borderBottom = 'none';\n";
+ $function .= " obj = document.getElementById('tab_'+tab).style.fontWeight = 'bold';\n";
+ $function .= " obj = document.getElementById('tab_'+tab).style.backgroundColor = '".$this->_selected_background."';\n";
+
+ $function .= " // save the last viewed div in a hidden variable (if it's there)\n";
+ $function .= " obj = document.getElementsByName('div_selected');\n";
+ $function .= " if (obj[0].value) obj[0].value = tab;\n";
+ $function .= "}\n";
+ return $function;
+ }
+
+
+ /**
+ * Add a tab
+ *
+ * @param string - the title of the tab
+ * @param mixed - the conetnts for the tab
+ * @param boolean - should this tab be
+ * the default selected tab?
+ * @param int - the width of the tab in pixels
+ * defaults to 60
+ *
+ */
+ function add_tab( $title, $content, $selected=FALSE, $width=NULL) {
+ $this->_data[] = array("title" => $title,
+ "selected" => $selected,
+ "width" => $width,
+ "content" => $content
+ );
+ }
+
+
+
+ function build_tabs() {
+ $table = html_table($this->get_width(), 0,0,0, "center");
+
+ $tr = new TRtag;
+
+ //make sure that we have at least the
+ //first tab selected if there is non selected
+ if ($this->_selected_tab === 0 || strcasecmp($this->_selected_tab, "0") == 0) {
+ $this->_selected_tab = $this->_tab_name($this->_data[0]["title"]);
+ }
+
+ $tr->add( $this->_spacer_td() );
+ foreach( $this->_data as $tab) {
+ $selected = FALSE;
+ if (strcasecmp($this->_tab_name($tab["title"]),$this->_selected_tab) == 0 ||
+ $tab["selected"] == TRUE) {
+ $selected = TRUE;
+ }
+ $tr->add( $this->_build_tab_td( $tab["title"],
+ $selected,
+ $tab["width"]) );
+ $tr->add( $this->_spacer_td() );
+ }
+ $tr->add( $this->_end_td() );
+
+ $table->add( $tr );
+ return $table;
+ }
+
+ function build_content() {
+ $div = html_div("content");
+ $div->set_class( "content" );
+ $div->set_style( "height:".$this->_height.";");
+
+
+ foreach ( $this->_data as $tab ) {
+ if ( strcasecmp($this->_tab_name($tab["title"]), $this->_selected_tab) == 0 ) {
+ $class = "content_visible";
+ } else {
+ $class = "content_hidden";
+ }
+ $tab_div = html_div($class, $tab["content"]);
+ $tab_div->set_id( "div_".$this->_tab_name( $tab["title"] ) );
+ $div->add( $tab_div );
+ }
- return $div;
- }
+ return $div;
+ }
- function _spacer_td() {
+ function _spacer_td() {
return html_td("spacer", NULL, " ");
- }
+ }
- function _end_td() {
+ function _end_td() {
return html_td("end", NULL, " ");
- }
+ }
- function _build_tab_td($title, $selected, $width) {
- $td_class = "tab";
- $link_class = "link";
-
- if ($width == NULL) {
- $width = "60px";
- }
-
- if (!strstr($width, "px")) {
- $width .= "px";
- }
-
- if ($selected) {
- $td_class .= "selected";
- } else {
- $td_class .= "hidden";
- }
+ function _build_tab_td($title, $selected, $width) {
+ $td_class = "tab";
+ $link_class = "link";
+
+ if ( $width == NULL ) {
+ $width = "60px";
+ }
+
+ if ( !strstr($width, "px") ) {
+ $width .= "px";
+ }
+
+ if ( $selected ) {
+ $td_class .= "selected";
+ } else {
+ $td_class .= "hidden";
+ }
$func = "show_activetab('".$this->_tab_name($title)."');";
$link = html_a("javascript: ".$func, $title, "link");
- $td = html_td($td_class, "", $link);
- $td->set_id("tab_".$this->_tab_name($title));
- $td->set_tag_attribute("onclick", "javascript: ".$func);
- if ($selected) {
- $style = "font-weight: bold;background-color: ".$this->_selected_background.";";
- } else {
- $style = "background-color: ".$this->_hidden_background.";";
- }
- $td->set_style($style."width:".$width);
- return $td;
- }
-
- /**
- * Thie method is used to change the selected tab's
- * background color
- */
- function selected_background( $color ) {
- $this->_selected_background = $color;
- }
-
- /**
- * Thie method is used to change the hidden tab's
- * background color
- */
- function hidden_background( $color ) {
- $this->_hidden_background = $color;
- }
-
-
- function _tab_name( $title ) {
- return str_replace(" ", "", strtolower($title));
- }
+ $td = html_td($td_class, "", $link);
+ $td->set_id("tab_".$this->_tab_name($title));
+ $td->set_tag_attribute("onclick", "javascript: ".$func);
+ if ( $selected ) {
+ $style = "font-weight: bold;background-color: ".$this->_selected_background.";";
+ } else {
+ $style = "background-color: ".$this->_hidden_background.";";
+ }
+ $td->set_style($style."width:".$width);
+ return $td;
+ }
+
+ /**
+ * Thie method is used to change the selected tab's
+ * background color
+ */
+ function selected_background( $color ) {
+ $this->_selected_background = $color;
+ }
+
+ /**
+ * Thie method is used to change the hidden tab's
+ * background color
+ */
+ function hidden_background( $color ) {
+ $this->_hidden_background = $color;
+ }
+
+
+ function _tab_name( $title ) {
+ return str_replace(" ", "", strtolower($title));
+ }
}
-
+/**
+ * The CSSBuilder object for the ActiveTab widget
+ *
+ * @package phpHtmlLib
+ */
class ActiveTabCSS extends CSSBuilder {
- function user_setup() {
- $this->add_entry(".activetab", "",
- array("align" => "center") );
-
- $this->add_entry(".activetab", ".spacer",
- array("width" => "5px",
- "border-bottom" => "1px solid #a1a1a1"));
- $this->add_entry(".activetab", ".end",
- array("border-bottom" => "1px solid #a1a1a1"));
-
- $this->add_entry(".activetab", ".link:active,.link:hover,.link:link,.link:visited",
- array("text-decoration" => "none",
- "color" => "#000000"));
-
- $this->add_entry(".activetab", ".tabhidden",
- array("border" => "1px solid #999999",
- "padding-left" => "5px",
- "padding-right" => "5px",
- "background-color" => "#eeeeee",
- "text-align" => "center",
- "white-space" => "nowrap",
- "font-family" => "arial",
- "font-size" => "10pt"));
-
- $this->add_entry(".activetab", ".tabselected",
- array("border-left" => "1px solid #999999",
- "border-top" => "1px solid #999999",
- "border-right" => "1px solid #999999",
- "padding-left" => "5px",
- "padding-right" => "5px",
- "text-align" => "center",
- "white-space" => "nowrap",
- "font-family" => "arial",
- "font-size" => "10pt"));
-
- $this->add_entry(".activetab", ".content",
- array("border-left" => "1px solid #a1a1a1",
- "border-right" => "1px solid #a1a1a1",
- "border-bottom" => "1px solid #a1a1a1",
- "position" => "relative",
- "z-index" => "100"));
-
- $this->add_entry(".activetab", ".content_visible",
- array("position" => "absolute",
- "left" => "0px",
- "top" => "0px",
- "visibility" => "visible",
- "z-index" => "50",
- "padding" => "5px 5px 5px 5px"));
-
- $this->add_entry(".activetab", ".content_hidden",
- array("position" => "absolute",
- "left" => "0px",
- "top" => "0px",
- "visibility" => "hidden",
- "z-index" => "50",
- "padding" => "5px 5px 5px 5px"));
- }
-
+ function user_setup() {
+ $this->add_entry(".activetab", "",
+ array("align" => "center") );
+
+ $this->add_entry(".activetab", ".spacer",
+ array("width" => "5px",
+ "border-bottom" => "1px solid #a1a1a1"));
+ $this->add_entry(".activetab", ".end",
+ array("border-bottom" => "1px solid #a1a1a1"));
+
+ $this->add_entry(".activetab", ".link:active,.link:hover,.link:link,.link:visited",
+ array("text-decoration" => "none",
+ "color" => "#000000"));
+
+ $this->add_entry(".activetab", ".tabhidden",
+ array("border" => "1px solid #999999",
+ "padding-left" => "5px",
+ "padding-right" => "5px",
+ "background-color" => "#eeeeee",
+ "text-align" => "center",
+ "white-space" => "nowrap",
+ "font-family" => "arial",
+ "font-size" => "10pt"));
+
+ $this->add_entry(".activetab", ".tabselected",
+ array("border-left" => "1px solid #999999",
+ "border-top" => "1px solid #999999",
+ "border-right" => "1px solid #999999",
+ "padding-left" => "5px",
+ "padding-right" => "5px",
+ "text-align" => "center",
+ "white-space" => "nowrap",
+ "font-family" => "arial",
+ "font-size" => "10pt"));
+
+ $this->add_entry(".activetab", ".content",
+ array("border-left" => "1px solid #a1a1a1",
+ "border-right" => "1px solid #a1a1a1",
+ "border-bottom" => "1px solid #a1a1a1",
+ "position" => "relative",
+ "z-index" => "100"));
+
+ $this->add_entry(".activetab", ".content_visible",
+ array("position" => "absolute",
+ "left" => "0px",
+ "top" => "0px",
+ "visibility" => "visible",
+ "z-index" => "50",
+ "padding" => "5px 5px 5px 5px"));
+
+ $this->add_entry(".activetab", ".content_hidden",
+ array("position" => "absolute",
+ "left" => "0px",
+ "top" => "0px",
+ "visibility" => "hidden",
+ "z-index" => "50",
+ "padding" => "5px 5px 5px 5px"));
+ }
+
}
?>