diff --git a/html/style-classic.css b/html/style-classic.css index ae70d4123..c24061e9e 100644 --- a/html/style-classic.css +++ b/html/style-classic.css @@ -2316,4 +2316,107 @@ span.warning { background-color: #eddadd; padding:10px; border:red solid 1px; -} \ No newline at end of file +} + /**********************************************************************************************************************/ + /* LI as list + * Tabs like row + ****************************************************************************/ + ul.tab_row { + padding-top: 15px; + display:block; + width:96%; + padding-left:2%; + padding-right:2%; + list-style: none; + margin-left:2px; + } + ul.tab_row a { + display:block; + width:100%; + } + li.tab_row_selected { + display:block; + width:90%; + background: #C2E3FC; /* Old browsers */ + background: -moz-linear-gradient(top, #C2E3FC 0%, #6393c1 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C2E3FC), color-stop(100%,#6393c1)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* IE10+ */ + background: linear-gradient(to bottom, #C2E3FC 0%,#6393c1 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C2E3FC', endColorstr='#6393c1',GradientType=0 ); /* IE6-9 */ + color:whitesmoke; + margin-left: 2px; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border:1px #879ed4 solid; + font-weight: bold; + padding:5px; + margin-top:13px; + + + } + li.tab_row { + display:block; + width:90%; + background-color: inherit; + color:inherit;/*! margin-left: 0px; */ + /*! padding: 5px; */ + /*! border-top-left-radius: 10px; */ + /*! border-top-right-radius: 10px; */ + border:1px #879ed4 solid; + background: whitesmoke; + margin-top:13px; + + } + li.tab_row:hover { + display:block; + background-color: lightblue; + color:wheat;margin-left: 2px; + padding: 5px; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border:1px #879ed4 solid; + white-space: nowrap; + + } + @media only screen and (min-width: 1280px) { + li.tab_row { + display:block; + background-color: inherit; + + + padding: 15px 7px 0px 10px; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border:1px #879ed4 solid; + + } + li.tab_row:hover { + display:block; + background-color: lightblue; + color:wheat;margin-left: 2px; + padding: 15px 7px 0px 10px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + border:1px #879ed4 solid; + } + li.tab_row_selected { + padding: 12px 15px 15px 15px; + } + } + ul.tab_row a { + text-decoration: none; + color:inherit; + display:block; + white-space: nowrap; + width: 100%; + height: 100%; + cursor :pointer; + } + ul.tab_row a:hover { + text-decoration: none; + color:white; + display:block; + background-color: lightblue; + } \ No newline at end of file diff --git a/html/style-classic7.css b/html/style-classic7.css index 51105a1e9..0842dec2b 100644 --- a/html/style-classic7.css +++ b/html/style-classic7.css @@ -2323,4 +2323,107 @@ span.warning { font-weight: bold; background-color: #eddadd; padding:10px; -} \ No newline at end of file +} +/**********************************************************************************************************************/ + /* LI as list + * Tabs like row + ****************************************************************************/ + ul.tab_row { + padding-top: 15px; + display:block; + width:96%; + padding-left:2%; + padding-right:2%; + list-style: none; + margin-left:2px; + } + ul.tab_row a { + display:block; + width:100%; + } + li.tab_row_selected { + display:block; + width:90%; + background: #C2E3FC; /* Old browsers */ + background: -moz-linear-gradient(top, #C2E3FC 0%, #6393c1 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C2E3FC), color-stop(100%,#6393c1)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* IE10+ */ + background: linear-gradient(to bottom, #C2E3FC 0%,#6393c1 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C2E3FC', endColorstr='#6393c1',GradientType=0 ); /* IE6-9 */ + color:whitesmoke; + margin-left: 2px; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border:1px #879ed4 solid; + font-weight: bold; + padding:5px; + margin-top:13px; + + + } + li.tab_row { + display:block; + width:90%; + background-color: inherit; + color:inherit;/*! margin-left: 0px; */ + /*! padding: 5px; */ + /*! border-top-left-radius: 10px; */ + /*! border-top-right-radius: 10px; */ + border:1px #879ed4 solid; + background: whitesmoke; + margin-top:13px; + + } + li.tab_row:hover { + display:block; + background-color: lightblue; + color:wheat;margin-left: 2px; + padding: 5px; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border:1px #879ed4 solid; + white-space: nowrap; + + } + @media only screen and (min-width: 1280px) { + li.tab_row { + display:block; + background-color: inherit; + + + padding: 15px 7px 0px 10px; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border:1px #879ed4 solid; + + } + li.tab_row:hover { + display:block; + background-color: lightblue; + color:wheat;margin-left: 2px; + padding: 15px 7px 0px 10px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + border:1px #879ed4 solid; + } + li.tab_row_selected { + padding: 12px 15px 15px 15px; + } + } + ul.tab_row a { + text-decoration: none; + color:inherit; + display:block; + white-space: nowrap; + width: 100%; + height: 100%; + cursor :pointer; + } + ul.tab_row a:hover { + text-decoration: none; + color:white; + display:block; + background-color: lightblue; + } \ No newline at end of file diff --git a/html/style-light.css b/html/style-light.css index 1bb1762c9..df96649ce 100644 --- a/html/style-light.css +++ b/html/style-light.css @@ -2241,4 +2241,107 @@ span.warning { font-weight: bold; background-color: #eddadd; padding:10px; -} \ No newline at end of file +} + /**********************************************************************************************************************/ + /* LI as list + * Tabs like row + ****************************************************************************/ + ul.tab_row { + padding-top: 15px; + display:block; + width:96%; + padding-left:2%; + padding-right:2%; + list-style: none; + margin-left:2px; + } + ul.tab_row a { + display:block; + width:100%; + } + li.tab_row_selected { + display:block; + width:90%; + background: #C2E3FC; /* Old browsers */ + background: -moz-linear-gradient(top, #C2E3FC 0%, #6393c1 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C2E3FC), color-stop(100%,#6393c1)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* IE10+ */ + background: linear-gradient(to bottom, #C2E3FC 0%,#6393c1 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C2E3FC', endColorstr='#6393c1',GradientType=0 ); /* IE6-9 */ + color:whitesmoke; + margin-left: 2px; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border:1px #879ed4 solid; + font-weight: bold; + padding:5px; + margin-top:13px; + + + } + li.tab_row { + display:block; + width:90%; + background-color: inherit; + color:inherit;/*! margin-left: 0px; */ + /*! padding: 5px; */ + /*! border-top-left-radius: 10px; */ + /*! border-top-right-radius: 10px; */ + border:1px #879ed4 solid; + background: whitesmoke; + margin-top:13px; + + } + li.tab_row:hover { + display:block; + background-color: lightblue; + color:wheat;margin-left: 2px; + padding: 5px; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border:1px #879ed4 solid; + white-space: nowrap; + + } + @media only screen and (min-width: 1280px) { + li.tab_row { + display:block; + background-color: inherit; + + + padding: 15px 7px 0px 10px; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border:1px #879ed4 solid; + + } + li.tab_row:hover { + display:block; + background-color: lightblue; + color:wheat;margin-left: 2px; + padding: 15px 7px 0px 10px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + border:1px #879ed4 solid; + } + li.tab_row_selected { + padding: 12px 15px 15px 15px; + } + } + ul.tab_row a { + text-decoration: none; + color:inherit; + display:block; + white-space: nowrap; + width: 100%; + height: 100%; + cursor :pointer; + } + ul.tab_row a:hover { + text-decoration: none; + color:white; + display:block; + background-color: lightblue; + } \ No newline at end of file diff --git a/include/lib/output_html_tab.class.php b/include/lib/output_html_tab.class.php index 943faa4e3..cf54c5831 100644 --- a/include/lib/output_html_tab.class.php +++ b/include/lib/output_html_tab.class.php @@ -37,24 +37,101 @@ class Output_Html_Tab { private $a_tabs; //!< array of html tabs - + private $class_tab; //!< for normal tab + private $class_tab_selected; //!< for class_tab_selected + private $mode; //!< mode default tabs /** *@example html_tab.test.php */ function __construct() { $this->a_tabs=[]; + $this->class_tab="tabs"; + $this->class_tab_selected="tabs_selected"; } /** - * Add Html_Tab + * get the mode , possible value are row or tabs + * @return mixed + */ + public function get_mode() + { + return $this->mode; + return $this; + } + + /** + * set the mode , possible values are row or tabs + * @param mixed $mode + */ + public function set_mode($mode) + { + if ($mode != "row" && $mode != "tab") { + throw new Exception(_("OUTPUTHTML070 Mode invalide")); + } + $this->mode = $mode; + if ($mode == "row") { + $this->set_class_tab_selected("tab_row_selected"); + $this->set_class_tab("tab_row"); + } + if ( $mode == "tab") { + $this->set_class_tab_selected("tabs_selected"); + $this->set_class_tab("tabs"); + + } + return $this; + } + + /** + * Add Html_Tab * @param Html_Tab $p_html_tab */ function add(Html_Tab $p_html_tab) { $this->a_tabs[]=clone $p_html_tab; + } - + + /** + * get the CSS class of tabs + * @return mixed + */ + public function get_class_tab() + { + return $this->class_tab; + return $this; + } + + /** + * set the CSS class of tabs, default is tabs + * @param mixed $class_tab + */ + public function set_class_tab($class_tab) + { + $this->class_tab = $class_tab; + return $this; + } + + /** + * get the CSS class of tabs_selected + * @return mixed + */ + public function get_class_tab_selected() + { + return $this->class_tab_selected; + return $this; + } + + /** + * set the CSS class of tabs, default is tabs_selected + * @param mixed $class_tab_selected + */ + public function set_class_tab_selected($class_tab_selected) + { + $this->class_tab_selected = $class_tab_selected; + return $this; + } + /** * Build the javascript to change the class name of the selected tab, hide other div and show the selected one * @param string $p_not_hidden id of the showed tab @@ -66,20 +143,32 @@ class Output_Html_Tab $nb=count($this->a_tabs); for ($i =0 ; $i < $nb;$i++) { - if ( $this->a_tabs[$i]->get_id() != $p_not_hidden) { - $r .= sprintf("$('div%s').hide();",$this->a_tabs[$i]->get_id() ); - $r .= sprintf("$('tab%s').className='tabs';",$this->a_tabs[$i]->get_id() ); - } else { - $r .= sprintf("$('div%s').show();",$p_not_hidden ); - $r .= sprintf("$('tab%s').className='tabs_selected';",$p_not_hidden ); - + if ($this->get_mode()=="tab") { + + if ( $this->a_tabs[$i]->get_id() != $p_not_hidden) { + $r .= sprintf("$('div%s').hide();",$this->a_tabs[$i]->get_id() ); + $r .= sprintf("$('tab%s').className='%s';",$this->a_tabs[$i]->get_id(),$this->class_tab ); + } else { + $r .= sprintf("$('div%s').show();",$p_not_hidden ); + $r .= sprintf("$('tab%s').className='%s';",$p_not_hidden ,$this->class_tab_selected); + + } + } elseif ($this->get_mode()=="row") { + if ( $this->a_tabs[$i]->get_id() != $p_not_hidden) { + $r .= sprintf("Effect.BlindUp('div%s',{duration : 1.0});",$this->a_tabs[$i]->get_id() ); + $r .= sprintf("$('tab%s').className='%s';",$this->a_tabs[$i]->get_id(),$this->class_tab ); + } else { + $r .= sprintf("Effect.SlideDown('div%s',{duration : 1.0});",$p_not_hidden ); + $r .= sprintf("$('tab%s').className='%s';",$p_not_hidden ,$this->class_tab_selected); + + } } } return $r; } /** * print the html + javascript code of the tabs and the div - * + * */ function output() { @@ -88,11 +177,11 @@ class Output_Html_Tab { return; } - echo '