1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div id="icerik" style="font:normal normal normal 11px verdana;border:1px solid #000000; width:400px;height:300px;padding:4px">&nbsp;</div>
<div id="sayfalar" style="font:normal normal normal 11px verdana;border:1px solid #000000;width:400px;padding:4px;text-align:right">Sayfalar = </div>
<script language="JavaScript">
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 = ""
 
function bol(metin) {
bolum = metin.split("<!--bol-->")
 
for(i=0;i<bolum .length;i++) {
document.getElementById("sayfalar").innerHTML += "<a href="#" onclick="sayfaGoster("+(i)+")">"+(i+1)+"&nbsp;"
}
}
 
function sayfaGoster(syf) {
document.getElementById("icerik").innerHTML = bolum[syf]
}
 
bol(metin)
sayfaGoster(0) //Javascript´in saymaya sıfırdan başladığını unutmuyoruz.
 
</bolum></script>

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

1
2

<div id="icerik" style="font:normal normal normal 11px verdana;border:1px solid #000000; width:400px;height:300px;padding:4px">&nbsp;</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:

4
5

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:

8

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.

10
11
12
13

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

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.

15
16
17

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:

19

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).

20

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. İyi yazılarda kullanmanız dileğiyle :)

NOT: Script hem Internet Explorer 6.0´da hem de Mozilla Firefox 1.0.4´te denenmiş olup herhangi bir hataya rastlanmamıştır. Scriptin düzgün çalışabilmesi için gerekli katmanların mutlak surette sayfaya eklenmiş olması, farklı isimler kullanılacaksa script kodu içerisinde gerekli yerlerin değiştirilmesi gerekmektedir.