Para realizar tabs verticales se necesita aplicar algunos estilos y remover otros.
<head>
<meta charset="UTF-8" />
<title>jQuery UI Tabs - Vertical</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
google.setOnLoadCallback(function() {
$("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
$("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');
});
</script>
<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<h2>Contenido Tab 1</h2>
<p>En la ficha Insertar, las galerías incluyen elementos diseñados para coordinar con la apariencia general del documento. Puede utilizar estas galerías para insertar tablas, encabezados, pies de página, listas, portadas y otros bloques de creación del documento.</p>
</div>
<div id="tabs-2">
<h2>Contenido Tab 2</h2>
<p>En la ficha Insertar, las galerías incluyen elementos diseñados para coordinar con la apariencia general del documento. Puede utilizar estas galerías para insertar tablas, encabezados, pies de página, listas, portadas y otros bloques de creación del documento.</p>
</div>
<div id="tabs-3">
<h2>Contenido Tab 3</h2>
<p>En la ficha Insertar, las galerías incluyen elementos diseñados para coordinar con la apariencia general del documento. Puede utilizar estas galerías para insertar tablas, encabezados, pies de página, listas, portadas y otros bloques de creación del documento.</p>
</div>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario