oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed Tab Form for better behavior under older browsers, less resource usage, and a cookie bug that would log out the users.

Browse source
This commit is contained in:
JT Smith 2003-07-11 04:59:54 +00:00
parent ba7640aa02
commit f67226545b
4 changed files with 71 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

3
docs/credits.txt
View file

@ -95,6 +95,3 @@ HTML Area............................interactivetools.com
Classic Rich Edit....................Bratta
Tab DHTML............................Garrett Smith
dhtmlkitchen.com

14
lib/WebGUI/TabForm.pm
View file

@ -171,10 +171,6 @@ Returns an HTML string with all the necessary components to draw the tab form.
sub print {
my $output = '
<script src="'.$session{config}{extrasURL}.'/tabs/utils.js" type="text/javascript"></script>
<script src="'.$session{config}{extrasURL}.'/tabs/viewport.js" type="text/javascript"></script>
<script src="'.$session{config}{extrasURL}.'/tabs/global.js" type="text/javascript"></script>
<script src="'.$session{config}{extrasURL}.'/tabs/cookie.js" type="text/javascript"></script>
<script src="'.$session{config}{extrasURL}.'/tabs/tabs.js" type="text/javascript"></script>
<link href="'.$session{config}{extrasURL}.'/tabs/tabs.css" rel="stylesheet" rev="stylesheet" type="text/css">
';
@ -184,12 +180,8 @@ sub print {
my $tabs;
my $form;
foreach my $key (keys %{$_[0]->{_tab}}) {
$tabs .= '<span id="tab'.$i.'" class="tab';
if ($i == 1) {
$tabs .= ' tabActive';
}
$tabs .= '">'.$_[0]->{_tab}{$key}{label}.'</span> ';
$form .= '<div id="content'.$i.'" class="tabBody"><table>';
$tabs .= '<span onclick="toggleTab('.$i.')" id="tab'.$i.'" class="tab">'.$_[0]->{_tab}{$key}{label}.'</span> ';
$form .= '<div id="tabcontent'.$i.'" class="tabBody"><table>';
$form .= $_[0]->{_tab}{$key}{form}->printRowsOnly;
$form .= '</table></div>';
$i++;
@ -197,7 +189,7 @@ sub print {
$output .= '<div class="tabs">'.$tabs.$_[0]->{_submit}.'</div>';
$output .= $form;
$output .= '</form>';
$output .= '<script>tabInit();</script>';
$output .= '<script>var numberOfTabs = '.($i-1).'; initTabs();</script>';
return $output;
}

40
www/extras/tabs/tabs.css Normal file
View file

@ -0,0 +1,40 @@
.tab {
display: inline;
text-decoration: none;
margin-right: 3px;
font-weight: bold;
padding: 2px 9px 1px 9px;
z-index: 100;
border-bottom-width: 0;
border-top-width: 1 !important;
border-bottom-width: 0px !important;
}
.tabBody {
width: auto;
position: relative;
padding: 8px 12px 12px 12px;
z-index: 500;
}
div.tabs {
position: relative;
top: 2px;
left: 8px;
white-space: nowrap;
cursor: default !important;
z-index: 10000;
}
.tabHover {
z-index: 1200;
border-bottom-width: 0;
}
.tabActive {
padding: 3px 9px 3px 9px;
z-index: 10000;
top: -2px;
}

28
www/extras/tabs/tabs.js Normal file
View file

@ -0,0 +1,28 @@
function hoverOn(){
this.className = 'tab tabHover';
}
function hoverOff(){
this.className = 'tab';
}
function toggleTab(i){
if (document.getElementById){
for (f=1;f<numberOfTabs+1;f++){
document.getElementById('tabcontent'+f).style.display='none';
document.getElementById('tab'+f).className = 'tab';
document.getElementById('tab'+f).onmouseover = hoverOn;
document.getElementById('tab'+f).onmouseout = hoverOff;
}
document.getElementById('tabcontent'+i).style.display='block';
document.getElementById('tab'+i).className = 'tab tabActive';
document.getElementById('tab'+i).onmouseover = '';
document.getElementById('tab'+i).onmouseout = '';
}
}
function initTabs () {
toggleTab(1);
}