Daha JavaScript’in JQuery kütüphanesini anlatmıştım. Şimdi ise bir örnekle bu kütüphaneyi göreceğiz. Bu örnek, içerik gösterip gizlemeyle alakalı.
İçerik gösterip gizleme için fonksiyonel olarak üç fonksiyon kullanır; show, hide ve toggle. Toggle, içerik gösterilirken gizlemeyi, gizliyken göstermeyi algılar.
Sayfamızda bulunan bir div objesinin içeriğini konu alalım. Ama öncelikle daha önce konu hakkında bahsettiğim yazıda dediğim gibi jquery.js standart dosyasını, JQuery kütüphanesini kullanmadan önce çekmiş olmanız gerekir.
Öncelikle kodlarımızı şöyle bir ayarlayalım:
<script src="jquery.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[
function goster() { $("div#panel").show(100); } function gizle() { $("div#panel").hide(100); } function gostergizle() { $("div#panel").toggle(100); }
// ]]></script>
$("div#panel") JavaScript koduyla <div id="panel"> HTML kodunu CSS’te olduğu gibi belirledik. Show, hide, toggle kodları da yukarıda bahsettiğim işlevleri görürken, içerisindeki 100 değeri de açılış kapanış hızlarını belirtiyor.
Son olarak üç işlevli butonu ve gösterilip/gizlenecek içeriği aşağıdaki gibi ekrana basabilirsiniz.
<button onclick="goster()">Göster</button>
<button onclick="gizle()">Gizle</button>
<button onclick="gostergizle()">Göster/Gizle</button>
<div id="panel" style="background-color: #ff9999; height: 100px; width: 200px;">Burası içeriğimizin bulunduğu div objesi</div>
|
