Is it possible to assemble default layout for HTML pages?

Asked

Viewed 598 times

4

If I have two pages: pagina1.html and pagina2.html, that are very similar, it is possible to use a page layout.html to determine common elements of each page? And thus also avoid the repetition of tags as in Asp.Net MVC, Ruby on Rails, etc...

javascript jquery html css

3 answers

1

/////javascript function

function url(link){
        document.getElementById("conteudo").setAttribute('src','paginas/'+link);
    }

////html links

<div onclick="url('inicio.html')">Início</div>
<div onclick="url('sobre.html')">Sobre</div>
<div onclick="url('contato.html')">contato</div>

///// IFRAME PUT BETWEEN HEADER AND FOOTER OF YOUR WEBSITE WHERE CONTENT WILL APPEAR.

<iframe id="conteudo">
</iframe>

REMEMBERING THAT AI YOU WILL HAVE THAT BY CSS REMOVE THE EDGE OF THE IFRAME AND THE SCROLL BAR ALSO IF YOU PREFER.

0

You can use Angular.js and Angular-route.js, would look like this:

HTML page

<html ng-app="TesteApp">
   <head>
     <meta charset="UTF-8">
     <title>Teste Rotas</title>
   </head>        
   <body>
    <a href="#/pagina-1">Pagina 1</a>
    <a href="#/pagina-2">Pagina 2</a>        
    <h1> Master Page </h1>

    <div ng-view>
      <!--Dentro da div ng-view , será renderizado nossas partials-->
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script src="main.js"></script>
  </body>

main.js file

//Modulo do app
var app = angular.module("TesteApp", ['ngRoute']);

 //Configuração das rotas
 app.config(function ($routeProvider) {
   $routeProvider        
      .when("/pagina-1", { //URL
          templateUrl: "caminho/pagina-1.html", //Caminho da pagina HTML
          controller: "nomeController" //controller que será usado
      })
    .when("/pagina-2", { //URL
        templateUrl: "caminho/pafina-2.html", //Caminho da pagina HTML
        controller: "nomeController" //controller que será usado
    })
   .otherwise({ redirectTo: '/pagina-1' }); //Se não for nenhuma url , redireciona para esta
 });

    app.controller("nomeController",function($scope){ //Controller
       $scope.mensagem = "Olá"
 });

And then as the URL changes, the pages will be rendered inside the ng-view div.

-1

I usually use a standard page I call Masterpage.html and add my fixed elements to it, and the other pages I call via include the way I need to.

Example have the default page with my Header and my Footer fixed and when clicking on some link in my menu I call the referring page that contains only the page information.

  • Exact @Rodrigosantos , but my doubt is just how to do it using purely HTML, CSS and Javascript.

  • in case I would use as you want purely my master javascript with the contents that would be fixed, and in the part of the content that would be dynamic I would put an iframe, and ai through javascript you will change the src of iframe.

  • You would have an example so that I could understand more clearly?

  • I answered you ok, the way I implemented in a code with the same situation.

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.