Output_Html_Tab : cosmetic
This commit is contained in:
Dany De Bontridder
parent
6c4c728d17
commit
4e5029c4b7
5 changed files with 131 additions and 27 deletions
|
|
@ -2419,4 +2419,11 @@ span.warning {
|
|||
color:white;
|
||||
display:block;
|
||||
background-color: lightblue;
|
||||
}
|
||||
}
|
||||
span.tab_row {
|
||||
font-style: italic;
|
||||
font-size:90%;
|
||||
}
|
||||
span.title_tab_row {
|
||||
|
||||
}
|
||||
|
|
@ -55,7 +55,6 @@ input:focus {
|
|||
font-style: italic;
|
||||
|
||||
}
|
||||
|
||||
a.mtitle span.notice {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -2329,13 +2328,13 @@ span.warning {
|
|||
* Tabs like row
|
||||
****************************************************************************/
|
||||
ul.tab_row {
|
||||
padding-top: 15px;
|
||||
padding-top: 25px;
|
||||
display:block;
|
||||
width:96%;
|
||||
padding-left:2%;
|
||||
padding-right:2%;
|
||||
width:100%;
|
||||
padding-left:0%;
|
||||
padding-right:0%;
|
||||
list-style: none;
|
||||
margin-left:2px;
|
||||
margin-left:0px;
|
||||
}
|
||||
ul.tab_row a {
|
||||
display:block;
|
||||
|
|
@ -2343,7 +2342,7 @@ span.warning {
|
|||
}
|
||||
li.tab_row_selected {
|
||||
display:block;
|
||||
width:90%;
|
||||
width:96%;
|
||||
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+ */
|
||||
|
|
@ -2353,7 +2352,7 @@ span.warning {
|
|||
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;
|
||||
/*! margin-left: 2px; */
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
border:1px #879ed4 solid;
|
||||
|
|
@ -2362,15 +2361,17 @@ span.warning {
|
|||
margin-top:13px;
|
||||
|
||||
|
||||
padding-left: 2%;
|
||||
padding-right: 2%;
|
||||
}
|
||||
li.tab_row {
|
||||
display:block;
|
||||
width:90%;
|
||||
width:auto;
|
||||
background-color: inherit;
|
||||
color:inherit;/*! margin-left: 0px; */
|
||||
/*! padding: 5px; */
|
||||
/*! border-top-left-radius: 10px; */
|
||||
/*! border-top-right-radius: 10px; */
|
||||
padding: 5px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
border:1px #879ed4 solid;
|
||||
background: whitesmoke;
|
||||
margin-top:13px;
|
||||
|
|
@ -2391,9 +2392,8 @@ span.warning {
|
|||
li.tab_row {
|
||||
display:block;
|
||||
background-color: inherit;
|
||||
|
||||
|
||||
padding: 15px 7px 0px 10px;
|
||||
padding: 20px 15px 15px 20px;
|
||||
margin: 20px 15px 15px 15px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
border:1px #879ed4 solid;
|
||||
|
|
@ -2403,13 +2403,15 @@ span.warning {
|
|||
display:block;
|
||||
background-color: lightblue;
|
||||
color:wheat;margin-left: 2px;
|
||||
padding: 15px 7px 0px 10px;
|
||||
padding: 20px 15px 15px 20px;
|
||||
margin: 20px 15px 15px 15px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border:1px #879ed4 solid;
|
||||
}
|
||||
li.tab_row_selected {
|
||||
padding: 12px 15px 15px 15px;
|
||||
padding: 20px 15px 15px 20px;
|
||||
margin:20px 15px 15px 15px;
|
||||
}
|
||||
}
|
||||
ul.tab_row a {
|
||||
|
|
@ -2420,10 +2422,43 @@ span.warning {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
cursor :pointer;
|
||||
text-align: center;
|
||||
|
||||
|
||||
|
||||
}
|
||||
ul.tab_row a:hover {
|
||||
text-decoration: none;
|
||||
color:white;
|
||||
display:block;
|
||||
background-color: lightblue;
|
||||
}
|
||||
/*! text-align: center; */
|
||||
}
|
||||
div.tab_row {
|
||||
background-color: aliceblue;
|
||||
border-color: #879ed4;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
span.tab_row {
|
||||
font-style: italic;
|
||||
font-size:90%;
|
||||
}
|
||||
span.title_tab_row {
|
||||
font-size:105%;
|
||||
font-weight: bold;
|
||||
background-color: darkblue;
|
||||
color:white;
|
||||
padding : 3px;
|
||||
}
|
||||
span.tab_row {
|
||||
font-style: italic;
|
||||
font-size:90%;
|
||||
}
|
||||
span.title_tab_row {
|
||||
font-size:105%;
|
||||
font-weight: bold;
|
||||
background-color: darkblue;
|
||||
color:white;
|
||||
padding : 3px;
|
||||
}
|
||||
|
|
@ -2292,6 +2292,7 @@ span.warning {
|
|||
border:1px #879ed4 solid;
|
||||
background: whitesmoke;
|
||||
margin-top:13px;
|
||||
padding:5px;
|
||||
|
||||
}
|
||||
li.tab_row:hover {
|
||||
|
|
@ -2311,7 +2312,7 @@ span.warning {
|
|||
background-color: inherit;
|
||||
|
||||
|
||||
padding: 15px 7px 0px 10px;
|
||||
padding: 15px 7px 15px 10px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
border:1px #879ed4 solid;
|
||||
|
|
@ -2338,10 +2339,24 @@ span.warning {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
cursor :pointer;
|
||||
padding: 3px;
|
||||
}
|
||||
ul.tab_row a:hover {
|
||||
text-decoration: none;
|
||||
color:white;
|
||||
display:block;
|
||||
background-color: lightblue;
|
||||
}
|
||||
}
|
||||
|
||||
span.tab_row {
|
||||
font-style: italic;
|
||||
font-size:90%;
|
||||
}
|
||||
span.title_tab_row {
|
||||
font-size:105%;
|
||||
font-weight: bold;
|
||||
background-color: darkblue;
|
||||
color:white;
|
||||
padding : 3px;
|
||||
|
||||
}
|
||||
|
|
@ -35,7 +35,7 @@ class Html_Tab
|
|||
private $content ; //!< static content of the tab
|
||||
private $mode ; //!< possible values are static if the content is static, ajax for calling an ajax, link for a html link, default static
|
||||
private $link; //!< the javascript or an html link, depending of the $mode
|
||||
|
||||
private $comment; //!< comment to add when we use the row
|
||||
/**
|
||||
*@example html_tab.test.php
|
||||
*/
|
||||
|
|
@ -44,7 +44,27 @@ class Html_Tab
|
|||
$this->id=$p_id;
|
||||
$this->title=$p_title;
|
||||
$this->mode='static';
|
||||
$this->comment="";
|
||||
}
|
||||
|
||||
/**
|
||||
* @return string
|
||||
*/
|
||||
public function get_comment()
|
||||
{
|
||||
return $this->comment;
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param string $comment
|
||||
*/
|
||||
public function set_comment($comment)
|
||||
{
|
||||
$this->comment = $comment;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function get_id()
|
||||
{
|
||||
return $this->id;
|
||||
|
|
|
|||
|
|
@ -155,10 +155,10 @@ class Output_Html_Tab
|
|||
}
|
||||
} 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("Effect.BlindUp('div%s',{duration : 0.7});",$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("Effect.SlideDown('div%s',{duration : 0.7});",$p_not_hidden );
|
||||
$r .= sprintf("$('tab%s').className='%s';",$p_not_hidden ,$this->class_tab_selected);
|
||||
|
||||
}
|
||||
|
|
@ -166,6 +166,18 @@ class Output_Html_Tab
|
|||
}
|
||||
return $r;
|
||||
}
|
||||
|
||||
/**
|
||||
* When printing row , a comment is written if not empty
|
||||
* @param $p_index
|
||||
*/
|
||||
protected function print_comment($p_index) {
|
||||
printf ('<span class="%s"> %s </span>',
|
||||
$this->get_class_tab(),
|
||||
$this->a_tabs[$p_index]->get_comment()
|
||||
);
|
||||
|
||||
}
|
||||
/**
|
||||
* print the html + javascript code of the tabs and the div
|
||||
*
|
||||
|
|
@ -188,7 +200,10 @@ class Output_Html_Tab
|
|||
printf ('<a id="%s" href="%s">',
|
||||
$this->a_tabs[$i]->get_id(),
|
||||
$this->a_tabs[$i]->get_link());
|
||||
echo $this->a_tabs[$i]->get_title();
|
||||
printf ('<span class="title_%s"> %s </span>',
|
||||
$this->get_class_tab(),
|
||||
$this->a_tabs[$i]->get_title()
|
||||
);
|
||||
echo '</a>';
|
||||
|
||||
break;
|
||||
|
|
@ -196,6 +211,11 @@ class Output_Html_Tab
|
|||
printf('<a id="%s" onclick="%s">',
|
||||
$this->a_tabs[$i]->get_id(),
|
||||
$this->a_tabs[$i]->get_link());
|
||||
printf ('<span class="title_%s"> %s </span>',
|
||||
$this->get_class_tab(),
|
||||
$this->a_tabs[$i]->get_title()
|
||||
);
|
||||
|
||||
echo $this->a_tabs[$i]->get_title();
|
||||
echo '</a>';
|
||||
break;
|
||||
|
|
@ -203,13 +223,20 @@ class Output_Html_Tab
|
|||
// show one , hide other
|
||||
$script=$this->build_js($this->a_tabs[$i]->get_id());
|
||||
printf('<a onclick="%s">', $script);
|
||||
echo $this->a_tabs[$i]->get_title();
|
||||
printf ('<span class="title_%s"> %s </span>',
|
||||
$this->get_class_tab(),
|
||||
$this->a_tabs[$i]->get_title()
|
||||
);
|
||||
|
||||
echo '</a>';
|
||||
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if ( $this->get_mode()=="row") {
|
||||
$this->print_comment($i);
|
||||
}
|
||||
echo '</li>';
|
||||
if ( $this->get_mode()=="row") {
|
||||
$this->print_div($i);
|
||||
|
|
@ -226,7 +253,7 @@ class Output_Html_Tab
|
|||
}
|
||||
private function print_div($p_index)
|
||||
{
|
||||
printf('<div id="div%s" style="display:none;clear:both">',$this->a_tabs[$p_index]->get_id());
|
||||
printf('<div id="div%s" style="display:none;clear:both" class="tab_row">',$this->a_tabs[$p_index]->get_id());
|
||||
echo $this->a_tabs[$p_index]->get_content();
|
||||
echo '</div>';
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue