Menu HTML NO FRAMES

skatz · 3 Dic 2011

Hola queridos amigos Ba-kunos, estoy estudiando ing. en sistemas y ahora para un proyecto escolar.

Ya tengo la base y el codigo de las funciones PHP, pero ahora quiero hacer un menu.

Suponiendo

_________________________________________________

Menu - Opcion 2 - Opcion 3 - Opcion 4
_________________________________________________

AREA DE INFORMACION

_________________________________________________

quiero que mi pagina HTML no cambie, solo cambie el area de infomacion de acuerdo a la opcion que se eliga

P.D.

No quiero usar flash, ni Frames
Es posible hacer lo que quiero? por que no he encontrado una solucion a mi pregunta.

kirax · 3 Dic 2011

mmmm se me ocurre entonces que cargues los contenidos a un div con jquery ,asi no usarias los frames o iframes,es la unica forma que se me ocurre

skatz · 3 Dic 2011

Gracias por tu pronta respuesta, lo voy a probar, no dejen de comentar si es que tienen otra idea.

omega96 · 3 Dic 2011

claro es muy facil puedes usar ajax, te hice un ejemplo de como lo puedes hacer, tienes que hacer dos archivos uno html con tus menus y todo y otro en php que enviara los resultados

tu index seria mas o menos asi:

<html>
<head>
<title>pagina con ajax</title>
<script type="text/javascript">
function cargarphp(opcion){
var conexion;
if(window.XMLHttpRequest){conexion = new XMLHttpRequest();}
else{conexion = new ActiveXObject("Microsoft.XMLHTTP");}
conexion.onreadystatechange=function(){
if(conexion.readyState==4 && conexion.status==200){
document.getElementById("informacion").innerHTML=conexion.responseText;
}
}
conexion.open("GET","acciones.php?opcion="+opcion,true);
conexion.send();
}

</script>
<style>
.elemento_menu{
background-color:#3FF;
width:100px;
float:left;
height: auto;
margin-top: 3px;
margin-bottom: 3px;
}

.elemento_menu:hover{
background-color:#39F;
}

#informacion{
background-color: #3CF;
clear: both;
height: 200px;
width: 400px;
font-family: Arial, Helvetica, sans-serif;
}

</style>
</head>

<body>
<div id="menu"><center>
<div class="elemento_menu"><a href="javascript:cargarphp('opcion1');">Opcion1</a></div>
<div class="elemento_menu"><a href="javascript:cargarphp('opcion2');">Opcion2</a></div>
<div class="elemento_menu"><a href="javascript:cargarphp('opcion3');">Opcion3</a></div>
<div class="elemento_menu"><a href="javascript:cargarphp('opcion4');">Opcion4</a></div>
</div></center>
<div id="informacion"></div>
</body>
</html>

en este envias una variable y tu archivo php la recibe y decide que informacion enviar ya sea solo un texto u otro codigo este archivo que nombre acciones.php seria mas o menos asi:

<?PHP
if($_GET['opcion']=="opcion1"){echo "Elegiste la primera opcion del menu";}
if($_GET['opcion']=="opcion2"){echo "Elegiste la segunda opcion del menu";}
if($_GET['opcion']=="opcion3"){echo "Elegiste la tercera opcion del menu";}
if($_GET['opcion']=="opcion4"){echo "Elegiste la cuarta opcion del menu";}

?>

y pues es todo en realidad no es gran ciencia solo si te menciono debes tener un lugar donde recibir los resultados en este caso es un div llamado "informacion", espero te sirva, cualquier cosa pues andamos por aqui.

skatz · 3 Dic 2011

Gracias por tu Ejemplo, me gusto mucho, me pregunto si con las librerias de jQuery se puede hacer lo mismo? para no usar ese codigo y poderle agregar mas cosas?

P.D. Muchas gracias ^^

omega96 · 3 Dic 2011

skatz dijo:
Gracias por tu Ejemplo, me gusto mucho, me pregunto si con las librerias de jQuery se puede hacer lo mismo? para no usar ese codigo y poderle agregar mas cosas?

P.D. Muchas gracias ^^

si es posible con jquery pero la verdad no sabria decirte como exactamente ya que normalmente uso ajax en su lugar, saludos.

kirax · 4 Dic 2011

omega96 dijo:
si es posible con jquery pero la verdad no sabria decirte como exactamente ya que normalmente uso ajax en su lugar, saludos.

pos con jquery usaria igual ajax pero de esta fotma

Código:

$(document).ready(function(){
                $('#catalogo').click(function(){
                    $('#content').load('catalogo.html');
                });
                $('#alumno').click(function(){
                    $('#content').load('alumno.phpl');
                });
                $('#buscar').click(function(){
                    $('#content').load('buscar.phtml');
                });
                $('#inicio').click(function(){
                    $('#content').html(' <p class="gems">Bonjour Bienvenido a la Biblioteca de Fairy Tail de Magnolia</p>');
                });
            });



$.ajax({
   type: "POST",
   url: "some.php",
   data: {
        name:"John",
        location:"Boston"
   },
   success: function(responseObject){
     $('#content').html(responseObject.responseText);;
   }
 });

Esas serian las dos maneras con jquery aqui te pongo el ejemplo funcionando:

Código:

<html>
    <head>
        <title>BIBLIOTECA DE FAIRY TAIL</title>
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
        <style>
            @font-face {
                font-family: 'Arcade';
                src: url('Arcade.ttf') format('truetype');
            }
            #content {
                position: relative;
                top: 150px;
            }
            a,a:hover {
                text-align: center;
                text-decoration: none;
            }
            #content {
                position: relative;
                clear: left;
                float: none;
            }
            #nav {
                position: relative;
                clear: right;
                float: none;
            }

            li {
                text-decoration: none;
                list-style: none;
                position: relative;
                clear: right;
                float: left;
                display: block;
                padding-right: 5px;
            }
            ul {
                text-decoration: none;
                text-transform: capitalize;
                font-size: 18px;
                font-weight: bold;
                color: RoyalBlue;
                position: relative;
                clear: both;
                display: block;
            }
            body{
                background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(180,221,180,1)), color-stop(17%,rgba(131,199,131,1)), color-stop(33%,rgba(82,177,82,1)), color-stop(67%,rgba(0,138,0,1)), color-stop(83%,rgba(0,87,0,1)), color-stop(100%,rgba(0,36,0,1))); /* Chrome,Safari4+ */
                font-family: Arcade;
                font-size: 20px;
                font-weight: bold;
            }
            .gems{
                font-family: Arcade;
                font-size: 80px;
                font-weight: bold;
            }
            
        </style>
        <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#catalogo').click(function(){
                    $('#content').load('catalogo.html');
                });
                $('#alumno').click(function(){
                    $('#content').load('alumnado.html');
                });
                $('#buscar').click(function(){
                    $('#content').load('buscar.html');
                });
                $('#inicio').click(function(){
                    $('#content').html(' <p class="gems">Bonjour Bienvenido a la Biblioteca de Fairy Tail de Magnolia</p>');
                });
            });
        </script>
    </head>
    <body><center>
            <div id="main">
                <div id="nav">
                    <ul>
                        <li><a href="#" id="inicio">INICIO</a></li>
                        <li><a href="#" id="catalogo">CATALOGO</a></li>
                        <li><a href="#" id="alumno">ALUMNO</a></li>
                        <li><a href="#" id="buscar">BUSCAR</a></li>
                    </ul>
                </div>
                <div id="content">
                    <p class="gems">Bonjour Bienvenido a la Biblioteca de Fairy Tail de Magnolia</p>
                </div>
            </div>
        </center>
    </body>
</html>

aka alumnado.html

Código:

<html>
    <head>
        <title>Datos de Catalogo</title>
        <style>
            fieldset{
                border-color: royalblue;
                border-width: 2px;
                border-style:  outset;
                width: 700px;
            }
            body { background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(208,228,247,1)), color-stop(24%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(79%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); /* Chrome,Safari4+ */} /* Chrome,Safari4+ */
        </style>
        <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
        <script>
             $(document).ready(function(){

                   $.ajax({
                       url:'alumnado.php?cmd=mostrar',
                       success:function(data)
                       {
                            $('#resultadoAlumno').html(data);
                       }
                   });
            });
            $(document).ready(function(){
                $('#guardado').click(function()
                {
                   Zazas = $('#alumnado').serializeArray();
                   $.ajax({
                       url:'alumnado.php?cmd=guardar',
                       data:Zazas,
                       success:function(data)
                       {
                           alert(data);
                       }
                   });

                   $.ajax({
                       url:'alumnado.php?cmd=mostrar',
       
                       success:function(data)
                       {
                            $('#resultadoAlumno').html(data);
                       }
                   });

                });
            });
        </script>
    </head>
    <body><center>
            <form id="alumnado">
                <fieldset><legend>Consultar Alumnado</legend>
                    <table>
                        <tbody>
                            <tr><td><label>Matricula:</label></td><td> <input type="text" name="matricula" size=15 maxlength=15/></td></tr>

                            <tr><td><label>Alumno:</label></td><td> <input type="text" name="alumno" size=50 maxlength=60/></td></tr>

                            <tr><td><label>Grado:</label> </td><td><input type="text" name="grado" size=2 maxlength=2/></td></tr>

                            <tr><td><label>Grupo:</label></td><td> <input type="text" name="grupo" size=2 maxlength=2/></td></tr>

                            <tr><td><label>Turno:</label> </td><td><input type="text" name="turno" size=25 maxlength=30/></td></tr>

                            <tr><td><label>Libro(s) :</label> </td><td><input type="text" name="libro" size=80 maxlength=80/></td></tr>

                            <tr><td><input type="button" value="Guardar" id="guardado"><td><td> <input type="reset" value="Cancelar"/></tr>

                        </tbody>

                    </table>

                </fieldset>
            </form>
            <div id="resultadoAlumno"></div>
            </center>

        <center>
            <p>This Project was Created in MacBook with Lion OS</p>
        </center>
    </body>
</html>

skatz · 5 Dic 2011

Muchas gracias por la ayuda, me ha servido bastante, ya casi termino la pagina ^^

Hola!

Menu HTML NO FRAMES

skatz

Bovino adicto

kirax

Bovino Milenario

skatz

Bovino adicto

omega96

Bovino de alcurnia

skatz

Bovino adicto

omega96

Bovino de alcurnia

kirax

Bovino Milenario

skatz

Bovino adicto