Ganz so einfach ist es eben nicht, wenn man nicht gleich eine Erweiterung daraus machen möchte:
1) Ein Template j_tabcontrol.html5 angelegt, welches im Seitenlayout mit ausgewählt wird:
HTML-Code:
<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'http://code.jquery.com/ui/1.10.4/jquery-ui.js';
?>
<script>
$(function() {
$("#tabs").tabs({active: 0});
})(jQuery);
</script>
2) Im Artikel, wo die Tabs auftauschen sollen, habe ich einige HTL-Contentelemente eingesetzt, um die Tabs zu formatieren:
HTML-Code:
HTML-Element:
<div id="tabs" class="ce_tabcontrol">
<ul>
<li><a href="{{env::request}}#tabs-1">Tab 1</a></li>
<li><a href="{{env::request}}#tabs-2">Tab 2</a></li>
<li><a href="{{env::request}}#tabs-3">Tab 3</a></li>
</ul>
<div class="panes">
----------------------------------------------------------------
HTML-Element:
<div id="tabs-1">
----------------------------------------------------------------
TEXT FÜR 1. TAB
----------------------------------------------------------------
HTML-Element:
</div>
<div id="tabs-2">
----------------------------------------------------------------
TEXT FÜR 2. TAB
----------------------------------------------------------------
HTML-Element:
</div>
<div id="tabs-3">
----------------------------------------------------------------
TEXT FÜR 3. TAB
----------------------------------------------------------------
HTML-Element:
</div>
</div>
</div>
3) Eine gewisse Menge an CSS braucht es auch, damit es so aussieht:
Code:
.ce_tabcontrol {
margin-bottom:20px;
}
.ce_tabcontrol .ce_text p {
margin-right:0;
margin-left:0;
font:13px "TitilliumText22LMedium",Arial,sans-serif;
color:#666;
}
.ui-helper-reset {
margin:0;
padding:0;
font-size:100%;
line-height:1.3;
text-decoration:none;
border: 0 none;
list-style: none outside none;
outline: 0 none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
display:table;
border-collapse:collapse;
content:"";
}
.ui-helper-clearfix:after {
clear:both;
}
.ui-helper-clearfix {
min-height:0px;
}
.ui-tabs {
position:relative;
padding:.2em;
}
.ui-tabs .ui-tabs-nav {
margin:0;
padding:.2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
top:0;
position:relative;
float:left;
padding:0;
border-bottom-width:0;
list-style:none outside none;
margin:1px 0.2em 0 0;
white-space:nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
float:left;
padding:.5em 1em;
text-decoration:none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom:-1px;
padding-bottom:1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
cursor:text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
cursor:pointer;
}
.ui-tabs .ui-tabs-panel {
display:block;
padding:1em 1.4em;
border:0px;
background:none;
}
.ui-widget {
font-family:Verdana,Arial,Helvetica,sans-serif;
line-height:1.1em;
}
.ui-widget-content {
border:1px solid #aaa;
color:#222;
background: url("files/theme_data/img/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% #fff;
}
.ui-widget-content a {
color:#222;
}
.ui-widget-header {
border:1px solid #aaa;
font-weight:bold;
color:#222;
background: url("files/theme_data/img/ui-bg_highlight-soft_75_cccccc_1x100.png") repeat-x scroll 50% 50% #ccc;
}
.ui-widget-header a {
color:#222;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border:1px solid #d3d3d3;
font-weight:normal;
color:#555;
background: url("files/theme_data/img/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #e6e6e6;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
text-decoration:none;
color:#555;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
border:1px solid #999;
font-weight:normal;
color:#222;
background: #dadada url(files/theme_data/img/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
text-decoration:none;
color:#222;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border:1px solid #aaa;
font-weight:normal;
color:#222;
background: url("files/theme_data/img/ui-bg_glass_65_ffffff_1x400.png") repeat-x scroll 50% 50% #fff;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
text-decoration:underline;
color:#222;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
border-bottom-right-radius:4px;
behavior:url('assets/css3pie/1.0.0/PIE.htc');
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
border-bottom-left-radius:4px;
behavior:url('assets/css3pie/1.0.0/PIE.htc');
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
border-top-right-radius:4px;
behavior:url('assets/css3pie/1.0.0/PIE.htc');
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
border-top-left-radius:4px;
behavior:url('assets/css3pie/1.0.0/PIE.htc');
}
Ich hoffe, ich habe nichts übersehen.
Zitieren
Zitat von 00-schneider
Lesezeichen