Html5 derslerimize devam ediyoruz.Bu derste sayfalara
geri dön butonu yada
ileri butonu koymayı nasıl yapacağımızı anlatacağım.Bu tür butonlar normal sitelerde çok işe yaramasalar bile mobil sitelerimizde çok işe yarayan özelliklerdir.Hemen komutları inceleyelim.
İndir : http://ustaderslik.com/dosya/HTML5%20Sayfalar%20Arası%20İleri%20Geri%20Butonu%20Yapma%20-%20History.zip
history.back() : Bir önceki sayfaya gönderir.
history.forward() : Geri butonunu kullandığın sayfaya geri gitmeni sağlar.
history.go(miktar) : Belirlediğin sayı kadar geri yada ileri gider.Örneğin -2 2 sayfa geri gider 2 ise 2 sayfa ileri gider.
history.length : Bulunduğu sayfa dahil kaç adımda geldiğini bulur.Örneğin 2 sayfadan linklerle o sayfaya gelmişsek değeri üçtür.Bu değer sayesinde istediğimiz sayfalara gönderme yapabiliriz.
Unutmamız gereken nokta geri dönebilmek için önce 1 ileri gitmiş olmamız gerek,ileri gitmek için ise bir geri gitmemiz gerek.
Genel örnek :
index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript">
function ileri(){
history.forward()
}
</script>
</head>
<body>
<a href="a.html">a sayfasına git.</a>
<button onClick="ileri()">İleri Git</button>
</body>
</html>
a.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript">
function geri(){
history.back()
}
</script>
</head>
<body>
<a href="b.html">b sayfasına git.</a><button onClick="geri()">Geri Dön</button>
</body>
</html>
b.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript">
function geri(){
history.go(-2)
}
</script>
</head>
<body>
<button onClick="geri()">2 Sayfa Geri Dön</button>
</body>
</html>
UstaDerslik
