jQuery UI -> Problema con Tabs, ¡¡Imposible!!

jesusjj · #1 (**permalink**) 01/05/2009, 13:33

Buenas tardes/noches:

Quería comentar un problema que soy absolutamente incapaz de resolver. Estoy intentando hacer unos tabs con jQuery UI y me es imposible. No he podido simplificar más la prueba y aún así no hay manera, se me queda siempre en la etiqueta principal.

Tengo las versiones: jQuery (1.3.2) y jQuery UI (1.7), ambas completas.

Copio los códigos y a ver si alguien me puede echar una mano.

Muchas gracias.

Página

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin ttulo</title>
    	<script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery-ui.js"></script>
        <script type="text/javascript" src="js.js"></script>
        <link href="estilos.css" rel="stylesheet" type="text/css" />
</head>

<body>

	<h1>Pruebas Tabs</h1>
	<div id="tabbed_box" class="tabbed_box">     
        <div id="tabs">
        	<ul>
            	<li><a href="#tab_1" title="probando01" class="tab active">Probando 01</a></li>
                <li><a href="#tab_2" title="probando02" class="tab">Probando 02</a></li>
            </ul>
            
            <div id="tab_1" class="content">
            	probando01
            </div>
            <div id="tab_2" class="content">
                probando02
            </div>           
        </div>        
    </div>


</body>
</html>

CSS

Código:

@charset "utf-8"

html {
margin: 0px;
padding: 0px;
}

body {
background: #ccc url('img/back.jpg') repeat-x;
text-align: center;
margin: 0px;
padding: 0px;
font-family: helvetica,verdana, arial;
font-size: 10pt;
font-weight: 100;
color: #333;
}

p {
	margin-top: 20px;
}

dl {
font-size: 11pt;
font-weight: bold;
font-style: italic;
border: 1px solid #555;
padding: 5px;
}

dt {
font-size: 10pt;
font-style: normal;
font-weight: bold;
padding: .3em;
padding-left: 15px;
margin-bottom: 2px;
background: #ccc;
}

dd {
font-size: 10pt;
font-style: italic;
font-weight: normal;
padding-bottom: .2em;
}

a {
	text-decoration: none;
	font-weight: bold;
	color: #0000FF;
}

a:hover {
	color: #ff6633;
}

label {
  display: block;
  margin: .5em 0 0 0;
}

legend {
	font-family: "Courier New";
	font-size: .8em;
	font-weight: bold;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px #555 solid;
	background: #ccc;
	color: #555;
}

fieldset {
	border: 1px solid #555;
	margin: auto;
	margin-bottom: 10px;
	padding: 10px;
	width: 450px;
	clear: both;
}

/* Menú Tab */

#tabbed_box {
	margin: auto;
	width: 300px;
}

#tabs ul {
	margin: 0px;
	padding: 0px;
	margin-top: 5px;
	margin-bottom: 6px;
}

#tabs ul li {
	list-style: none;
	display: inline;
}

#tabs ul li a {
	background-color: #464c54;
	color: #ccc;
	padding: 8px 14px 8px 14px;
	text-decoration: none;
	font-size: 9px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	border: 1px solid #aaa;
}

#tabs ul li a:hover {
	background-color: #2f343a;
	border-color: #aaa;;
}

#tabs ul li a.active {
	background-color: #ddd;
	color: #333;
	border: 1px solid #aaa;
	border-bottom: solid 1px #ddd;
}

.content {
	background-color: #ddd;
	padding: 10px;
	border: 1px solid #aaa;
}

.content ul li:last-child {
	border-bottom: none;
}

.ui-tabs .ui-tabs-hide {
     display: none;
} 

#tab_2 {
	display: none;
}

JS

Código:

// Javascript

$(document).ready(function() {
	$('#tabs > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});

jesusjj · #2 (**permalink**) 05/05/2009, 07:33

Buenas de nuevo:

¿A alguien se le ocurre alguna otra forma de hacer los tabs con jQuery UI? Con jQuery directamente he visto que se puede hacer también, pero estando la UI, no creo que sea necesario hacerlo entero, ¿no?

Saludos.

#3 (**permalink**) 05/05/2009, 08:11

Una pregunta. ¿Por qué lo creas con $('#tabs > ul').tabs(...) en lugar de con $('#tabs').tabs(...)?

Que no digo que sea incorrecto, pero los ejemplos que vienen en la documentación de jQuery UI lo crean siempre a partir de $("#tabs"), no de $('#tabs > ul')

jesusjj · #4 (**permalink**) 05/05/2009, 08:29

;) Muchas gracias. Haciendo un par de ajustes ha funcionado ok.

He tenido que eliminar del css, la propiedad #tab_2 {display: none;}

Ahora lo único que me queda es aplicar la clase 'active' al tab seleccionado.

Me imagino que será algo en plan $(this).addClass('.active'); o algo así, ¿no?

Muchas gracias de nuevo

jesusjj · #5 (**permalink**) 05/05/2009, 08:59

Muchas gracias, resuelto el tema. En cuanto a las clases, he dejado finalmente así el fichero de estilos:

Código:

@charset "utf-8"

html {
margin: 0px;
padding: 0px;
}

body {
background: #ccc url('img/back.jpg') repeat-x;
text-align: center;
margin: 0px;
padding: 0px;
font-family: helvetica,verdana, arial;
font-size: 10pt;
font-weight: 100;
color: #333;
}

p {
	margin-top: 20px;
}

dl {
font-size: 11pt;
font-weight: bold;
font-style: italic;
border: 1px solid #555;
padding: 5px;
}

dt {
font-size: 10pt;
font-style: normal;
font-weight: bold;
padding: .3em;
padding-left: 15px;
margin-bottom: 2px;
background: #ccc;
}

dd {
font-size: 10pt;
font-style: italic;
font-weight: normal;
padding-bottom: .2em;
}

a {
	text-decoration: none;
	font-weight: bold;
	color: #0000FF;
}

a:hover {
	color: #ff6633;
}

label {
  display: block;
  margin: .5em 0 0 0;
}

legend {
	font-family: "Courier New";
	font-size: .8em;
	font-weight: bold;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px #555 solid;
	background: #ccc;
	color: #555;
}

fieldset {
	border: 1px solid #555;
	margin: auto;
	margin-bottom: 10px;
	padding: 10px;
	width: 450px;
	clear: both;
}

/* Menú Tab */

#tabbed_box {
	margin: auto;
	width: 300px;
}

#tabs ul {
	margin: 0px;
	padding: 0px;
	margin-top: 5px;
	margin-bottom: 6px;
}

#tabs ul li {
	list-style: none;
	display: inline;
}

#tabs ul li a {
	background-color: #464c54;
	color: #ccc;
	padding: 8px 14px 8px 14px;
	text-decoration: none;
	font-size: 9px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	border-left: 1px solid #aaa;
	border-top: 1px solid #aaa;
	border-right: 1px solid #aaa;
}

#tabs ul li a:hover {
	background-color: #2f343a;
	border-color: #aaa;
	color: #eee;
}

#tabs li.ui-tabs-selected a  {
	background-color: #ddd;
	color: #333;
	border: 1px solid #aaa;
	border-bottom: solid 1px #ddd;
}

.content {
	background-color: #ddd;
	padding: 10px;
	border: 1px solid #aaa;
}

.content ul li:last-child {
	border-bottom: none;
}

.ui-tabs .ui-tabs-hide {
     display: none;
}

hector2c · #6 (**permalink**) 07/05/2009, 10:59

pos, aqui hay algo mas sencillo: enlace