Mismo Header para todas las paginas

aullate2508 · #1 (**permalink**) 05/04/2015, 05:15

Hola,

Soy bastante novato, he intentado navegar para dar solución a mi problema pero no lo veo.

En jQuery Mobile tengo el siguiente código:

<body>


<div data-role="page" id="1">

<div data-role="header">
<h1>HEDAER</h1>
</div>

<div data-role="content">
PAGE 1
</div>
</div>


<div data-role="page" id="2">

<div data-role="header">
<h1>HEDAER</h1>
</div>

<div data-role="content">
PAGE 2
</div>
</div>
</body>

Pues bien, la cuestión es que quiero meter el Header:

<div data-role="header">
<h1>HEDAER</h1>
</div>

En un fichero a parte e incluirlo en cada page del index.html. No se como hacerlo, ni con html ni con javascript.

¿Alguna ayuda?

NueveReinas · #2 (**permalink**) 05/04/2015, 08:17

Lo primero de todo; por favor, usa el Highlight que proporciona el foro.

Segundo; podrías crear un archivo JS donde pongas todos los datos del header/nav en un html() asociado a un manejador del tipo $("#header_general"), y entonces incluir ese DIV en todas las páginas junto al archivo JS.

Saludos.

aullate2508 · #3 (**permalink**) 05/04/2015, 08:45

Hola, gracias por la respuesta pero podrías ser un poco más especifico? Toy bastante pez.

Gracias!

NueveReinas · #4 (**permalink**) 05/04/2015, 10:14

Algo así: http://jsfiddle.net/rsrc68yq/

Código HTML:

Ver original<div id="incluir-header"></div>

Código Javascript:

Ver original$(document).ready(function(){
    
    //Ponemos todo el contenido del header en el contenedor llamado "incluir-header" (o como quieras llamarlo) a través del html de JS
$("#incluir-header").html('<div id="header"><ul><li id="inicio">Inicio</li><li id="pagina1">Página 1</li><li id="pagina2">Página 2</li><li id="pagina3">Página 3</li><li id="pagina4">Página 4</li></ul></div>');
 
    //Comprobamos la URL, por ejemplo, para el index:
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "")
{  $("#inicio").addClass('activo'); };
 
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "index")
{  $("#inicio").addClass('activo'); };
 
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "index.html")
{  $("#inicio").addClass('activo'); };
    
    //Y así con todas las páginas y sus URLs variantes (que terminan con .html o .php por si acceden desde ese enlace)
    
    //Página 1
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "pagina1")
{  $("#pagina1").addClass('activo'); };
    
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "pagina1.php")
{  $("#pagina1").addClass('activo'); };
    
    //Página 2
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "pagina2")
{  $("#pagina2").addClass('activo'); };
    
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "pagina2.php")
{  $("#pagina2").addClass('activo'); };
 
    //Página 3
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "pagina3")
{  $("#pagina3").addClass('activo'); };
    
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "pagina3.html")
{  $("#pagina3").addClass('activo'); };
    
    //Página 4
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "pagina4")
{  $("#pagina4").addClass('activo'); };
    
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "pagina4.html")
{  $("#pagina4").addClass('activo'); };
    
});

Código CSS:

Ver original/* Estilos de ejemplo */
 
#header {
    max-width:900px;
    padding-top:15px;
    padding-bottom:15px;
    background:#CCC;
}
 
ul {
    list-style:none;
    margin:0;
    padding:0;
}
 
li {
    color:white;
    display:inline-block;
    margin-left:10px;
    margin-right:10px;
    background:#666;
    padding:15px;
}
 
li:hover {
    color:#666;
    background:white;
}
 
.activo {
    color:#666;
    background:white;
    border:1px red solid;
}

De todas formas te aclaro que algo parecido se podría hace en PHP, pero bueno, este ejemplo está hecho en JS.

fede5426 · #5 (**permalink**) 05/04/2015, 18:16

Podes usar includes de php.

En el lugar donde va el header colocas esto:

Código PHP:

Ver original<?php include("ruta/de/tu/header.html"); ?>

Y listo.

Saludos

lauser · #6 (**permalink**) 06/04/2015, 03:57

Opino como fede5426. Es lo mas sencillo y practico.

aullate2508 · #7 (**permalink**) 12/04/2015, 09:14

Cita:

Iniciado por fede5426

Podes usar includes de php.

En el lugar donde va el header colocas esto:

Código PHP:

Ver original<?php include("ruta/de/tu/header.html"); ?>

Y listo.

Saludos

El problema es que no tengo un server php, es para una app de movil :(

NueveReinas · #8 (**permalink**) 13/04/2015, 07:33

Cita:

Iniciado por aullate2508

El problema es que no tengo un server php, es para una app de movil :(

Gracias por ignorarme...

aullate2508 · #9 (**permalink**) 14/04/2015, 13:55

Cita:

Iniciado por NueveReinas

Gracias por ignorarme...

Jeje no no ... no te he ignorado pero sigo buscando.
Esperaba algo "más limpio" XD

Carlangueitor · #10 (**permalink**) 14/04/2015, 16:10

Pues con unas funciones ese código se vería decente, ¿por que no lo haces tu?

Saludos

aullate2508 · #11 (**permalink**) 15/04/2015, 14:44

Cita:

Iniciado por Carlangueitor

Pues con unas funciones ese código se vería decente, ¿por que no lo haces tu?

Saludos

Por que no se :)

Carlangueitor · #12 (**permalink**) 15/04/2015, 15:27

Pues por ahí empezamos mal, si quieres que por acá quieres que te hagan el trabajo conformate con que esté feo el código.

Saludos