Coluna Dreamweaver – Framework Spry: função Spry.Utils.updateContent

Introdução

Salve Pessoal! nesse tutorial vamos aprender a utilizar a função Spry.Utils.updateContent do Framework Spry que é muito útil, muito fácil de usar, e muito fácil de fazer, o resultado será igual a esta página, so que sem os efeitos.

Pré-requisito

Dreamweaver CS3, para baixar a versão trial clique aqui, ou o Framework Spry

Conceitos

A função Spry.Utils.updateContent faz a atualização do conteúdo sem a necessidade de ficar recarregando a página, ela faz a simulação de um iframe

Para utilizar a função Spry.Utils.updateContent e necessário declarar quatro argumentos, sendo o primeiro a id da Div onde a página vai ser carregada, o segundo argumento é a URL da página, o terceiro argumento é para uma função funcionar depois que a página é carregada e o quarto argumento é para alguns argurmentos especiais. Utilizaremos somente as duas primeiras.

Conteúdo

Crie uma nova página, ela pode ser de qualquer tipo, com a página salva vamos incluir o arquivo SpryData.js
do Frameworks Spry dentro da tag Head

Agora vamos utilizar a função Spry.Utils.updateContent junto com a função onLoad dentro da tag Body, indicando qual página será carregada inicialmente

Vamos adicionar os links e a função Spry.Utils.updateContent junto com a função onClick para que quando o usuário clique no link a função Spry.Utils.updateContent faça o update da página dentro da div informada.

Cada link pode ser utilizado para atualizar uma Div diferente, basta apenas informa a id da Div no primeiro argumento

Agora vamos criar a div onde a função Spry.Utils.updateContent carregará a página

O código final é esse:

<html>
<head>
<title>Funnção Spry.Utils.updateContent</title>
<script language=”javascript” type=”text/javascript” src=”/includes/SpryData.js”></script>
</head>
<body onload=”Spry.Utils.updateContent(‘id_da_div’,'pagina_inicial.html’);”>
<h3>Funnção Spry.Utils.updateContent</h3>
<p>
<a href=”#” onclick=”Spry.Utils.updateContent(‘id_da_div’,'pagina_1.html’);”> Link 1 </a>
<a href=”#” onclick=”Spry.Utils.updateContent(‘id_da_div’,'pagina_2.html’);”> Link 2 </a>
<a href=”#” onclick=”Spry.Utils.updateContent(‘id_da_div’,'pagina_3.html’);”> Link 3 </a></p>
<div id=”id_da_div”></div>
</body>
</html>