Bu yazımızda jQuery ile sitemizdeki sağ yada sol sütunu, tabloyu yada paneli nasıl gizle/göster yapabileceğimizle ilgili uygulama hazırladım. Çalışma mantığı, daha önce anlattığım (jQuery İle “Tab” Uygulaması Geliştirmek) yazısındaki uygulama ve çalışma mantığıyla neredeyse aynıdır. Tek farkı! Bu uygulamada animasyonun daha fazla olması. Çalışan örneği için BU bağlantıya bakabilirsiniz.
Şimdi öncelikle site içeriklerini Ana Tablo içine aldım;
|
|
| <div class="ana-tablo">
| | ...
| | </div> |
|
Ana Tablo için eklediğim stil;
|
|
| .ana-tablo { overflow:hidden; position:relative; padding-bottom:10px; } |
|
Şimdide sırayla içerikleri doldurmaya başlıyorum. Öncelikle
Gizle/
Göster butonlarını ekledim;
|
|
| <div class="gizle">»</div>
| | <div class="goster">«</div></code> |
|
Gizle/
Göster butonları için eklediğim stil;
|
|
| .gizle, .goster { font-size:25px; position:absolute; top:0; right:10px; background:#000; color:#fff; padding:5px 5px 8px 5px; line-height:0.2em; cursor:pointer; overflow:hidden; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:5px; -webkit-border-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ } |
|
Tabii bu bölümde de atlamamak lazım! Kullanıcılarımıza sadece "
Gizle" butonu gösterileceğinden, "
Göster" butonunu stille ekstra olarak gizledim;
|
|
| .goster { display:none; } |
|
Ardından
Sağ Sütunu ekledim;
|
|
| <div class="sag-sutun">
| | <div>...</div>
| | <div>...</div>
| | </div> |
|
Sağ Sütun için eklediğim stil;
|
|
| .sag-sutun { width:220px; float:right; overflow:hidden; padding-right:10px; margin-right:40px; }
| | .sag-sutun div { width:200px; padding:10px; margin-bottom:10px; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ } |
|
ve son olarak da
Sol Sütunu ekledim;
|
|
| <div class="sol-sutun">
| | ...
| | </div> |
|
Sol Sütun için eklediğim stil;
|
|
| .sol-sutun { margin-right:280px; padding:10px; background:#fefee0; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ } |
|
Sayfa için kullanacağımız
XHTML kodları burada bitiyor. Buradan sonrasında jQuery ile yazacağımız fonksiyonlar çalışacak.
jQuery kodlarını vermeden önce hazırladığım fonksiyonların ne işe yaradığından bahsetmek istiyorum. Öncelikle ilk fonksiyonumuz, "
Gizle" butonu tıklanınca "
Sağ Sütun" ve "
Gizle" buttonu kaybolacak, kaybolan sütun yerine "
Sol Sütun"'u genişletecek, genişleyecek ama bir yandan da sağdan "
Göster" butonu kadar boşluk bırakacak. İkinci fonksiyonumuzda ise "
Göster" butonu tıklanınca "
Gizle" butonu kaybolacak, "
Sol Sütun" belirttiğimiz ölçüde tekrar daraltılacak, "
Sağ Sütun" ve "
Gizle Butonu" gösterilecek, gösterilecek ama "
Sağ Sütun"'un sağına "
Gizle" butonun sığıcağı kadar boşluk ekleyecek. Aman dikkat!!! Anlattıklarımdan kafanız karışmasın. Sadece anlattıklarımı hayal edip, "- tabi ya! böle yapınca bu olucak, şöle yapınca şu olucak." gibisinden düşünebilirsiniz...
Neyse, yukarıda anlattıklarım hayal ürünü olmaktan çıkıp, kodsal olarak bu şekli alıyor;
|
|
| $(document).ready(function(){
| | $(".gizle").click(function(){
| | $(".gizle").animate({opacity:0}, 250).hide("slow");
| | $(".goster").animate({opacity:1}, 250).show("normal");
| | $(".sag-sutun").animate({marginRight:"-220px", opacity:0}, 250);
| | $(".sol-sutun").animate({marginRight:"40px"}, 250);
| | });
| | $(".goster").click(function(){
| | $(".gizle").animate({opacity:1}, 250).show("normal");
| | $(".goster").animate({opacity:0}, 250).hide("slow");
| | $(".sag-sutun").animate({marginRight:"30px", opacity:1}, 250 );
| | $(".sol-sutun").animate({marginRight:"270px"}, 250);
| | });
| | }); |
|
Herşeyi bu şekilde yaptıktan sonra, aşağıdaki gibi kodlara sahip olucaktınız;
| 1 | | 2 | | 3 | | 4 | | 5 | | 6 | | 7 | | 8 | | 9 | | 10 | | 11 | | 12 | | 13 | | 14 | | 15 | | 16 | | 17 | | 18 | | 19 | | 20 | | 21 | | 22 | | 23 | | 24 | | 25 | | 26 | | 27 | | 28 | | 29 | | 30 | | 31 | | 32 | | 33 | | 34 | | 35 | | 36 | | 37 | | 38 | | 39 | | 40 | | 41 | | 42 | | 43 |
|
| <!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" />
| | <title>jQuery İle "Gizle/Göster" Sütun ve Tablo Yapımı</title>
| | <script src="jquery-1.4.min.js" type="text/javascript"></script>
| | <script type="text/javascript">
| | $(document).ready(function(){
| | $(".gizle").click(function(){
| | $(".gizle").animate({opacity:0}, 250).hide("slow");
| | $(".goster").animate({opacity:1}, 250).show("normal");
| | $(".sag-sutun").animate({marginRight:"-220px", opacity:0}, 250);
| | $(".sol-sutun").animate({marginRight:"40px"}, 250);
| | });
| | $(".goster").click(function(){
| | $(".gizle").animate({opacity:1}, 250).show("normal");
| | $(".goster").animate({opacity:0}, 250).hide("slow");
| | $(".sag-sutun").animate({marginRight:"30px", opacity:1}, 250 );
| | $(".sol-sutun").animate({marginRight:"270px"}, 250);
| | });
| | });
| | </script>
| | <style type="text/css">
| | .ana-tablo { overflow:hidden; position:relative; padding-bottom:10px; }
| | .sag-sutun { width:220px; float:right; overflow:hidden; padding-right:10px; margin-right:30px; }
| | .sag-sutun div { width:200px; padding:10px; margin-bottom:10px; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
| | .sol-sutun { margin-right:270px; padding:10px; background:#fefee0; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
| | .gizle, .goster { font-size:25px; position:absolute; top:0; right:10px; background:#000; color:#fff; padding:5px 5px 8px 5px; line-height:0.2em; cursor:pointer; overflow:hidden; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:5px; -webkit-border-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
| | .goster { display:none; }
| | </style>
| | </head>
| | <body>
| | <div class="ana-tablo">
| | <div class="gizle">»</div>
| | <div class="goster">«</div>
| | <div class="sag-sutun">
| | <div>...</div>
| | <div>...</div>
| | </div>
| | <div class="sol-sutun">...</div>
| | </div>
| | </body>
| | </ html> |
|