Caja estilo yahoo

bellacord · #1 (**permalink**) 22/03/2007, 13:25

Estoy tratando de hacer esto...pero q traiga valores de una base de datos, lei algo como q hay que hacer varias tablas...alguien me explica?

silence_off · #2 (**permalink**) 22/03/2007, 14:26

ve a la seccion de ajax. ahi esta lo que necesitass digo yo...

bellacord · #3 (**permalink**) 22/03/2007, 14:31

me mueven el post por favor?

kennyhp · #4 (**permalink**) 26/03/2007, 03:20

Crea una página php que haga la consulta a la base de datos, y con AJAX haces que cargue esa página en una capa, puedes pasarle los parametros para la busqueda por GET o POST si lo necesitas, mirate los manuales que hay en las FAQS para conseguir esto.
Un saludo.

bellacord · #5 (**permalink**) 26/03/2007, 07:26

Gracias...pero la pregunta es como hacer efecto en ajax...

stock · #6 (**permalink**) 26/03/2007, 12:31

efecto? cual efecto? no comprendo a que te refieres! te refieres a hacer los tabs? te estas refiriendo a hacer consultas con ajax? te estas refiriendo a ponerle efectos de transicion a los tabs?

podrias aclarar mejor para recibir una respuesta mejor

have funnnnnnnnnnn

bellacord · #7 (**permalink**) 26/03/2007, 12:56

gracias de todos modos, ahi esta la imagen, lo quiero hacer tal como yahoo...que traiga los valores de una base de datos y cuando hagas click en un tab te muestre los contenidos. Oa base de datos lo traera de mysql con php

stock · #8 (**permalink**) 26/03/2007, 18:29

mira, para hacer los tabs, aqui te dejo un excelente articulo

http://www.alistapart.com/articles/slidingdoors/

luego con AJAX, bas a consultar el servidor y poner el resultado sobre el div central, al mismo tiempo que le cambias la clase al tab, para que se seleccione.

have funnnnnnnnnnnnn

kennyhp · #9 (**permalink**) 27/03/2007, 02:44

Creo que tu duda es sobre todo de concepto, en realidad AJAX no es mas que una metodologia o forma de usar javascript, usando un objeto concreto que te permite crear una comunicación asíncrona, a la vez que te permite actualizar sin tener que recargar toda la página, te voy a poner un ejemplo de algo como lo que quieres conseguir para ver si así lo entiendes mejor, pero creo que la mejor manera de aprender es mirando tutoriales y haciendo muchas pruebas.

principal.php // pagina principal donde se mostrarian lo que quieres hacer.

Código HTML:

<html>
<head>
<title>Pruebas Ajax</title>
// el fichero donde crearemos la chica del AJAX
<script language="javascript" type="text/javascript" src="ajax.js"></script> 
// el fichero donde crearemos la chica del AJAX
<body onLoad="return principal('datos.php','ventana');>
// creo una capa con el menú
<div id="menuvenatana" style="position:absolute; left:10px; top:20px; width:354px; height:25px; z-index:2">
  <a href="#" onclick="return principal('datos.php?ver=noticias','ventana');"> Noticias</a>
  <a href="#" onclick="return principal('datos.php?ver=analisis','ventana');"> Analisis</a> 
  <a href="#" onclick="return principal('datos.php?ver=avances','ventana');"> Avances</a>
 </div>

// Creo un Div donde cargare los datos, fijate que se llama ventana
<div id="ventana" style="position:absolute; left:11px; top:46px; width:339px; height:135px; z-index:2"></div>
</body>
</html>

Ahora creamos el fichero Javascript donde crearemos el objeto AJAX, este no lo comentare por que lo mejor es que lo mires en las FAQS, hay paginas donde lo explican muy bien.

ajax.js

Código:

function principal(pagina,divID)
{
	var XMLHttpRequestObject = false;
	if (window.XMLHttpRequest) {
	XMLHttpRequestObject = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
	XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
	}	
	if(XMLHttpRequestObject)
		{
			var mostrar = document.getElementById(divID);
			XMLHttpRequestObject.open("GET", pagina, true);
			XMLHttpRequestObject.onreadystatechange = function()
			{
				if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) 
				{
					mostrar.innerHTML = XMLHttpRequestObject.responseText;
				}
			}
		
	
		XMLHttpRequestObject.send(null);
		}
	
}

Y por último la pagina que hace las consultas que se llamara...

datos.php

Código PHP:

  <?php 

include "/includes/conexion.php";  // la conexión a la base de datos

if(!isset($ver)) $ver=noticias; // mostrara por defecto las noticias

 
switch($ver)

{

    case 'noticias':

    $noticias=mysql_query("SELECT titulo FROM noticias WHERE '1'");

        while($row = mysql_fetch_array($noticias))

        {

            $titulo=$row['titulo'];

            print("$titulo<br>");

        }

        break;

    case 'analisis':

    echo "Lo mismo que noticias pero consulta a analisis";

        break;

    case 'avances':

    echo "Idem que los anteriores";

        break;

    

}

 
?>

Y con esto creas un efecto parecido a lo de Yahoo, ahora hay que ponerlo bonito y tal, te recomiendo que mires la parte de AJAX y que con este ejemplo te quede un poco mas claro como funciona y que tirando de las FAQS y google puedas entenderlo.
Saludos!