/[cvs]/nfo/php/libs/com.newsblob.phphtmllib/widgets/ActiveTab.inc
ViewVC logotype

Diff of /nfo/php/libs/com.newsblob.phphtmllib/widgets/ActiveTab.inc

Parent Directory Parent Directory | Revision Log Revision Log | View Patch Patch

revision 1.1 by jonen, Thu Jan 30 03:29:43 2003 UTC revision 1.2 by jonen, Sat Feb 22 21:08:22 2003 UTC
# Line 1  Line 1 
1  <?php  <?php
2    /**
3     * This file contains the ActiveTab class
4     *
5     * $Id$
6     *
7     * @author Walter A. Boring IV <waboring@buildabetterweb.com>
8     * @package phpHtmlLib
9     *
10     */
11    
12    /**
13     * This class is used for creating a tab panel of content
14     * where the tabs can be switched on the fly w/ JS, thereby
15     * eliminating a page turn to see the other tab's content.
16     *
17     * @author Walter A. Boring IV <waboring@buildabetterweb.com>
18     * @package phpHtmlLib
19     */
20  class ActiveTab extends BaseWidget {  class ActiveTab extends BaseWidget {
21    
22    
23          /**      /**
24           * We have to code these here instead of       * We have to code these here instead of
25           * the css because JS is used to change       * the css because JS is used to change
26           * the colors.  JS can't change a color       * the colors.  JS can't change a color
27           * that is defined in a css class.  It only       * that is defined in a css class.  It only
28           * works on an inline style       * works on an inline style
29           */       */
30    
31          /**      /**
32           * The active tab's background color       * The active tab's background color
33           *       *
34           */       */
35          var $_selected_background = "#eeeeee";      var $_selected_background = "#eeeeee";
36    
37          /**      /**
38           * The hidden tab's background color       * The hidden tab's background color
39           */       */
40          var $_hidden_background = "#e0e0e0";      var $_hidden_background = "#e0e0e0";
41    
42        /**
43          function ActiveTab($width="100%", $height="300px") {       * The default selected tab
44                  $this->set_width( $width );       */
45                  $this->_height = $height;      var $_selected_tab = 0;
46          }  
47    
48        /**
49          function render($indent_level=1, $output_debug=0) {       * This is the constructor for the ActiveTab
50                  $tabs = $this->build_tabs();       * object.
51         *
52                  $span = 2 + (count($this->_data) *2 );       * @param string - the width table
53         * @param string - the height of the tab's contents
54                  $td = new TDtag(array("colspan" => $span), $this->build_content() );       * @param int - the selected tab.
55                  $tabs->add_row( $td );       */
56                  $div = html_div("activetab", $tabs);      function ActiveTab($width="100%", $height="300px", $selected_tab=0) {
57                  $div->set_style("width:".$this->get_width());          $this->set_width( $width );
58                  return $div->render($indent_level, $output_debug);          $this->_height = $height;
59          }          $this->_selected_tab = $selected_tab;
60        }
61          /**  
62           * This function MUST be called AFTER ALL content  
63           * has been added, in order for the js to work properly      function render($indent_level=1, $output_debug=0) {
64           *          $tabs = $this->build_tabs();
65           * @return string  
66           */          $span = 2 + (count($this->_data) *2 );
67          function get_javascript() {  
68                  $function = "function show_activetab(tab) {\n";          $td = new TDtag(array("colspan" => $span), $this->build_content() );
69            $tabs->add_row( $td );
70                  $function .= "          var tabs = new Array();\n";          $div = html_div("activetab", $tabs);
71            $div->set_style("width:".$this->get_width());
72                  foreach( $this->_data as $tab ) {          return $div->render($indent_level, $output_debug);
73                     $function .= "               tabs['".$this->_tab_name($tab["title"])."'] = 1;\n";      }
74                  }  
75        /**
76                  $function .= "          for (title in tabs ) {\n";       * This function MUST be called AFTER ALL content
77                  $function .= "                          obj = document.getElementById('div_'+title).style.visibility = 'hidden';\n";       * has been added, in order for the js to work properly
78                  $function .= "                          obj = document.getElementById('tab_'+title).style.borderBottom = '1px solid #a1a1a1';\n";       *
79                  $function .= "                          obj = document.getElementById('tab_'+title).style.fontWeight = '';\n";       * @return string
80                  $function .= "                          obj = document.getElementById('tab_'+title).style.backgroundColor = '".$this->_hidden_background."';\n";       */
81                  $function .= "          }\n";      function get_javascript() {
82            $function = "function show_activetab(tab) {\n";
83                  $function .= "          // show the content of ips\n";  
84                  $function .= "          obj = document.getElementById('div_'+tab).style.visibility = 'visible';\n";          $function .= "     var tabs = new Array();\n";
85    
86                  $function .= "          // draw the tab separator line\n";          foreach( $this->_data as $tab ) {
87                  $function .= "          obj = document.getElementById('tab_'+tab).style.borderBottom = 'none';\n";              $function .= "     tabs['".$this->_tab_name($tab["title"])."'] = 1;\n";
88                  $function .= "          obj = document.getElementById('tab_'+tab).style.fontWeight = 'bold';\n";          }
89                  $function .= "          obj = document.getElementById('tab_'+tab).style.backgroundColor = '".$this->_selected_background."';\n";  
90            $function .= "     for (title in tabs ) {\n";
91                  $function .= "          // hide the content of the other tabs\n";          $function .= "        obj = document.getElementById('div_'+title).style.visibility = 'hidden';\n";
92                  $function .= "}\n";          $function .= "        obj = document.getElementById('tab_'+title).style.borderBottom = '1px solid #a1a1a1';\n";
93                  return $function;          $function .= "        obj = document.getElementById('tab_'+title).style.fontWeight = '';\n";
94          }          $function .= "        obj = document.getElementById('tab_'+title).style.backgroundColor = '".$this->_hidden_background."';\n";
95            $function .= "     }\n";
96    
97          /**          $function .= "     // show the content of ips\n";
98           * Add a tab          $function .= "     obj = document.getElementById('div_'+tab).style.visibility = 'visible';\n";
99           *  
100           * @param string - the title of the tab          $function .= "     // draw the tab separator line\n";
101           * @param mixed - the conetnts for the tab          $function .= "     obj = document.getElementById('tab_'+tab).style.borderBottom = 'none';\n";
102           * @param boolean - should this tab be          $function .= "     obj = document.getElementById('tab_'+tab).style.fontWeight = 'bold';\n";
103           *                  the default selected tab?          $function .= "     obj = document.getElementById('tab_'+tab).style.backgroundColor = '".$this->_selected_background."';\n";
104           * @param int   - the width of the tab in pixels  
105           *                defaults to 60          $function .= "     // save the last viewed div in a hidden variable (if it's there)\n";
106           *          $function .= "     obj = document.getElementsByName('div_selected');\n";
107           */          $function .= "     if (obj[0].value) obj[0].value = tab;\n";
108          function add_tab( $title, $content, $selected=FALSE, $width=NULL) {          $function .= "}\n";
109                  $this->_data[] = array("title" => $title,          return $function;
110                                                             "content" => $content,      }
111                                                             "selected" => $selected,  
112                                                             "width" => $width);  
113          }      /**
114         * Add a tab
115         *
116         * @param string - the title of the tab
117          function build_tabs() {       * @param mixed - the conetnts for the tab
118                  $table = html_table($this->get_width(), 0,0,0, "center");       * @param boolean - should this tab be
119         *                  the default selected tab?
120                  $tr = new TRtag;       * @param int   - the width of the tab in pixels
121         *                defaults to 60
122                  $tr->add( $this->_spacer_td() );       *
123         */
124        function add_tab( $title, $content, $selected=FALSE, $width=NULL) {
125                  foreach( $this->_data as $tab) {          $this->_data[] = array("title" => $title,
126                          $tr->add( $this->_build_tab_td( $tab["title"],                                 "selected" => $selected,
127                                                                                          $tab["selected"],                                 "width" => $width,
128                                                                                          $tab["width"]) );                                 "content" => $content
129                          $tr->add( $this->_spacer_td() );                                 );
130                  }      }
131                  $tr->add( $this->_end_td() );  
132    
133                  $table->add( $tr );  
134                  return $table;      function build_tabs() {
135          }          $table = html_table($this->get_width(), 0,0,0, "center");
136    
137          function build_content() {          $tr = new TRtag;
138                  $div = html_div("content");  
139                  $div->set_class( "content" );          //make sure that we have at least the
140                  $div->set_style( "height:".$this->_height.";");          //first tab selected if there is non selected
141                            if ($this->_selected_tab === 0 || strcasecmp($this->_selected_tab, "0") == 0) {
142                $this->_selected_tab = $this->_tab_name($this->_data[0]["title"]);
143                  foreach ( $this->_data as $tab ) {          }
144                          if ($tab["selected"]) {  
145                                  $class = "content_visible";          $tr->add( $this->_spacer_td() );
146                          } else {          foreach( $this->_data as $tab) {
147                                  $class = "content_hidden";              $selected = FALSE;
148                          }              if (strcasecmp($this->_tab_name($tab["title"]),$this->_selected_tab) == 0 ||
149                          $tab_div = html_div($class, $tab["content"]);                  $tab["selected"] == TRUE) {
150                          $tab_div->set_id( "div_".$this->_tab_name( $tab["title"] ) );                  $selected = TRUE;
151                          $div->add( $tab_div );              }
152                  }              $tr->add( $this->_build_tab_td( $tab["title"],
153                                                $selected,
154                                                $tab["width"]) );
155                $tr->add( $this->_spacer_td() );
156            }
157            $tr->add( $this->_end_td() );
158    
159            $table->add( $tr );
160            return $table;
161        }
162    
163        function build_content() {
164            $div = html_div("content");
165            $div->set_class( "content" );
166            $div->set_style( "height:".$this->_height.";");
167    
168    
169            foreach ( $this->_data as $tab ) {
170                if ( strcasecmp($this->_tab_name($tab["title"]), $this->_selected_tab) == 0 ) {
171                    $class = "content_visible";
172                } else {
173                    $class = "content_hidden";
174                }
175                $tab_div = html_div($class, $tab["content"]);
176                $tab_div->set_id( "div_".$this->_tab_name( $tab["title"] ) );
177                $div->add( $tab_div );
178            }
179    
180                  return $div;          return $div;
181          }      }
182    
183          function _spacer_td() {      function _spacer_td() {
184          return html_td("spacer", NULL, "&nbsp;");          return html_td("spacer", NULL, "&nbsp;");
185          }      }
186    
187          function _end_td() {      function _end_td() {
188          return html_td("end", NULL, "&nbsp;");          return html_td("end", NULL, "&nbsp;");
189          }      }
190    
191    
192          function _build_tab_td($title, $selected, $width) {      function _build_tab_td($title, $selected, $width) {
193                  $td_class = "tab";          $td_class = "tab";
194                  $link_class = "link";          $link_class = "link";
195    
196                  if ($width == NULL) {          if ( $width == NULL ) {
197                          $width = "60px";              $width = "60px";
198                  }          }
199    
200                  if (!strstr($width, "px")) {          if ( !strstr($width, "px") ) {
201                          $width .= "px";              $width .= "px";
202                  }          }
203                    
204                  if ($selected) {          if ( $selected ) {
205                          $td_class .= "selected";              $td_class .= "selected";
206                  } else {          } else {
207                          $td_class .= "hidden";              $td_class .= "hidden";
208                  }          }
209          $func = "show_activetab('".$this->_tab_name($title)."');";          $func = "show_activetab('".$this->_tab_name($title)."');";
210          $link = html_a("javascript: ".$func, $title, "link");          $link = html_a("javascript: ".$func, $title, "link");
211    
212                  $td = html_td($td_class, "", $link);          $td = html_td($td_class, "", $link);
213                  $td->set_id("tab_".$this->_tab_name($title));          $td->set_id("tab_".$this->_tab_name($title));
214                  $td->set_tag_attribute("onclick", "javascript: ".$func);          $td->set_tag_attribute("onclick", "javascript: ".$func);
215          if ($selected) {          if ( $selected ) {
216                          $style = "font-weight: bold;background-color: ".$this->_selected_background.";";              $style = "font-weight: bold;background-color: ".$this->_selected_background.";";
217                  } else {          } else {
218                          $style = "background-color: ".$this->_hidden_background.";";              $style = "background-color: ".$this->_hidden_background.";";
219                  }          }
220                  $td->set_style($style."width:".$width);          $td->set_style($style."width:".$width);
221                  return $td;          return $td;
222          }      }
223    
224          /**      /**
225           * Thie method is used to change the selected tab's       * Thie method is used to change the selected tab's
226           * background color       * background color
227           */       */
228          function selected_background( $color ) {      function selected_background( $color ) {
229                  $this->_selected_background = $color;          $this->_selected_background = $color;
230          }      }
231    
232          /**      /**
233           * Thie method is used to change the hidden tab's       * Thie method is used to change the hidden tab's
234           * background color       * background color
235           */       */
236          function hidden_background( $color ) {      function hidden_background( $color ) {
237                  $this->_hidden_background = $color;          $this->_hidden_background = $color;
238          }      }
239    
240    
241          function _tab_name( $title ) {      function _tab_name( $title ) {
242                  return str_replace(" ", "", strtolower($title));          return str_replace(" ", "", strtolower($title));
243          }      }
244  }  }
245    
246    /**
247     * The CSSBuilder object for the ActiveTab widget
248     *
249     * @package phpHtmlLib
250     */
251  class ActiveTabCSS extends CSSBuilder {  class ActiveTabCSS extends CSSBuilder {
252          function user_setup() {      function user_setup() {
253                  $this->add_entry(".activetab", "",          $this->add_entry(".activetab", "",
254                                                   array("align" => "center") );                           array("align" => "center") );
255    
256                  $this->add_entry(".activetab", ".spacer",          $this->add_entry(".activetab", ".spacer",
257                                                   array("width" => "5px",                           array("width" => "5px",
258                                                             "border-bottom" => "1px solid #a1a1a1"));                                 "border-bottom" => "1px solid #a1a1a1"));
259                  $this->add_entry(".activetab", ".end",          $this->add_entry(".activetab", ".end",
260                                                   array("border-bottom" => "1px solid #a1a1a1"));                           array("border-bottom" => "1px solid #a1a1a1"));
261    
262                  $this->add_entry(".activetab", ".link:active,.link:hover,.link:link,.link:visited",          $this->add_entry(".activetab", ".link:active,.link:hover,.link:link,.link:visited",
263                                                   array("text-decoration" => "none",                           array("text-decoration" => "none",
264                                                             "color" => "#000000"));                                 "color" => "#000000"));
265    
266                  $this->add_entry(".activetab", ".tabhidden",          $this->add_entry(".activetab", ".tabhidden",
267                                                   array("border" => "1px solid #999999",                                                                             array("border" => "1px solid #999999",                          
268                                                             "padding-left" => "5px",                                 "padding-left" => "5px",
269                                                             "padding-right" => "5px",                                 "padding-right" => "5px",
270                                                             "background-color" => "#eeeeee",                                 "background-color" => "#eeeeee",
271                                                             "text-align" => "center",                                 "text-align" => "center",
272                                                             "white-space" => "nowrap",                                 "white-space" => "nowrap",
273                                                             "font-family" => "arial",                                 "font-family" => "arial",
274                                                             "font-size" => "10pt"));                                 "font-size" => "10pt"));
275    
276                  $this->add_entry(".activetab", ".tabselected",          $this->add_entry(".activetab", ".tabselected",
277                                                   array("border-left" => "1px solid #999999",                           array("border-left" => "1px solid #999999",
278                                                             "border-top" => "1px solid #999999",                                 "border-top" => "1px solid #999999",
279                                                             "border-right" => "1px solid #999999",                                 "border-right" => "1px solid #999999",
280                                                             "padding-left" => "5px",                                 "padding-left" => "5px",
281                                                             "padding-right" => "5px",                                 "padding-right" => "5px",
282                                                             "text-align" => "center",                                 "text-align" => "center",
283                                                             "white-space" => "nowrap",                                 "white-space" => "nowrap",
284                                                             "font-family" => "arial",                                 "font-family" => "arial",
285                                                             "font-size" => "10pt"));                                 "font-size" => "10pt"));
286    
287                  $this->add_entry(".activetab", ".content",          $this->add_entry(".activetab", ".content",
288                                                   array("border-left" => "1px solid #a1a1a1",                           array("border-left" => "1px solid #a1a1a1",
289                                                             "border-right" => "1px solid #a1a1a1",                                 "border-right" => "1px solid #a1a1a1",
290                                                             "border-bottom" => "1px solid #a1a1a1",                                 "border-bottom" => "1px solid #a1a1a1",
291                                                             "position" => "relative",                                 "position" => "relative",
292                                                             "z-index" => "100"));                                 "z-index" => "100"));
293    
294                  $this->add_entry(".activetab", ".content_visible",          $this->add_entry(".activetab", ".content_visible",
295                                                   array("position" => "absolute",                           array("position" => "absolute",
296                                                             "left" => "0px",                                 "left" => "0px",
297                                                             "top" => "0px",                                 "top" => "0px",
298                                                             "visibility" => "visible",                                 "visibility" => "visible",
299                                                             "z-index" => "50",                                 "z-index" => "50",
300                                                             "padding" => "5px 5px 5px 5px"));                                 "padding" => "5px 5px 5px 5px"));
301    
302                  $this->add_entry(".activetab", ".content_hidden",          $this->add_entry(".activetab", ".content_hidden",
303                                                   array("position" => "absolute",                           array("position" => "absolute",
304                                                             "left" => "0px",                                 "left" => "0px",
305                                                             "top" => "0px",                                 "top" => "0px",
306                                                             "visibility" => "hidden",                                 "visibility" => "hidden",
307                                                             "z-index" => "50",                                 "z-index" => "50",
308                                                             "padding" => "5px 5px 5px 5px"));                                 "padding" => "5px 5px 5px 5px"));
309          }      }
310            
311  }  }
312  ?>  ?>
Legend:
Removed from v.1.1  
changed lines
  Added in v.1.2
MailToCvsAdmin">MailToCvsAdmin
 ViewVC Help
Powered by ViewVC 1.1.26 RSS 2.0 feed