16/11/2012, 08:53
|
| | | Fecha de Ingreso: octubre-2012 Ubicación: Rio Cuarto,Cordoba,Argentina
Mensajes: 139
Antigüedad: 12 años, 2 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ó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ñ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. |