Bu yazımızda, jQuery "css sınıf" (class) özelliklerine devam edip biraz daha kapsamlı bir uygulama yapacağız.
Konu ile ilgili ilk açıklamalar için daha önceki dersimizi inceleyebilirsiniz.
CSS Fonksiyonları:
- .css() //Nesnenin sahip olduğu stil(style) özellikleri öğrenilebilir ve değiştirilebilir.
- .addClass(class) //Bir nesneye css sınıf (class) eklemeyi sağlar.
- .hasClass(class) //Bir nesnenin belirtilen css sınıfa (class) sahip olup olmadığını kontrol eder (true, false).
- .removeClass() //Bir nesneden belirtilen css sınıfını (class) kaldırır.
- .toggleClass(class) //Bir nesneye ilgili sınıfı ekler ve kaldırır.
Uygulama:
Genellikle e-ticaret sitelerinde rastladığımız, ürünün üzerine gelindiğinde oluşan bir efekt ile alt tarafta ürün fiyatının ve linkinin gösterildiği bir uygulama yapalım.
Not: sınıflar içerisinde "box-shadow" özelliği vardır, bu özellik "CSS3" özelliklerindendir, IE9 öncesi IE tarayıcıları bu özelliği desteklemez, diğer modern tarayıcılar destekler (Önerimiz: Mozilla Firefox, Chrome, Comodo, Safari vb.)
Aşağıdaki ürün resimlerinin üzerine geldiğinizde, css özellikleri ile bir efekt oluşturulmakta, ve fiyat kısmı görünür hale getirilmektedir.
CSS yapısı:
#areaProduct{
position:relative;
border:1px dashed #ff0000;
width:540px;
height:160px;
padding:5px;
margin-bottom:14px;
clear:both;
}
.proWrap{
padding:10px 5px 10px 5px;
background:#eeeeee;
border:1px solid #ccc;
width:130px;
margin-left:20px;
text-align:center;
float:left;
cursor:pointer;
border-radius:4px;
}
.proPrice{
border:1px solid #dddddd;
margin-top:10px;
font-family:tahoma;
font-size:11px;
}
.proDetail{
display:none;
}
.classShadow{
border-color: #999999;
-moz-box-shadow: 0px 0px 4px 2px #ccc;
-webkit-box-shadow: 0px 0px 4px 2px #ccc;
box-shadow: 0px 0px 4px 2px #ccc;
border-radius:4px;
}
HTML yapısı:
<div id="areaProduct">
<div class="proWrap">
<div class="proImg"><img src="macbook.jpg" width="120" height="66" alt="" title=""/></div>
<div class="proTitle">Macbook</div>
<div class="proDetail">
<div class="proPrice">Fiyat:2000TL </div>
<div class="proLink"><a href="#">Detaylar</a></div>
</div>
</div>
<div class="proWrap">
<div class="proImg"><img src="macbook.jpg" width="120" height="66" alt="" title=""/></div>
<div class="proTitle">Macbook</div>
<div class="proDetail">
<div class="proPrice">Fiyat:2000TL </div>
<div class="proLink"><a href="#">Detaylar</a></div>
</div>
</div>
<div class="proWrap">
<div class="proImg"><img src="macbook.jpg" width="120" height="66" alt="" title=""/></div>
<div class="proTitle">Macbook</div>
<div class="proDetail">
<div class="proPrice">Fiyat:2000TL </div>
<div class="proLink"><a href="#">Detaylar</a></div>
</div>
</div>
</div>
JQuery yapısı:
<script type="text/javascript">
$(document).ready(function(){
$('.proWrap').on({
mouseenter:function(){
$(this).children(".proDetail").stop().show(300);
$(this).addClass("classShadow");
},
mouseleave:function(){
$(this).children(".proDetail").stop().hide(200);
$(this).removeClass("classShadow");
}
});
});
</script>
Açıklamalar:
- 3. .proWrap sınıf ile tanımladığımız alana girildiğinde ve çıkıldığında oluşacak olaylar için ".on()" sistemiyle olay tetikleme yapımızı oluşturuyoruz (ÖNEMLİ: ".on()" yapısı, jQuery 1.7sürümünde eklenmiş bir özelliktir, daha önce bu tip işler için kullanılan, ".bind()", ".delagate()", ".live()" gibi yapıların yerine, hepsinin özelliklerini içeren bir sistem olarak eklenmiştir. Detaylar için buraya bakabilirsiniz.) .
- 4. "mouseenter" olayıyla, ilgili alana giriş yapılma durumunu kontrol edip, giriş yapıldığında ilgili alanın çocuk (children) bağı olan "proDetail" sınıflı alanı görünür hale getiriyoruz, ve ".proWrap" sınıflı alanımıza (ebeveyn-parent sınıf) "classShadow" sınıfını ekliyoruz. (ÖNEMLİ: bu alanı getirirken ilk önce "stop()" ile animasyonu durdurduk, diğer türlü, üzerinden hızlıca birkaç defa geçildiğinde, üzerinden geçildiği sayı kadar, alan açılıp kapanmaya devam edecekti).
- 8. "mouseleave" olayıyla da ilgili alandan çıkış yapıldığında, ilgili alanın çocuk (children) bağı olan "proDetail" sınıflı alanı gizliyoruz, ve ".proWrap" sınıflı alanımızdan (ebeveyn-parent sınıf) "classShadow" sınıfını kaldırıyoruz. (ÖNEMLİ: bu alan gizlenirken de önce "stop()" ile animasyonu durdurduk, diğer türlü, yukarda bahsettiğimiz konu burda da gerçekleşecekti).
Kolay gelsin, görüşmek üzere...
