JavaScript ile Sayfalama

Elinizde çok uzun bir yazı var, bu yazıyı sitenizde yayınlamak
istiyorsunuz ama çok uzun olduğu için sitenizin görünümünü
bozacak endişesiyle bir türlü ekleyemiyorsunuz. ASP veya PHP
gibi dilleri kullanarak bu yazıyı sayfalara bölebilirsiniz
fakat bu sefer de her sayfa için sitenin yeniden yüklenmesi
gerektiğinden bu durumun kullanıcıyı iteceğini düşündüğünüz
için bunu da istemiyorsunuz. O zaman çözüm JavaScript´te.
Aşağıdaki fonksiyonu tarif edildiği şekilde kullanacak
olursanız, yazınızı istediğiniz boyutta hazırlamış olduğunuz
DIV katmanı içine ekleyebilir ve sayfalar arasında tekrar
yüklemeye gerek olmadan gezinebilirsiniz. Önce kodumuzun
tamamını yazıp daha sonra satır satır ayrıntılarına girelim.

<div
id="sayfalar"
style="font:normal
normal normal 11px verdana;border:1px solid #000000;width:400px;padding:4px;text-align:right">Sayfalar
= </div>

var
metin =
"Birinci sayfada okunacak yazı
İkinci sayfada okunacak yazıÜçüncü
sayfada okunacak yazıDördüncü sayfada
okunacak yazı"

var
bolum =
""

function
bol(metin) {

bolum = metin.split("")

for(i=0;i<bolum.length;i++)
{

document.getElementById("sayfalar").innerHTML
+= "<a href="#" onclick="sayfaGoster("+(i)+")">"+(i+1)+"</a> "

}

function
sayfaGoster(syf) {

document.getElementById("icerik").innerHTML
= bolum[syf]

}

bol(metin)

sayfaGoster(0) //Javascript´in
saymaya sıfırdan başladığını unutmuyoruz.

</script>

Öncelikle ilk iki
satırı ele alalım:


<div id="icerik" style="font:normal normal normal 11px verdana;border:1px solid #000000; width:400px;height:300px;padding:4px"> </div> <div id="sayfalar" style="font:normal normal normal 11px verdana;border:1px solid #000000;width:400px;padding:4px;text-align:right">Sayfalar = </div>

Buradaki DIV
katmanlarının sadece ID özelliklerine dikkat edilmeli.
Yazının ekleneceği katmanın ID´si "icerik", sayfa sayılarının
yazdırılacağı katmanın ID´sinin de "sayfalar" olması
gereklidir. Diğer tüm görsel değişiklikleri kendi isteğinize göre
değiştirebilirsiniz.

Şimdi de
scriptimize geçelim:


var metin = "Birinci sayfada okunacak yazı <!--bol-->İkinci sayfada okunacak yazı<!--bol-->Üçüncü sayfada okunacak yazı<!--bol-->Dördüncü sayfada okunacak yazı" var bolum = ""

4. satır
işleyiş için çok önemli. Elinizde bulunan yazıya uygulamanız gereken
bir kural var. Yazınızı bölmek istediğiniz yerlere ""
ayracı koymanız gereklidir. Bu ayraçlar sayesinde yazınız bol()
fonksiyonu kullanılarak sayfalara bölünecektir.

5. satırdaki "bolum" isimli değişkenimiz ise bol()
fonksiyonu tarafından kullanılacaktır. bol() fonksiyonu,
yazımızı belirttiğimiz yerlerden bölecek, bu değişkenimizin veri
tipini dizi değişkeni türüne çevirecek ve bulduğu her sayfayı bu
değişkenimizin içinde saklayacaktır. Nitekim 8. satırda bu
işlem gerçekleşiyor:


bolum = metin.split("<!--bol-->")

10. satırda
bulunan "for" döngüsü, "bolum" değişkeni sayesinde,
"sayfalar" katmanına değişkenin dizi sayısınca sayfa linki
ekler.

11. satırda eklenen link etiketlerinin "onclick"
olaylarında; yazının görüntüleneceği "icerik" katmanında
gösterilecek kısımların numaraları sayfaGoster() fonksiyonuna
parametre olarak gönderilerek bu fonksiyon tetiklenir ve 12.
satırda döngümüzün sınırı belirlenerek kapatılır.


for(i=0;i<bolum.length;i++) { document.getElementById("sayfalar").innerHTML += "<a href="#" onclick="sayfaGoster("+(i)+")">"+(i+1)+"</a> " }

15 ve 17.
satırlar arasındaki sayfaGoster() fonksiyonu, kendisine
parametre olarak gönderilen numarayı alır, "bolum" dizi
değişkeninde bu sayıya denk gelen veriyi bulur ve "icerik"
katmanının innerHTML özelliği kullanılarak bulunan veri bu
katmana yazdırır.


function sayfaGoster(syf) { document.getElementById("icerik").innerHTML = bolum[syf] }

Son olarak sayfanın
ilk yüklendiğinde sayfalama işleminin yapılabilmesi için
scriptimizin bol() fonksiyonunu çağırıp yazımızı böldürmeli
ve çıkan sonucun ilk değerini katmanımıza yazdırmalıyız. Bu,
kullanıcı sayfayı açtığında ilk sayfayı görmesini sağlamak anlamına
geliyor. 19. satırda "metin" değişkenimize atadığımız
veriyi bol() fonksiyonu ile işletiyoruz:


bol(metin)

Ve 20.
satırda da sayfaGoster() fonksiyonu ile elimizdeki ilk değeri
"icerik" kısmına yazdırıyoruz (Bunu yapmazsak açılışta "icerik"
katmanımız boş görünecektir).


sayfaGoster(0) //Javascript´in saymaya sıfırdan başladığını unutmuyoruz.

Artık yazımız
istediğimiz boyutlarda ayarlanmış ve istediğimiz yerlerden kesilmiş
vaziyette, sayfa yeniden yükleme sorunu olmadan sayfalar arasında
anında geçişler yapmaya hazır şekle geldi.

Hancı Eğitim

Java Script Dersleri

Ara

Eğitim

Konular

Tags