Sayfama veritabanından uzunca bir makale çekiyorum, doğal olarak sayfa aşağıya doğru bir hayli uzuyor. Bu da bana göre kabul edilemez bir yük bindiriyor ziyaretçiye. Bu halde çektiğim uzun kaydı javascript ile sayfalayabilirsem okuyucunun işini kolaylaştırmış olacağım. makale detay sayfam kabaca şu alanları çekiyor veritabanından;
başlık
fotoğraf
metin
yazar bilgileri
metin alanından çekilen veri uzun olduğu zaman (ki çok kez uzun oluyor), okuyucu bu metni okumaktan korkuyor (ya da ben öyle zannediyorum). JavaScript ile böyle bir sayfalamayı nasıl yapabilirim?
Yani sayfam aşağıya doğru uzamadan görüntülenecek, artan kısım sağ altta sayfa 1 - 2- 3 ... şeklinde sayfalanacak.
bunu yaparak elde etmeyi ümid ettiğim faydalar:
- Ürkek ziyaretçimi yüreklendireceğim
- Makale bir kez yüklendikten sonra bir daha yüklemeye gerek olmaksızın sayfalanan kısımlar ekrana getirilecek (Bu client taraflı sayfalama yapma nedenim)
- Aşağıya doğru uzayıp giden bir tasarım yerine daha derli toplu bir tasarıma sahip olacağım.
JavaScript konusunda çok iyi olmasam da, öğrenmeye çalışan, bu konuya kafa yoran, basit ihtiyaçlarını karşılayabilen bir seviyedeyim.
bu konuda yol gösterip, yardımcı olabilecek arkadaşların ilgileneceğini ümid ediyorum.
Cözüm:
Öncelikle uzun yazını sayfalara ayırmak için metnin içine belirleyiciler koymalısın. Mesela sayfalama yapılmasını istediğin yere "<!--bol-->" kodunu koyabilirsin. bu browser'da görünmeyeceği için sorun olmaz. Sonra sayfanın içeriğini ve sayfa numaralarını yazdıracağın iki ayrı katmanın olması lazım. Sayfa içeriği için olan katmanın adına "icerik", sayfa numaralarının olduğu katmanın adına da "sayfalar" diyelim.
Sonra bir fonksiyon yazıp içeriğimizi işaretli yerlerden keselim ve her sayfayı bir dizi değişkenin elemanı olarak atayalım. Daha sonra bu fonksiyonun içinde "sayfalar" katmanına sayfa sayılarını yazdıralım. Sonra sayfa sayılarına göre "icerik" katmanının içeriğini dolduracak fonksiyonu yazalım. Yapalım edelim dedim ama kodlar nerede? Aşağıda!
Kod: Tümünü seç
<div id="icerik" style="border:1px solid #000000"> </div>
<div id="sayfalar" style="border:1px solid #000000">Sayfalar = </div>
<script>
var metin = "deneme1 <!--bol-->deneme2 <!--bol-->deneme3 <!--bol-->deneme4"
var bolum = ""
function bol(metin) {
bolum = metin.split("<!--bol-->")
for(i=0;i<bolum.length;i++) {
document.getElementById("sayfalar").innerHTML += "<a href=\"javascript:\" onclick=\"sayfaGoster("+(i)+")\">"+(i+1)+"</a> "
}
}
function sayfaGoster(syf) {
document.getElementById("icerik").innerHTML = bolum[syf]
}
bol(metin)
sayfaGoster(1)
</script>