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