estoy utilizando ajax para llamar unos tags desde una pagina a otra....
pero cuando lo hago... pareciera que lo hace pero lo abre y lo cierra tan rapido que no se puede ver lo que hace.... si le agrego la funcion sleep, se nota que hace lo que deberia hacer el javascript , pero la funcion sleep tiene un tiempo determinado ademas que alenta tambien la funcion de la llamada....
dejo el codigo...
html
Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo de menú en forma de acordeón con JQuery - calirojas.com</title>
<link type="text/css" rel="stylesheet" href="css/acordeon.css">
</head>
<body>
<div id="divAcordeon">
<div class="clsContenedor">
<span class="clsSeccion">Sistemas Operativos</span>
<ul >
<li><a href="#">Linux</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Android</a></li>
</ul>
</div>
</div>
<div id="divCali">
<a href="http://calirojas.com">
<img src="img/calirojas.jpg" border="0">
</a>
</div>
<script type="text/javascript" src="js/ext/jquery.min.js"></script>
<script type="text/javascript" src="js/acordeon1.js"></script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo de menú en forma de acordeón con JQuery - calirojas.com</title>
<link type="text/css" rel="stylesheet" href="css/acordeon.css">
</head>
<body>
<div id="divAcordeon">
<div class="clsContenedor">
<span class="clsSeccion">Sistemas Operativos</span>
<ul >
<li><a href="#">Linux</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Android</a></li>
</ul>
</div>
</div>
<div id="divCali">
<a href="http://calirojas.com">
<img src="img/calirojas.jpg" border="0">
</a>
</div>
<script type="text/javascript" src="js/ext/jquery.min.js"></script>
<script type="text/javascript" src="js/acordeon1.js"></script>
</body>
</html>
javascript
Cita:
css//<![CDATA[
/**
* $Id: cv_control_porterias.js 50 2012-01-19 08:13:41Z rodrigo $
* Comportamientos para la aplicacion
*
* @author Rodrigo Serrano <[email protected]>
* @package main
* @subpackage main.cv_control_porterias
*/
$j = jQuery.noConflict();
(function($j){ // line to avoid conflict with Prototype.Event at window.onload
$j(document).ready(function() {
/*expandir todos los bloques con la clase clsActivo y agregar la clase clsArriba a los
titulos de cada uno de esos bloques*/
$j('.clsActivo').stop(true,true).slideToggle().par ent().find('.clsSeccion').addClass('clsArriba');
/*buscamos el ultimo li, del ultimo ul y le agregamos la clase clsUltimo para redondear el
borde inferior*/
$j('.clsContenedor').last('ul').find('li:last-child').addClass('clsUltimo');
/*agregamos la clase clsAbajo a todos los elementos del acordeon, que inicialmente
se muestren cerrados (sin la clase clsActivo)*/
$j(".clsContenedor .clsSeccion ").not('[class$="clsArriba"]').addClass('clsAbajo');
/*evento que se dispara al hacer clic en cualquiera de los contenedores del acordeon*/
$j('.clsContenedor').click(function () {
$j(this).find('ul').stop(true,true).slideToggle('f ast',function(){
//verificar la clase que tiene el titulo del contenedor
if($j(this).parent().find('.clsSeccion').hasClass( 'clsAbajo')){
//eliminamos la clase clsAbajo y agregamos la clase clsArriba (para los iconos)
$j(this).parent().find('.clsSeccion').removeClass( 'clsAbajo').addClass('clsArriba');
}else{
//eliminamos la clase clsArriba y agregamos la clase clsAbajo (para los iconos)
$j(this).parent().find('.clsSeccion').removeClass( 'clsArriba').addClass('clsAbajo');
}
});
//$j('#tres').html('cargando...');
$j.ajax({
url: 'acordion2.php',
dataType: "html",
data: {
},
success: function( data ) {
$j('.clsContenedor').html(data);
}
});
return false;
});
});
})(jQuery); // line to avoid conflict with Prototype.Event at window.onload
/* vim: set expandtab tabstop=4 shiftwidth=4 foldmethod=marker: */
//]]>
/**
* $Id: cv_control_porterias.js 50 2012-01-19 08:13:41Z rodrigo $
* Comportamientos para la aplicacion
*
* @author Rodrigo Serrano <[email protected]>
* @package main
* @subpackage main.cv_control_porterias
*/
$j = jQuery.noConflict();
(function($j){ // line to avoid conflict with Prototype.Event at window.onload
$j(document).ready(function() {
/*expandir todos los bloques con la clase clsActivo y agregar la clase clsArriba a los
titulos de cada uno de esos bloques*/
$j('.clsActivo').stop(true,true).slideToggle().par ent().find('.clsSeccion').addClass('clsArriba');
/*buscamos el ultimo li, del ultimo ul y le agregamos la clase clsUltimo para redondear el
borde inferior*/
$j('.clsContenedor').last('ul').find('li:last-child').addClass('clsUltimo');
/*agregamos la clase clsAbajo a todos los elementos del acordeon, que inicialmente
se muestren cerrados (sin la clase clsActivo)*/
$j(".clsContenedor .clsSeccion ").not('[class$="clsArriba"]').addClass('clsAbajo');
/*evento que se dispara al hacer clic en cualquiera de los contenedores del acordeon*/
$j('.clsContenedor').click(function () {
$j(this).find('ul').stop(true,true).slideToggle('f ast',function(){
//verificar la clase que tiene el titulo del contenedor
if($j(this).parent().find('.clsSeccion').hasClass( 'clsAbajo')){
//eliminamos la clase clsAbajo y agregamos la clase clsArriba (para los iconos)
$j(this).parent().find('.clsSeccion').removeClass( 'clsAbajo').addClass('clsArriba');
}else{
//eliminamos la clase clsArriba y agregamos la clase clsAbajo (para los iconos)
$j(this).parent().find('.clsSeccion').removeClass( 'clsArriba').addClass('clsAbajo');
}
});
//$j('#tres').html('cargando...');
$j.ajax({
url: 'acordion2.php',
dataType: "html",
data: {
},
success: function( data ) {
$j('.clsContenedor').html(data);
}
});
return false;
});
});
})(jQuery); // line to avoid conflict with Prototype.Event at window.onload
/* vim: set expandtab tabstop=4 shiftwidth=4 foldmethod=marker: */
//]]>
Cita:
Tengo unas imagenes png pero solo son flechitas....body{
font:13px normal Tahoma, Verdana, Arial, sans-serif;
background:#000;
}
#divAcordeon{
position:absolute;
left:20px;
top:20px;
background:#222;
width:200px;
border-radius:5px;
border:solid 1px #555;
}
.clsContenedor{
}
.clsContenedor .clsSeccion{
display:block;
padding:5px;
color:#ff0000;
text-transform:uppercase;
font-weight:bolder;
font-size:11px;
cursor:pointer;
margin-right:7px;
text-shadow: 2px 2px 2px #000;
}
.clsContenedor .clsSeccion::selection{
background-color: transparent;
}
.clsContenedor ul{
padding:0;
margin:0;
display:none;
list-style-type:none;
}
.clsContenedor ul li a{
display:block;
padding:3px;
color:#fff;
text-decoration:none;
text-indent:10px;
text-shadow: 2px 2px 2px #000;
}
.clsContenedor ul li a:hover{
background:#000;
color:#ff0000;
text-shadow: 2px 2px 2px #222;
}
.clsContenedor ul li.clsUltimo a:hover{
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.clsAbajo{
background:url(../img/abajo.png) no-repeat right center;
}
.clsArriba{
background:url(../img/arriba.png) no-repeat right center;
}
#divCali{
position:fixed;
bottom:0;
width:100%;
text-align:right;
background:#000;
}
#divCali img{
padding:20px;
}
font:13px normal Tahoma, Verdana, Arial, sans-serif;
background:#000;
}
#divAcordeon{
position:absolute;
left:20px;
top:20px;
background:#222;
width:200px;
border-radius:5px;
border:solid 1px #555;
}
.clsContenedor{
}
.clsContenedor .clsSeccion{
display:block;
padding:5px;
color:#ff0000;
text-transform:uppercase;
font-weight:bolder;
font-size:11px;
cursor:pointer;
margin-right:7px;
text-shadow: 2px 2px 2px #000;
}
.clsContenedor .clsSeccion::selection{
background-color: transparent;
}
.clsContenedor ul{
padding:0;
margin:0;
display:none;
list-style-type:none;
}
.clsContenedor ul li a{
display:block;
padding:3px;
color:#fff;
text-decoration:none;
text-indent:10px;
text-shadow: 2px 2px 2px #000;
}
.clsContenedor ul li a:hover{
background:#000;
color:#ff0000;
text-shadow: 2px 2px 2px #222;
}
.clsContenedor ul li.clsUltimo a:hover{
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.clsAbajo{
background:url(../img/abajo.png) no-repeat right center;
}
.clsArriba{
background:url(../img/arriba.png) no-repeat right center;
}
#divCali{
position:fixed;
bottom:0;
width:100%;
text-align:right;
background:#000;
}
#divCali img{
padding:20px;
}
el codigo que mande arriba es solo de la pagina uno , ahora mando la pagina 2 que es de donde pedire los tags
html pag 2
Cita:
js<?php sleep(5); ?>
<?php error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED); ?>
<!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" xml:lang="es">
<head>
<title>Ejemplo de menú en forma de acordeón con JQuery - calirojas.com</title>
<link type="text/css" rel="stylesheet" href="css/acordeon.css"></link>
</head>
<body>
<h1>titulo <?php echo $_GET['variable'];?></h1>
<a href="nivel3.php">ir a nivel 3</a>
<ul >
<li><a href="#">Linux</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Android</a></li>
</ul>
<script type="text/javascript" src="js/ext/jquery.min.js"></script>
<script type="text/javascript" src="js/acordeon2.js"></script>
</body>
</html>
<?php error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED); ?>
<!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" xml:lang="es">
<head>
<title>Ejemplo de menú en forma de acordeón con JQuery - calirojas.com</title>
<link type="text/css" rel="stylesheet" href="css/acordeon.css"></link>
</head>
<body>
<h1>titulo <?php echo $_GET['variable'];?></h1>
<a href="nivel3.php">ir a nivel 3</a>
<ul >
<li><a href="#">Linux</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Android</a></li>
</ul>
<script type="text/javascript" src="js/ext/jquery.min.js"></script>
<script type="text/javascript" src="js/acordeon2.js"></script>
</body>
</html>
Cita:
//<![CDATA[
/**
* $Id: cv_control_porterias.js 50 2012-01-19 08:13:41Z rodrigo $
* Comportamientos para la aplicacion
*
* @author Rodrigo Serrano <[email protected]>
* @package main
* @subpackage main.cv_control_porterias
*/
$j = jQuery.noConflict();
(function($j){ // line to avoid conflict with Prototype.Event at window.onload
$j(document).ready(function() {
});
})(jQuery); // line to avoid conflict with Prototype.Event at window.onload
/* vim: set expandtab tabstop=4 shiftwidth=4 foldmethod=marker: */
//]]>
/**
* $Id: cv_control_porterias.js 50 2012-01-19 08:13:41Z rodrigo $
* Comportamientos para la aplicacion
*
* @author Rodrigo Serrano <[email protected]>
* @package main
* @subpackage main.cv_control_porterias
*/
$j = jQuery.noConflict();
(function($j){ // line to avoid conflict with Prototype.Event at window.onload
$j(document).ready(function() {
});
})(jQuery); // line to avoid conflict with Prototype.Event at window.onload
/* vim: set expandtab tabstop=4 shiftwidth=4 foldmethod=marker: */
//]]>
la idea es que cuando yo haga click en sistemas operativos
se despliegue solamente la lista... de los sistemas operativos que estan en el php 2 , el href de arriba y titulo estan de sobra , solo los uso para pruebas....
alguien me puede ayudar porfavor???
gracias :)
pd: tengo que hacerlo con ajax por que esto de los sistemas operativos es solo una prueba para algo mas grande que tengo que hacer, ahora me estoy documentando e intentando aprender a utilizar ajax.
saludos
pd2 : AYUDAAAAAAAAAAAAAAAAAA
