holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Introduce vertical tabs

Browse Source
This commit is contained in:
Hadi Nategh 2016-01-28 11:26:22 +00:00
parent 64006d366a
commit beacb4fc01
2 changed files with 57 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
etemplate/js/et2_widget_tabs.js
View File

@ -36,10 +36,16 @@ var et2_tabbox = et2_valueWidget.extend([et2_IInput,et2_IResizeable],
'default': false,
'description': 'Set to true if tabs should be added to tabs from read from template, default false if not'
},
tab_height: {
'tab_height': {
name: 'Tabs innerHeight',
default: '',
description: 'Set the innerHeight for the tab content'
},
'align_tabs': {
name: 'Tabs alignment',
type: 'string',
default: 'h',
description: 'Set tabs and their headers arrangment either horizental (h) or vertical (v). Default value is horizental.'
}
},
@ -57,7 +63,7 @@ var et2_tabbox = et2_valueWidget.extend([et2_IInput,et2_IResizeable],
// Create the outer tabbox container
this.container = $j(document.createElement("div"))
.addClass("et2_tabbox");
// Create the upper container for the tab flags
this.flagContainer = $j(document.createElement("div"))
.addClass("et2_tabheader")
@ -340,8 +346,25 @@ var et2_tabbox = et2_valueWidget.extend([et2_IInput,et2_IResizeable],
entry.contentDiv = $j(document.createElement("div"))
.addClass("et2_tabcntr")
.appendTo(this.tabContainer);
if (this.options.align_tabs == 'v') {
entry.flagDiv.unbind('click');
entry.flagDiv.text("");
$j(document.createElement('div'))
.addClass('et2_tabtitle')
.text(entry.label || "Tab")
.click({"tabs": this, "idx": i}, function(e) {
e.data.tabs.flagContainer.children(":eq(" + e.data.idx + ")").toggleClass('active');
})
.appendTo(entry.flagDiv);
entry.contentDiv.appendTo(entry.flagDiv);
}
}
if (this.options.align_tabs == 'v'){
this.container.addClass('vertical');
this.tabContainer.hide();
}
// Check for a passed in value
if(this.options.value)
{

31
etemplate/templates/default/etemplate2.css
View File

@ -869,6 +869,37 @@ ul.et2_link_string {
background-repeat: repeat-x;
white-space: nowrap;
}
.et2_tabbox.vertical .et2_tabflag {
display: block;
padding: 0;
}
.et2_tabbox.vertical .et2_tabflag .et2_tabcntr{
display: none;
}
.et2_tabbox.vertical .et2_tabflag.active .et2_tabcntr {
display: block;
}
.et2_tabbox.vertical .et2_tabflag div.et2_tabtitle {
background-color: #C4C4C4;
padding: 6px 0 6px 0;
}
.et2_tabbox.vertical .et2_tabflag div.et2_tabtitle:before {
content: "+";
color: white;
font-size: 12pt;
font-weight: bold;
padding: 3px;
float: right;
background-color: #636363;
border-radius: 3px;
margin-top: -6px;
}
.et2_tabbox.vertical .et2_tabflag.active div.et2_tabtitle:before {
content: "\2212";
}
.et2_taglist_ro ul {
margin: 0px;
padding: 0px;