0

Eu gostaria de fazer uma página assim como é feito com Razor MVC (_Layout) com cabeçalho, e rodapé, e fazer a inclusão dele nas demais páginas, como eu poderia fazer isso?

Quero fazer o AJAX Load Content Veja o exemplo que fiz:

_Layout.html

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<title>Treinamento</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css">
	<script src="js/jquery.js"></script>
	<script src="js/jquery.mobile-1.3.0.min.js"></script> 
	<script src="js/controle.paginas.js"></script> 
 
    <script>
        //exemplo do marcos vinicius
        $(function () {
            $("conteudo").load("pagina_teste.html");
        });
 
    </script>
 
 
</head>
 
<body>
 <!--inicio da página de cardápio--> 
    <div id="cardapio" data-role="page">
 
         <!--cabeçalho-->
		<div data-role="header" data-theme="e" data-position="fixed" data-id="vs.header">
            <h1>Cardápio</h1>
            <a href="#home" data-transition="fade" data-icon="back" data-iconpos="notext" >Home</a>
		</div>
        <!--cabecalho-->
 
 
        <!--conteúdo-->
        <div data-role="content" id="conteudo">
            <P>adicionar o conteúdo de todas as páginas externas  </P>
        </div>
        <!--conteúdo-->
 
       
 
        <div data-role="footer" data-position="fixed" data-theme="e" data-id="vs.footer">
           <div data-role="navbar">
                <ul id="nav">
                      <li><a href="pagina_teste.html" data-icon="home">Página de Teste</a></li>
               </ul>
           </div> <!--fim do navbar-->
        </div> <!--fim do footer-->
 
    </div> <!--fim da página-->  
 
</body>
 
 
</html>

pagina_teste.html
<p>esté é o conteúdo da página</p>

controle.paginas.js

$(document).ready(function () {
    $('#conteudo').load('conteudo/pagina_teste.html');
 
    $('ul#nav li a').click(function () {
        var page = $(this).attr('href');
        $('#conteudo').load('conteudo/' + page + '.html');
        return false;
    });
 
});
 

3
  • Pelo que eu entendi, você quer customizar um Layout para web e outro para mobile, é isso? Commented 3/06/2015 às 21:13
  • Você incluiu a tag asp.net-mvc. Você está usando este framework? Se sim, por que não usa o Razor então? Commented 3/06/2015 às 21:24
  • Estou usando apenas Jquery puro, estou querendo fazer um AJAX Load Content, eu alterei o conteúdo da minha pergunta, veja se pode me ajudar. agradeço
    – Harry
    Commented 4/06/2015 às 0:06

1 Resposta 1

1

Um jeito de fazer o que você quer é usar o load do jQuery.

Digamos que você tem os arquivos:

header.html

<div>
    <img src="meulogo.png" alt="Meu Logo" />
    <h1>Minha página</h1>
</div>

footer.html

<p>
     Conteúdo do rodapé
</p>

Então, no seu arquivo principal:

<html>
  <head>    
    <title></title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script> 
        $(function(){
            $("#header").load("header.html"); 
            $("#footer").load("footer.html"); 
        });
    </script> 
  </head>
  <body>
    <header id="header">        
    </header>

    <footer id="footer">
    </footer>
  </body>
</html>

Dessa forma, o conteúdo do arquivo header.html será incluído dentro da tag <header id="header"> e do arquivo footer.html na tag <footer id="footer">.

Se quiser usar links, como no seu código, terá que interromper o evento padrão de navegação, usando o método preventDefault():

$(document).ready(function () {
    $('#conteudo').load('conteudo/pagina_teste.html');

    $('ul#nav li a').click(function (event) {
        event.preventDefault();
        var page = $(this).attr('href');
        $('#conteudo').load('conteudo/' + page + '.html');
        return false;
    });

});
3
  • Marcus, eu estou querendo fazer um AJAX Load Content, eu alterei o conteúdo da minha pergunta, veja se pode me ajudar. agradeço
    – Harry
    Commented 4/06/2015 às 0:05
  • Bem @MarcusVinicius, ficou muito interessante sua resposta, mas e se no arquivo principal eu quisesse me livrar daquelas tags padrões como <html> e <head> além de carregar scripts padrões para todas as páginas, como acontece no projetos que usam Razor, isso seria possível? Commented 5/06/2015 às 3:41
  • Não, nada como o Razor. Sem usar nenhuma tecnologia do lado do servidor fica difícil chegar nesse nível de reutilização. Existe um rascunho da W3C para permitir inclusão de HTML apenas com tag <link>, mas ainda é muito incompatível com os browsers atuais. Commented 5/06/2015 às 3:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .