FREND Components: Tabs
Einfach verwendbvare Widgets, Komponenten ohne weitere Abhängigkeiten, zugänglich Aria-kompatibel
Nicht IE8 kompatibel
Tab panel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tab panel 2
Mauris rhoncus commodo sapien, eu porttitor libero gravida at. Maecenas a dapibus lorem. Suspendisse fermentum neque ligula, et dapibus libero volutpat scelerisque. Cras vitae enim interdum, fringilla sapien quis, posuere purus. Morbi dictum arcu sapien, eget malesuada lorem ultricies non. Etiam tellus neque, dapibus ac rutrum ut, mollis vel nibh.
Tab panel 3
Quisque facilisis fermentum ex, in iaculis felis porta et. Phasellus sapien neque, sagittis vitae erat vitae, consequat vulputate lacus. Donec sit amet mattis ipsum. Ut metus ipsum, consectetur tincidunt imperdiet sed, consequat sed urna. Morbi id feugiat magna. Nunc ut aliquet quam. Morbi auctor sapien quam. Cras lorem neque, imperdiet ut mollis non, cursus scelerisque augue.
Vorteile:
- Absolut keine Abhängigkeiten! Kein jQuery.
- sehr klein, ca. 4kb
- tastaturnavigierbar, Aria compliant, zugänglich
- destroy() und init() verfügbar, viele Options
- Mit TAB zum tab springen und dann mit Cursortasten navigieren
Nachteile:
- Nicht IE8 kompatibel
- Ein Haufen CSS Classes
- Nicht ganz einfach zu stylen
Fazit:
- Vewrwenden!
Quellen:
var myTabs = Frtabs({
// String - Outer container selector, hook for JS init() method
selector: '.js-fr-tabs',
// String - List selector to transform into tablist
tablistSelector: '.js-fr-tabs__tablist',
// String - Containers which hold content, toggled via tabs
tabpanelSelector: '.js-fr-tabs__panel',
// String - Class name that will be added to the selector when the component has been initialised
tabsReadyClass: 'fr-tabs--is-ready'
});