Jquery ile “Yazının Devamını Oku” (Read More) Methodu
Merhabalar,
Birçok sitede yazıların devamını okuyabilmek için bir seçenek bulunur ve bu seçenek genellikle konunun tümünün başka bir sayfada açılmasını sağlar. Ancak eğer biz konunun devamını yine aynı sayfada görmek istersek, burada Javascript kütüphanelerinden biri olan Jquery yardımımıza koşuyor. Sözü daha fazla uzatmadan kodumuzu yazmaya başlayalım.
1) Öncelikle xhtml ve css ile basit bir şablon oluşturalım.
<html>
<head><title>Jquery ile Read More Methodu</title>
<style type="text/css">
#mesajKutusu { width:400px; border:2px solid #000; padding:10px} /* En dış çerçeve ( Mesaj Kutusu ) */
#mesajKutusu #mesaj p.baslik { font-weight:bold; font-size:18px; font-decoration:underline; color:red; }
#mesajKutusu #mesaj .m2 { display:none; } /* Varsayılan olarak yazının devamının gösterilmemesi sağlıyoruz */
#mesajKutusu #mesaj p.readMore { font-size:12px; color:#000; } /* "Devamını oku" kısmı için yaptığımız görünüm ayarı */
</style>
</head>
<body>
<div id="mesajKutusu">
<div id="mesaj">
<p class="baslik"> Jquery ile read more methodu </p>
<div class="m1">1923 yılında Trabzon'da ilk resmi lig maçları oynanmaya başlandı. İlk sezon İdmanocağı şampiyon olmuştu. Bunu 1923-24,1924-25 sezonlarında Lise takımının arka arkaya şampiyonlukları izledi. 1925 sezonunda yine İdmanocağı şampiyon olurken, 1929 yılına kadar da önce Lise, arkasından Muallim Mektebi daha sonra da Ticaret Lisesi takımları mutlu sona ulaştılar.</p>
<div class="m2">İdmanocağı ile İdmangücü arasındaki büyük rekabet 1930dan sonra had safhaya ulaştı. 1929-30dan sonra 5 kez arka arkaya İdmanocağı'nın şampiyon olmasından sonra 1934-35 sezonundan itibaren İdmangücü takımı tam 7 yıl arka arkaya şampiyon olarak bu iki takım arasındaki rekabeti büsbütün alevlendirmişti.</div>
<p class="readMore"><a href="#">Devamını Oku...</a></p>
</div></div>
</body>
</html>
2) Jquery kütüphanesini şablonumuza çağıralım.
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script> [/html] Not: Bu kodu "head" tagları arasına ekleyiniz ve eklemeden önce indirdiğiniz Jquery kütüphanesinin sürümünün kullandığım sürüm ile aynı olmasına dikkat ediniz. Eğer indirdiğiniz sürüm farklı ise, ilgili sürümünün adını src kısmında gereken yere yazınız. Yazının Devamı
