TAB-uri CSS

Pentru a folosi tab-uri ca instrument de partajare elegantă a informaţiei, putem folosi plugin-uri predefinite sau putem crea, ajutându-ne de CSS şi JavaScript. Pentru a evita, din varii motive, folosirea JS, redau două variante-surogat.

Butoane tip radio

Codul

 

Rezultatul

Sed eu quam in magna facilisis sagittis scelerisque et est. Mauris tellus felis, hendrerit nec nunc auctor, dignissim vehicula lectus. Mauris at nisl urna. Aliquam erat volutpat. Aenean in lobortis enim. Integer scelerisque mauris ipsum, vitae faucibus nibh ullamcorper at. Fusce interdum accumsan tellus eu ornare. Nam scelerisque tortor a urna imperdiet imperdiet. Cras sed leo id libero sollicitudin fermentum. Fusce tristique ultrices neque quis vulputate.

Donec at ultrices velit. Sed vitae mattis sem. Suspendisse sit amet ligula vel dolor blandit congue id eget velit. Nunc laoreet ultrices velit in volutpat. Aenean mattis, sem ut sollicitudin vehicula, quam augue dapibus erat, non bibendum neque orci id odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce convallis ut orci sed gravida. Donec ac iaculis lorem, sit amet mattis quam. Ut fringilla nisi nulla, vel maximus urna volutpat at. Duis in arcu quis odio aliquet ultricies a eu lorem. Fusce dignissim faucibus laoreet. Pellentesque congue ex purus, at laoreet mi consequat nec.

Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
Donec eget pharetra risus. Ut sed dictum dolor, ac fringilla velit. Sed eu sapien magna. Duis ullamcorper, nisl quis maximus auctor, massa sem imperdiet ante, at tincidunt nibh metus eu risus. Ut luctus risus tellus.

Sursa: CSS-Tricks.com

Folosirea DETAILS+SUMMARY

Codul

 

Rezultatul

Lorem ipsum dolor 
Sectiunea 1

Sed eu quam in magna facilisis sagittis scelerisque et est. Mauris tellus felis, hendrerit nec nunc auctor, dignissim vehicula lectus. Mauris at nisl urna. Aliquam erat volutpat. Aenean in lobortis enim. Integer scelerisque mauris ipsum, vitae faucibus nibh ullamcorper at. Fusce interdum accumsan tellus eu ornare. Nam scelerisque tortor a urna imperdiet imperdiet. Cras sed leo id libero sollicitudin fermentum. Fusce tristique ultrices neque quis vulputate.

Phasellus porttitor 
Sectiunea 2

Donec at ultrices velit. Sed vitae mattis sem. Suspendisse sit amet ligula vel dolor blandit congue id eget velit. Nunc laoreet ultrices velit in volutpat. Aenean mattis, sem ut sollicitudin vehicula, quam augue dapibus erat, non bibendum neque orci id odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce convallis ut orci sed gravida. Donec ac iaculis lorem, sit amet mattis quam. Ut fringilla nisi nulla, vel maximus urna volutpat at. Duis in arcu quis odio aliquet ultricies a eu lorem. Fusce dignissim faucibus laoreet. Pellentesque congue ex purus, at laoreet mi consequat nec.

Ut sed dictum dolor
Sectiunea 3

Duis ullamcorper, nisl quis maximus auctor, massa sem imperdiet ante, at tincidunt nibh metus eu risus. Ut luctus risus tellus. Vestibulum enim ligula, molestie nec finibus a, semper nec tortor. Suspendisse sed sapien sit amet nunc bibendum sagittis sit amet ac dolor. Morbi diam lacus, ornare in congue id, lacinia et purus. Nullam purus leo, vehicula non ante eu, sagittis ultricies lacus. Phasellus massa nisl, semper sit amet neque a, scelerisque pretium odio. Curabitur ac nunc augue. Pellentesque sed imperdiet lorem, nec iaculis augue. Aliquam erat volutpat.

Şi, totuşi, puţin JS

Dacă, la exemplul anterior, am dori ca, la deschiderea unui tab, să se închidă anteriorul deschis, putem folosi un pic de JavaScript, prin plasarea într-un script localizat înaintea închiderii etichetei Body. Astfel, la etichetele details am putea adăuga o funcţie pentru evenimentul onClick; astfel, vom avea la fiecare secţiune: <details onclick="fc_inchid_tab(fc_tab_activ(this));">

Rezultatul

Lorem ipsum dolor 
Sectiunea 1

Sed eu quam in magna facilisis sagittis scelerisque et est. Mauris tellus felis, hendrerit nec nunc auctor, dignissim vehicula lectus. Mauris at nisl urna. Aliquam erat volutpat. Aenean in lobortis enim. Integer scelerisque mauris ipsum, vitae faucibus nibh ullamcorper at. Fusce interdum accumsan tellus eu ornare. Nam scelerisque tortor a urna imperdiet imperdiet. Cras sed leo id libero sollicitudin fermentum. Fusce tristique ultrices neque quis vulputate.

Phasellus porttitor 
Sectiunea 2

Donec at ultrices velit. Sed vitae mattis sem. Suspendisse sit amet ligula vel dolor blandit congue id eget velit. Nunc laoreet ultrices velit in volutpat. Aenean mattis, sem ut sollicitudin vehicula, quam augue dapibus erat, non bibendum neque orci id odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce convallis ut orci sed gravida. Donec ac iaculis lorem, sit amet mattis quam. Ut fringilla nisi nulla, vel maximus urna volutpat at. Duis in arcu quis odio aliquet ultricies a eu lorem. Fusce dignissim faucibus laoreet. Pellentesque congue ex purus, at laoreet mi consequat nec.

Ut sed dictum dolor 
Sectiunea 3

Duis ullamcorper, nisl quis maximus auctor, massa sem imperdiet ante, at tincidunt nibh metus eu risus. Ut luctus risus tellus. Vestibulum enim ligula, molestie nec finibus a, semper nec tortor. Suspendisse sed sapien sit amet nunc bibendum sagittis sit amet ac dolor. Morbi diam lacus, ornare in congue id, lacinia et purus. Nullam purus leo, vehicula non ante eu, sagittis ultricies lacus. Phasellus massa nisl, semper sit amet neque a, scelerisque pretium odio. Curabitur ac nunc augue. Pellentesque sed imperdiet lorem, nec iaculis augue. Aliquam erat volutpat.
Suspendisse sit amet ligula vel dolor blandit congue id eget velit. Nunc laoreet ultrices velit in volutpat. Aenean mattis, sem ut sollicitudin vehicula, quam augue dapibus erat, non bibendum neque orci id odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce convallis ut orci sed gravida. Donec ac iaculis lorem, sit amet mattis quam. Ut fringilla nisi nulla, vel maximus urna volutpat at. Duis in arcu quis odio aliquet ultricies a eu lorem. Fusce dignissim faucibus laoreet. Pellentesque congue ex purus, at laoreet mi consequat nec.

Author: Ovidiu.S

Suficient de pasionat de această zonă profesională ca, în cazul în care ştiu ceva - cât de puţin - să împărtăşesc cu alţii.

Lasă un răspuns