vertical - jquery ui acordeones dentro de pestañas
libreria ui jquery (7)
Me he encontrado con un problema al usar acordeones dentro de pestañas, los acordeones inicialmente inactivos no representan su contenido correctamente cuando se selecciona su pestaña. Leyendo atentamente veo que la razón para esto es que las pestañas inactivas tienen visualización: ninguna inicialmente, por lo que la altura de los divs dentro del acordeón no se calculan correctamente. Ninguna de las soluciones sugeridas funciona para mí. ¿Alguien ha superado esto o tiene un trabajo alrededor?
Aquí hay un código de ejemplo del problema:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.7.2.custom.css" media="screen" />
<script type=''text/javascript'' src=''../scripts/jquery-1.3.2.min.js''></script>
<script type=''text/javascript'' src=''../scripts/jquery-ui-1.7.2.custom.js''></script>
<script type="text/javascript">
$(document).ready(function(){
$(''#tabs'').tabs();
$("#accordion1").accordion();
$("#accordion2").accordion();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="main" class="round roundB">
<div id="tabs">
<ul>
<li><a href="#tab1">Tab 1</a> </li>
<li><a href="#tab2">Tab 2</a> </li>
</ul>
<div id="tab1">
<div id="accordion1">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
TAB 1 Accordion 1
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
TAB 1 Accordion 2
</p>
</div>
</div>
</div>
<div id="tab2">
<div id="accordion2">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
TAB 2 Accordion 1
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
TAB 2 Accordion 2
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Después de leer el problema planteado, tuve la impresión de que un problema que he encontrado era de naturaleza similar. Utilizar la funcionalidad de acordeón dentro de una pestaña forzaba a que el contenido de mi acordeón incluyera una barra de desplazamiento, una característica que no quería.
Por alguna razón u otra, la solución actual provista no funcionó para mí.
La solución que encontré fue sobrescribir la configuración de acordeón predeterminada de autoHeight (valor predeterminado de true, sobrescribir a falso)
$("#accordion").accordion({
autoHeight: false
});
$(''#tabs'').tabs();
Inicialice el acordeón cuando active la pestaña:
muestra:
$(''.selector'').bind(''tabsadd'', function(event, ui) {
...
});
tu muestra:
<script type="text/javascript">
$(document).ready(function(){
$(''#tabs'').tabs();
$(''#tabs'').bind(''tabshow'', function(event, ui) {
$("#accordion1").accordion();
$("#accordion2").accordion();
});
});
</script>
Quizás necesite inicializar cada acordeón especial para cada pestaña.
O use la última versión de UI lib:
<link rel="stylesheet" href="http://static.jquery.com/ui/css/base2.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/bgiframe/jquery.bgiframe.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
Ninguno de los anteriores funcionó para mí. Para mí, el truco fue cambiar el uso de identificadores únicos de div para cada acordeón a una identificación de clase única para todos los acordeones. Es decir, cambie: <div id="accordion1>, <div id="accordion2>, etc ... a <div class="accordion"> dentro de cada una de las pestañas.
Es posible que también necesite agregar a su función $ (document) .ready
$(".accordion").accordion({ autoHeight: false }); $(''#tabs'').tabs(); $(''#tabs'').bind(''tabshow'', function(event, ui) { $(".accordion").accordion("resize"); });
Entonces el formato sería:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.7.2.custom.css" media="screen" />
<script type=''text/javascript'' src=''../scripts/jquery-1.3.2.min.js''></script>
<script type=''text/javascript'' src=''../scripts/jquery-ui-1.7.2.custom.js''></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".accordion").accordion({
autoHeight: false
});
$(''#tabs'').tabs();
$(''#tabs'').bind(''tabshow'', function(event, ui) {
$(".accordion").accordion("resize");
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="tabs">
<ul>
<li><a href="#tabs-1">User</a></li>
<li><a href="#tabs-2">Folders</a></li>
<li><a href="#tabs-3">Decks</a></li>
</ul>
<div id="tabs-1">
<div class=''accordion''>
<h3>Header 1</h3>
<div</div>
<h3>Header 2</h3>
<div></div>
<h3>Header 3</h3>
<div><</div>
</div>
</div>
<div id="tabs-2">
<div class=''accordion''>
<h3>Header 4</h3>
<div</div>
<h3>Header 5</h3>
<div></div>
<h3>Header 6</h3>
<div><</div>
</div>
</div>
<div id="tabs-3">
<div class=''accordion''>
<h3>Header 7</h3>
<div</div>
<h3>Header 8</h3>
<div></div>
<h3>Header 9</h3>
<div><</div>
</div>
</div>
</div>
</body>
</html>
Ver
http://bugs.jqueryui.com/ticket/5601
.ui-helper-clearfix {display: bloque; min-width: 0; desbordamiento: oculto; }
Yo tuve el mismo problema antes. La solución es: debe activar el acordeón antes de las pestañas.
$("#accordion").accordion();
$("#tabs").tabs();
Quizás necesites alineación izquierda.
.ui-accordion-header{
text-align: left;
}
buena suerte
solo lea cuidadosamente http://docs.jquery.com/UI/Tabs# hay una respuesta. es la manera más simple
$( "#tabs" ).tabs({
load: function(event, ui) {
$("#"+ui.panel.id+" .accordians:first").accordion();
}
});
Esto funcionó cuando se usaba ajax html con pestañas.