jQuery Example: »jQuery Accessible Tabs«
Mit Hilfe von jQuery und dem jQuery-Plugin "UI (User Interface)" lassen sich viele Effekte in die Webseite einbinden.
So lassen sich z.B. Tabs leicht Realisieren und das ganze sogar ohne großen Verlust bei Deaktivieren JavaScript im Browser.
Original stammt das Script "jQuery Accessible Tabs" von Dirk Ginader und wurde von mir minimal geändert um auch Listen in den Tab-Content zu benutzen.
Dieses Beispiel dient zur Ansicht der jQuery Accessible Tabs und ist Bestandteil des Artikels jQuery Accessible Tabs aus meinen Blog.
HTML Code
<div class="tabs"> <h6>some dummy headline</h6> <div class="tabbody"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <h3>Lorem ipsum</h3> <p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius</p> </div> <h6>another dummy headline</h6> <div class="tabbody"> <p>Integer tincidunt. Cras dapibus. Vivamus elementum nisi.</p> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel.</p> </div> <h6>anything else</h6> <div class="tabbody"> <p>Here could be your content</p> </div> </div>
Head Code
<script type="text/javascript" src="http://fkblog.de/examples/jquery/tabs/tabs.js"></script>
<script type="text/javascript">
// JQuery UI Tabs
jQuery(document).ready(function(){
jQuery(".tabs").accessibleTabs({
tabhead:'h6',
fx:"fadeIn"
});
});
</script>
Listen im Tab
- List 1
- List 2
- List 3
- List 4
Stylesheet
.tabs {
overflow:hidden;
margin-left:1em;
border-top: 10px solid #fff;
border-bottom: 10px solid #fff;
}
.tabs h6 { display: block; }
.tabs .tabbody p { line-height: 1.5em; margin: 0 0 0.5em 0; }
/* Tab Lists */
.tabs ul.tabfield {
overflow:hidden;
margin: 0;
padding: 0;
}
.tabs ul.tabfield li {
float: left;
margin: 0 0.3em 0 0;
list-style-type: none;
}
.tabbody {
text-align:left;
width:auto;
padding: 0.5em;
border: 1px solid #999;
}
.tabs ul.tabfield li a {
display: block;
float: left;
border: 1px solid #ddd;
border-bottom: none;
padding: 3px .5em 4px;
font-size: 15px;
margin-right: .4em;
-moz-border-radius-topleft: 3px;
-khtml-border-top-left-radius: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-khtml-border-top-right-radius: 3px;<
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
}
.tabs ul.tabfield li.current a {
border: 1px solid #999;
border-bottom: none;
font-weight: bold;
color: #000;
}
.js .tabs .current-info,
.js .tabs .accessibletabsanchor{
position:absolute;
left:-999em;
}
js .tabs .tabbody{
clear:both;
}
.js .tabs h6 {
display: none;
}
Benötigte Dateien
Original Script jQuery Accessible Tabs by Dirk Ginader