 |
jQuery İle Gizle/Göster Sütun ve Tablo Yapımı
|
 |
#3473 |
|
Kaan
User is:
  Posts: 2772
Ülke:
 İstanbul - 34Meslek: Serbest Meslek
Age: 43
|
jQuery ?le "Gizle/G?ster" S?tun ve Tablo Yap?m?
jQuery ile sitemizdeki sa? yada sol s?tunu, tabloyu yada paneli nas?l gizle/g?ster yapabilece?imizle ilgili uygulama ?imdi ?ncelikle site i?eriklerini Ana Tablo i?ine ald?k; Kod: <div class="ana-tablo"> ... </div> Ana Tablo i?in ekledi?imiz stil; : ss].ana-tablo { overflow:hidden; position:relative; padding-bottom:10px; } ?imdide s?rayla i?erikleri doldurmaya ba?l?yoruz. ?ncelikle Gizle/G?ster butonlar?n? ekledik; Kod: <div class="gizle">?</div> <div class="goster">?</div> Gizle/G?ster butonlar? i?in ekledi?imiz stil; : ss].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  ointer; 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!!!..*/ }"G?ster" butonunu stille ekstra olarak gizledik; : ss].goster { display  ne; }Ard?ndan Sa? S?tunu ekledik; Kod: <div class="sag-sutun"> <div>...</div> <div>...</div> </div> Sa? S?tun i?in ekledi?im stil; : ss].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 ekledik; Kod: <div class="sol-sutun"> ... </div> Sol S?tun i?in ekledi?im stil; : ss].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 kodlar?n fonksiyonlar? ?al?cak. jQuery kodlar?n? vermeden ?nce haz?rlad???m fonksiyonlar?n ne i?e yarad???ndan bahsedelim. ?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. kodsal olarak bu ?ekli al?yor; : s]$(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; Kod: <!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> NOT: ?l??lendirmelerde "10px"'lik g?lge paylar? vard?r. D?PNOT: ?l??ler ve sa?/sol konum de?i?tirilebilir. Uygulamay? ?ndir: http://www.box.net/shared/nt8pjluoe6 DEMO: http://www.m2-stil.com/wp-conten.....o-yapimi/ |
Emlak, Oto Galeri, Rent A Car, ?iir, Edebiyat Script Sipari?lerinizi Verebilirsiniz. Detaylar ??in: kaan@ntka.org Seditio 170 ?ndir Capte M?zik ?ndir Seditio Toolbar ?ndir |
 |
 |
