Use include with Jquery Mobile?

Question

Use include with Jquery Mobile?

Navigation

#1 by (1 votes)

0

I would like to make a page just like it does with Razor MVC (_Layout) with header, and footer, and make the inclusion of it on other pages, how could I do that?

I want to make AJAX Load Content Here's the example I did:

_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>

control.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;
    });
 
});

javascript jquery-ui

asked by anonymous 03.06.2015 / 22:11

1 answer

I can not access class data already instantiated Why is one of the cases incorrect?

score 1 · Answer 1

One way to do what you want is to use load of jQuery.

Let's say you have the files:

header.html

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

footer.html

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

So, in your main file:

<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>

In this way, the contents of the header.html file will be included within the <header id="header"> tag and the footer.html tag in the <footer id="footer"> tag. >

If you want to use links, as in your code, you will have to break the default browsing event using the preventDefault() method:

$(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;
    });

});