jquery cookie açılır/kapanır panel uygulaması
Posted Ağustos 25, 2009 
Comments(3)
Comments(3) Aslında basit bir işlem. Blog postu olur mu olmaz mı kararsız kaldım. Ama sonuçta işine yarayacak birileri mutlaka çıkar.
Amaç şu: kullanıcı paneli açan linke tıkladığında panel açılacak. Sayfa refresh olduğunda panel tekrar açık gelecek. Kapatılıp tekrar refresh yapıldığında sayfa bu sefer kapalı gelecek.
jquery'nin şu anki son sürümünü ve cookie pluginini yüklediğimiz, ayrıca açma kapama işlemini gerçekleştirecek javascript kodları ve html kodları bu sayfada bulunmaktadır.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
/*bu kodlar sayfa ilk yüklendiğinde çalışacak kısımdır. */
$(document).ready(function(){
/*eger panel_durum isimli cookie'nin degeri 'acik' ise sayfa yuklendiğinde panel açık olacaktır*/
if($.cookie('panel_durum')=='acik') {
$('#arama').show();
} else {
$('#arama').hide();
}
/*
arama_alani_toggle id'li linke tıklandığında arama id'li alanın durumu acik ise kapanacak kapali ise acilacaktır
set_cookie fonksiyonu ile de panel_durum isimli cookie acik veye kapali değere setlenecektir
*/
$("#arama_alani_toggle").click(function() {
if($('#arama').css("display") == "none") {
$('#arama').show('slow');
set_cookie('acik')
} else {
$('#arama').hide('slow');
set_cookie('kapali')
}
});
});
/*
set_cookie fonksiyonu ise panelin durumuna göre acik veya kapali degerlerini alacaktır.
bu cookie değişkeni sayfa refresh olduğunda sayfanın en başında kontrol edilerek
panelin açık veya kapalı olmasını sağlayacaktır
*/
function set_cookie(value) {
var options = { path: '/', expires: 10 };
$.cookie('panel_durum', value, options);
return false;
}
</script>
</head>
<body>
<!-- arama alanını açıp kapayaı sağlayan link -->
<a href='#' id='arama_alani_toggle'>Arama Alanı</a>
<!-- bu kısım arama id'li arama alanıdır. ilk başta kapalı durumdadır. -->
<div id="arama" style="display:none;">
<form action="#" method="post">
<table width="100%" cellpadding="4" cellspacing="4">
<tr>
<td>Adı</td>
<td><input type="text" name="adi" /></td>
</tr>
<tr>
<td>Soyadı</td>
<td><input type="text" name="soyadi" /></td>
</tr>
<tr>
<td colspan='2'><input type="submit" name="Ara" value="ara" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Umarım işinize yarar. Kolay gelsin.
Teşekkürler üstad.
Dostum hiç fena değil. tam mantığını anlatmışsın teşekkürler. Bilmeyen için gerçekten iyi kaynak.
Farklı dizinlerdeki dosyalarda ayrı cookie saklıyor sanki ana sayfada kapatmışsam bir alt düzündeki video sayfasına gelincede kapalı olması gerekmezmi. Yoksa benmi beceremedim