Jump to content

Ajuda - Lista de projectos "Seguinte" e "Anterior"


Offline

Recommended Posts

Olá Pessoal.

Tenho um website onde pretendo criar uma funcionalidade que navegue entre várias páginas HTML com botões "Seguinte" e "Anterior".

Como é que posso fazer isso duma forma fácil usando PHP?

Pensei que poderia ser útil, ter um ficheiro XML com a informação das páginas a carregar para que assim seja mais fácil de adicionar novas páginas.

Obrigado pela ajuda ;-)

Edited by Offline
Link to comment
Share on other sites

Por muito mais que que estude só aprendo uma coisa, que ainda tenho muita coisa para aprender.

A beleza de um código está em decompor problemas complexos em pequenos blocos simples.

"learn how to do it manually first, then use the wizzy tool to save time."

"Kill the baby, don't be afraid of starting all over again. Fail soon, learn fast."

Link to comment
Share on other sites

O que pretendo não será propriamente um sistema de paginação e até queria evitar ter de usar uma base de dados só para esta funcionalidade.

Talvez não me tenha explicado bem...

Tendo uma lista XML (que seria o ideial) ou pasta com ficheiros HTML, ando a tentar fazer um script para navegação entre todas essas páginas HTML.

A navegação é feita com os tradicionais botões de "Anterior" e "Seguinte".

Aqui fica um screenshot para ajudar a esclarecer:

NavProjectos.jpg

Inicialmente pensei na lista XML para ser mais fácil de adicionar uma nova página. Seria só adicionar um registo no ficheiro XML.

Mas eventualmente o script pode "carregar" os ficheiros que estiverem numa pasta.

Será necessário PHP ou Javascript também resulta?

Link to comment
Share on other sites

Não precisas de javascript nem da base de dados. Podes ler os dados de num XML ou de uma pasta com um ficheiro por registo.

No caso do XML basta contar os nodes e calcular a página a enviar para o anterior / seguinte, mediante a página corrente e o máximo de registos. Podes também ter no PHP um array com o caminho / informação de cada registo.

Link to comment
Share on other sites

Obrigado pela ajuda Yoda.

Sei que isto vai no "sentido contrário" da tua solução mas entretanto tentei qualquer coisa com JQuery...

Criei a pasta "projectos" onde tenho os ficheiros HTML, "1.html", "2.html", "3.html", etc. e este ficheiro JavaScript

Não sei se o código está correcto...

$(function(){
var _href = location.pathname.split('/')[1];
var _url = location.pathname.split('/');
var _length = _url.length;
var _page = _url[_length - 1] + "";
var _current = _page.split('.')[0];
_current = parseInt(_current);
$('a.next').click(function(){
 var request = location.protocol + '//' + location.hostname + '/' + _href + "/" + (_current + 1) + '.html';
 $.ajax({
	 url: request,
	 type:'HEAD',
	 error: function()
	 {
		 // last page
	 },
	 success: function()
	 {
		 window.location = request;
	 }
 });
});

Em todos os ficheiros HTML (dos projectos) tenho este código mas não percebo como conseguir que os links ("Anterior" e "Seguinte") apontem para o anterior e próximo ficheiro respectivamente.

...
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
  <script src="code.js"></script>
  <a class="prev" href="#">< Anterior</a> | <a class="next" href="#">Seguinte ></a>
...
Link to comment
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var url = {};
url.pathname = window.location.pathname;
url.filename = url.pathname.match(/.*\/([^/]+)\.([^?]+)/i)[1];
url.full = location.protocol+'//'+(location.hostname.length==0?'':location.hostname+'/')+url.pathname;
$(function() {
$('a.navigate').on('click', function() {

 var current = parseInt(url.filename);
 var previous = current > 1 ? current - 1 : 1;
 var next = current + 1;
 var index = $(this).is('.next') ? next : previous;
 var request = url.full.replace(/^(.*\/)?[^\/]+\.(html|htm|xhtml)$/i, '$1'+index+'.$2');

 $.ajax({
  url: request,
  error: function()
  {
   console.log('file doesn\'t exist');
  },
  success: function()
  {
   window.location = request;
  }
 });

 return false;
});
});
</script>
</head>
<body>
<a class="navigate prev" href="#">< Anterior</a> | <a class="navigate next" href="#">Seguinte ></a>
</body>
</html>
Edited by yoda
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.