Menu e conteúdo gerido por JQuery/AJAX – Plugin

Olá novamente, hoje vou falar de um plugin que eu criei para testar as potencialidades do JQuery, o qual ando a aprender. E decidi partilhar com voces este plugin.

  • Irá precisar de efectuar o download da ultima versão do jquery, versão 1.7.2 na altura deste post: download ou siga o site.
  • Necessita também do plugin manager: download.
  • Pode também efectuar o download de uma versão funcional, para ver melhor como tudo funciona: download.
  • É necessário a existencia de uma página home.php, pois esta será utilizada como pagina inicial.


Para poder ver o plugin em funcionamento, pode ver o meu site pessoal onde ele está a funcionar: joaomoura.net.

O plugin funciona através de pedidos Xml através de AJAX, efectuados com o JQuery. Ao carregarmos num link que tenha a classe page o plugin irá alterar o conteúdo do elemento div com id “content”. Para isto ele utiliza o atributo href do elemento a.

Exemplo de Utilização

Vamos utilizar um <div id=”content”> onde vai inserir a página pedida, e um <div id=”nav”> que será o nosso menu.

Seguir o exemplo index.php:

<div id="nav">
<ul>
    <li>
        <a class="page" href="home.php">Menu1</a>
    </li>
    <li>
        <a class="page" href="pag2.php">Menu2</a>
    </li>
</ul>
<br class="clear"/>
<div id="loader"><img src="imagens/loading.gif"/><br/>Loading</div>
</div>
<div id="content"></div>

Neste exemplo ao carregarmos no primeiro link, o elemento div com o id de “content” terá o conteúdo da página pag1.php.

Um pequeno Css so para embelesar a página, layout.css:

#nav{
    position: relative;
    width:1000px;
    margin:0px auto;
}
#nav ul li{
    float: left;
    margin-right: 10px;
}
#nav ul li a {
    display: block;
    margin: 10px;
    font-size: 19px;
    line-height: 23px;
    text-align: left;
    text-decoration: none;
}
#nav ul li:hover{
    border-color: white;
}
#nav #loader{ 
    display: none;
    position: absolute;
    right: 10px;
    top: 20px;
    text-align: center;
}
.clear{
    clear:both;
}
#content{
    width:1000px;
    margin:0px auto;
}

Agora só falta a home.php:

<div>
    Olá mundo!
</div>

E a pag2.php:

<div>
    Adeus mundo!
</div>

Espero que seja útil, e deixem um comentário no caso de descobrirem algum erro :).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s