Foros del Web » Programando para Internet » Jquery »

inconvenientes con jquery acordion

Estas en el tema de inconvenientes con jquery acordion en el foro de Jquery en Foros del Web. tengo problemas en la implementacion de un jquery acordion dentro de un jquery tab, tengo el siguiente codigo : Código: <!doctype html> <html lang="en"> <head> ...
  #1 (permalink)  
Antiguo 16/11/2012, 08:53
 
Fecha de Ingreso: octubre-2012
Ubicación: Rio Cuarto,Cordoba,Argentina
Mensajes: 139
Antigüedad: 11 años, 7 meses
Puntos: 0
inconvenientes con jquery acordion

tengo problemas en la implementacion de un jquery acordion dentro de un jquery tab, tengo el siguiente codigo :
Código:
<!doctype html>
 
<html lang="en">
	<head>
		<!-- code para acordion de noticias -->
	    <title>jQuery UI Accordion - Default functionality</title>
	    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
	    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
	    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
	    <link rel="stylesheet" href="/resources/demos/style.css" />
	    <script>
	    $(function() {
	        $( "#accordion" ).accordion();
	    });
	    </script>
		<!-- code para barra sup -->
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<!-- code para barra tab -->
		<style>
		* {margin:0px; padding:0px;}
		.wrap {width:500px; margin:50px auto;}
		.clear {clear:both;}
		ul.tabs {list-style:none; width:500px;}
		ul.tabs li:first-child {border-left:1px solid #ccc;}
		ul.tabs li {float:left; border-right:1px solid #ccc; border-top:1px solid #ccc; background-color:#eee;}
		ul.tabs li.active {border-bottom:1px solid #fff; background-color:#fff; margin-bottom:-1px;}
		ul.tabs li a {display:block; padding:5px 10px; color:#777; letter-spacing:-1px; outline:none; text-decoration:none; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;}
		ul.tabs li.active a {font-weight:600; color:#000;}

		div.tabs_content {width:600px; border:1px solid #ccc;}
		div.tabs_content > div {padding:20px;}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script src="jTabs.js"></script> 
		<script>
		$(document).ready(function(){
		    $("ul.tabs").jTabs({content: ".tabs_content", animate: true});                       
		});
		</script>
		<!-- fin code tab -->
		<!-- referencias a los archivos de bootstrap-->
        <link rel="stylesheet" type="text/css" href="bootstrap.css" title="default">
        <link rel="stylesheet" type="text/css" href="bootstrap.min.css" title="default">
        <link rel="stylesheet" type="text/css" href="bootstrap-responsive.css" title="default">
        <link rel="stylesheet" type="text/css" href="bootstrap-responsive.min.css" title="default">
        <!-- referencia a funciones -->
        <link rel="stylesheet" type="text/css" href="funciones.css" title="default">
    </head>    
    <body>
			<div class="row-fluid"><!-- ROW 2 -->
				<center><h1 > Sistema de Boletin Informativo</h1></center>
			</div><!-- CIERRO ROW 2 -->
			<div class="row-fluid"><!-- ROW3 -->
 				<h2>
					<center>	
						<input type="button" onClick="javascript:Import_News_Load();" Value="Crear" class="btn btn-primary" >
						<input type="button" onClick="javascript:Import_News_Load();" Value="Preview" class="btn btn-primary" >
						<input type="button" onClick="javascript:Import_News_Load();" Value="Guardar" class="btn btn-primary" >
						<input type="button" onClick="javascript:Import_News_Load();" Value="Export" class="btn btn-primary" >
						<input type="button" onClick="javascript:Import_News_Load();" Value="Import" class="btn btn-primary" >
					</center>
				</h2>
 			</div> <!-- CIERRO ROW 3-->
			
			<div class="container-fluid"><!-- container-->
				<div class="row-fluid"><!-- row-->
					<div class="span4"> <!-- (izquierda) datos generales para el boletin -->
						<!-- tab -->
						<div class="wrap">
						    <ul class="tabs">  
						        <li class="active"><a href="#tab1">General</a></li>
						        <li><a href="#tab2">Noticia Principal</a></li>
						        <li><a href="#tab3">Noticias</a></li>
						        <li><a href="#tab4">Pie del cuerpo</a></li>
						        <li><a href="#tab5">Barra Lateral</a></li>
						    </ul>  
						    <div class="clear"></div>
						    <div class="tabs_content">
						        <div>
						        	<!-- tab datos generales -->
						        	<legend>Datos Generales</legend>
						        	<label for=titulo ><span class="icon black small"><i></span>Titulo Boletin:</label> <input id=titulo placeholder="Descripci&oacute;n del boletin" value="" . trim($titulo_boletin) . " type=text name=titulo_boletin" ></i>
						        	<label for=fecha_boletin ><span class=\"icon black small\"><i></span>Fecha:</label> <input id=fecha_boletin value="" . trim($fecha_boletin) . "\" placeholder="Mes y Ano de envio" type=text name=fecha_boletin >	</i>
						        	<label for=tamano_font ><span class=\"icon black small\"><i></span>Tama&ntilde;o Fuente:</label> <input id=tamano_font value= " . $tamano_font ." type=text name=tamano_font ></i>
						        	<label for=url_online ><span class=\"icon black small\"><i></span>URL Online:</label> <input id=url_online value=" . $url_online . " type=text name=url_online ></i>
						        	<legend>Urls & Imagenes</legend>
						        	<label for=url_facebook ><span class=\"icon social darkgray small\" title=facebook ><i></span>Facebook</label> <input id=url_facebook value="" . $url_facebook . "\" type=text name=url_facebook ></i>
									<label for=img_facebook ><span class=\"icon darkgray medium\"><i></span> Url Imagen FB:</label> <input id=img_facebook value="" . $img_facebook . "\" type=text name=img_facebook ></i>
									<label for=url_twitter ><span class=\"icon social darkgray small\" title=twitter ><i></span>Twitter</label> <input id=url_twitter value="" . $url_twitter . "\" type=text name=url_twitter ></i>
									<label for=img_twitter ><span class=\"icon darkgray medium\"><i></span>Url Imagen TW:</label> <input id=img_twitter value="" . $img_twitter . "\" type=text name=img_twitter >	</i>
						        </div>
						        <!-- tab noti principal -->
						        <div>	 
									<fieldset>
									<legend>Noticia Principal</legend>
									<label for=titulo_noticia_principal ><span class=\"icon black small\"><i></span>Titulo:</label> <input id=titulo_noticia_principal placeholder="Titulo" value="" . $titulo_noticia_principal . "\"  type=text name=titulo_noticia_principal></i>
									<label for=subtitulo_noticia_principal ><span class=\"icon black small\"><i></span>Subtitulo:</label> <input id=subtitulo_noticia_principal placeholder="Subtitulo" value="" . $subtitulo_noticia_principal . "\"  type=text name=subtitulo_noticia_principal></i>
									<label for=texto_url_noticia_principal ><span class=\"icon black small\"><i></span>Texto URL Noticia:</label> <input id=texto_url_noticia_principal placeholder="Texto Noticia Principal" value="" . $texto_url_noticia_principal . "\"  type=text name=texto_url_noticia_principal ></i>
									<label for=url_noticia_principal ><span class=\"icon black small\"><i></span>URL Noticia:</label> <input id=url_noticia_principal placeholder="Link de noticia principal" value="" . $url_noticia_principal . "\"  type=text name=url_noticia_principal ></i></br>
									<span class=\"icon black small\"><i></span>Texto Noticia</i><br>
									<textarea row=300 id=\"texto_noticia_principal\" name=\"texto_noticia_principal\"    placeholder="Noticia Principal" >. $texto_noticia_principal . </textarea>
									</fieldset>
								</div>
						        <!-- tab noti principal -->	 
						        <div>
						      
						        <div id="accordion">
						        	<h3>Section 1</h3>
								    <div>
								        <p>
								        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
								        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
								        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
								        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
								        </p>
								    </div>
								    <h3>Section 2</h3>
								    <div>
								        <p>
								        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
								        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
								        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
								        suscipit faucibus urna.
								        </p>
								    </div>
								    <h3>Section 3</h3>
								    <div>
								        <p>
								       
								        </p>
								        <ul>
								            <li>List item one</li>
								            <li>List item two</li>
								            <li>List item three</li>
								        </ul>
								    </div>
								    <h3>Section 4</h3>
								    <div>
								        <p>
								    
								        </p>
								        <p>
								       
								        </p>
								    </div>
								</div>															
						        </div>
						        <!-- tab noti principal -->
						        <div>	 
									yyyyyy
								</div>
								<div>	 
									zzzzz
								</div>
						</div><!-- wrap -->	
					</div><!-- cierro span 4-->
				</div><!-- cierro rows -->	
				<!-- ************************************************************************ -->
				<div class="span0"><!--(derecha) estadistica y eleccion de plantillas-->
				</div><!-- cierro row -->
				
			</div>	<!-- cierro container-->

	</body>
</html>
el problema es que no funciona el acordio en la tab noticias, nose si me explico bien.
__________________
Juan Pablo A. S.
  #2 (permalink)  
Antiguo 16/11/2012, 09:34
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid, España
Mensajes: 40
Antigüedad: 11 años, 10 meses
Puntos: 9
Respuesta: inconvenientes con jquery acordion

Hay varios errores en el documento. Estas cargando jquery dos veces. Con uno es suficiente. Por otro lado jquery ui tiene tabs tb, una librería te sobraría. En javascript: $(function() {}) y $(document).ready(función() {}) son lo mismo. Prueba a hacer los tabs con jquery ui, pon primero la orden de tabs y luego el de accordion, suele funcionar asi sin más. Si por lo que sea no te funcionase tendrías que lanzar la acción accordion cuando cambies de pestaña. Espero haberme explicado.
__________________
__
Front end developer at Simbiótica
  #3 (permalink)  
Antiguo 16/11/2012, 12:39
 
Fecha de Ingreso: octubre-2012
Ubicación: Rio Cuarto,Cordoba,Argentina
Mensajes: 139
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: inconvenientes con jquery acordion

muy buena respuesta gracias compañero, ahora una ultima puede ser? para modificar el tamaño del accordion?
__________________
Juan Pablo A. S.

Etiquetas: javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:39.