Continuando nossa série de artigos sobre interface rica, vamos ver agora o componente Tabs, da JQueryUI. Tabs são uma forma conveniente de dividir o conteúdo. São abas superiores que mostram um conteúdo por vez. Veja abaixo um exemplo (clique nas abas para mudar o conteúdo):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id nibh sed metus blandit sagittis. Sed a bibendum turpis. Suspendisse scelerisque el.
Fusce ultrices, nisl quis egestas facilisis, lorem tortor consectetur nibh, sit amet fringilla ligula arcu ac lorem. Duis ut sem quam, ac placerat.
Duis aliquet felis eu elit dignissim fermentum. Nunc tellus erat, elementum ut fringilla quis, interdum vel purus. Duis a risus at nisi tristique.
Duis aliquet felis eu elit dignissim fermentum. Nunc tellus erat, elementum ut fringilla quis, interdum vel purus. Duis a risus at nisi tristique.
Nullam convallis sollicitudin lorem, nec tempus diam porttitor fringilla. Etiam facilisis lacus sit amet erat lobortis ac faucibus nunc posuere.
Curabitur pharetra consectetur nibh ac consequat. Proin sed turpis quis sapien pellentesque luctus. In pulvinar dolor eu tellus lacinia sed vehicula lacus faucibus.
Curabitur pharetra consectetur nibh ac consequat. Proin sed turpis quis sapien pellentesque luctus. In pulvinar dolor eu tellus lacinia sed vehicula lacus faucibus.
Implementação:
Para implementar veja o código:
<html>
<head>
<!--IMPORTAÇÕES NECESSÁRIAS-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Aba 1</a></li>
<li><a href="#tabs-2">Aba 2</a></li>
<li><a href="#tabs-3">Aba 3</a></li>
</ul>
<div id="tabs-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id nibh sed metus blandit sagittis. Sed a bibendum turpis. Suspendisse scelerisque el.
</p>
</div>
<div id="tabs-2">
<p>
Fusce ultrices, nisl quis egestas facilisis, lorem tortor consectetur nibh, sit amet fringilla ligula arcu ac lorem. Duis ut sem quam, ac placerat.
</p>
<p>
Duis aliquet felis eu elit dignissim fermentum. Nunc tellus erat, elementum ut fringilla quis, interdum vel purus. Duis a risus at nisi tristique.
</p>
</div>
<div id="tabs-3">
<p>
Nullam convallis sollicitudin lorem, nec tempus diam porttitor fringilla. Etiam facilisis lacus sit amet erat lobortis ac faucibus nunc posuere.
</p>
<p>
Curabitur pharetra consectetur nibh ac consequat. Proin sed turpis quis sapien pellentesque luctus. In pulvinar dolor eu tellus lacinia sed vehicula lacus faucibus.
</p>
</div>
</div>
<script>
$( "#tabs" ).tabs();
</script>
</body>
</html>
As abas superiores são uma ul com os titulos. Já o conteúdo fica dentro das divs internas.
Então chame $('#tabs').tabs(); para criar o componente.
Atenciosamente,
Gustavo Marques
Nenhum comentário:
Postar um comentário