Import no html

Fala pessoal, está agora na fase de working draft o html import, mas agora com a versão atual do Chrome e do Opera já é possível utilizar este recurso, podendo ser conferido no site caniuse. Isso ajuda muito o conceito de Web Components que está começando a ser produzindo atualmente, com esse novo recurso, podemos fragmentar o código e reaproveita-lo novamente em outras páginas.

Então vamos ai o exemplo, primeiro criamos o index.html

 <!DOCTYPE HTML>  
 <html lang='pt-br'>  
      <head>  
           <title>André Betiolo</title>  
           <meta charset="UTF-8">  
           <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">  
           <link rel="import" href="views/header.html">            
      </head>  
      <body>  
           <section class="main"></section>  
           <script type="text/javascript" src="js/app.js" ></script>  
      </body>  
 </html>  

Depois o javascript:

 window.onload = function(){  
      var link = document.querySelector('link[href="views/header.html"]');  
      var header = link.import.querySelector('header');  
      var content = document.querySelector('.main');  
      content.appendChild(header);  
 };  

E por ultimo a criação da nossa página header.html, que futuramente poderá ser utilizada em outras páginas.

 <header>Header importado</header>  

Desta forma conseguimos adicionar o conteúdo do header.html na index, mas isso pode ser utilizado em conjunto com as tag "style" e "script", podendo também fazer o estilo na própria página de cada parte assim como o seu javascript, fazendo com isso criar realmente componentes.

É isso ai, qualquer dúvida só deixar nos comentários, e como sempre tem um exemplo completo la no GitHub.

Abração a todos e até mais ;)

Comentários

Postagens mais visitadas deste blog

Teclas de atalho(accesskey) no HTML5

Utilizando o Gulp para facilitar seu desenvolvimento front-end

Lazy load no Angular using Jquery