jQuery ile CSS Değiştirme İşlemleri
Merhaba Arkadaşlar,
Bu makale de sizlere jQuery framework ‘ü aracılığı ile bir nesneye hover veya click yapıldığında belli başlı bir kaç CSS özelliğinin değişmesi konusunu anlatacağım. Bildiğimiz üzere Stil sayfaları içerisinde bir nesnenin :hover , :focus gibi işlemleri sonucunda background , width , height vb. değerlerini değiştirerek yeni bir görünüm kavuşturabiliyoruz. CSS ile yapılabilen işlemleri şimdi jQuery ile de yaparak göreceğiz. İşlemlerimize başlayalım..
İlk olarak bir klasör oluşturalım ve içerisine ” index.html ” isimli bir sayfa oluşturalım. Daha sonra da ” jQuery.Com ” içerisinden son sürüm jQuery kütüphanesini indiriyoruz. Bunun için anasayfa da beliren büyük ” Download ” butonuna tıklıyoruz ve açılan sayfayı ” Farklı Kaydet ” seçeneği açtığımız klasörün içerisine kaydediyoruz.
index sayfamız içerisine klasik HTML kod bloklarımızı ( jQuery kütüphanesini unutmadan ) oluşturuyoruz ve iki adet div ekliyoruz. Bu iki div ‘in birisinin içerisine ” Click ” ve diğerine de ” Hover ” yazıyoruz. Sanırım iki div oluşturmamızın sebebini anlamıştırsınız 🙂 .
<html>
<head>
<title>BilgiSayaci.Org - jQuery CSS işlemleri</title>
<script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="clickdiv">Click</div>
<div id="hoverdiv">Hover</div>
</body>
</html>
Ayrı bir sayfa oluşturmadan inline CSS yazarak her iki div ‘imizi de şekillendirelim. Her ikisine de width , height, text-align, background değerlerini atayalım. HTML ‘imizin görüntüsü şu şekilde olacaktır.
<html>
<head>
<title>BilgiSayaci.Org - jQuery CSS işlemleri</title>
<script src="jquery-1.8.3.min.js"></script>
<style>
#clickdiv{width: 200px; height: 200px; background: #16da24; text-align: center; color: #fff; font-size: 30px; margin-bottom: 30px;}
#hoverdiv{width: 200px; height: 200px; background: #a10e0e; text-align: center; color: #fff; font-size: 30px;}
</style>
</head>
<body>
<div id="clickdiv">Click</div>
<div id="hoverdiv">Hover</div>
</body>
</html>
Şimdi ise ana konumuz olan kısma geçiyoruz.tag ‘leri arasında kodlarımızı yazarak içerisinde ” Click ” yazılı olan div için tıklandığı anda background ve width değerlerini değiştireceğiz , içerisinde ” Hover ” yazılı olan div için ise üzerine gelindiği anda text color ve background değerlerini değiştireceğiz.
jQuery kodlarımızında yazıldığı HTML sayfamızın son hali şu şekilde olacaktır.
<html>
<head>
<title>BilgiSayaci.Org - jQuery CSS işlemleri</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
$('#clickdiv').click(function(){
$(this).css({background:'#169cda',width:'600px'},1000);
});
$('#hoverdiv').hover(function(){
$(this).css({'color':'#f1711b','background':'#0e0ea1'});
},function(){
$(this).css({'color':'#fff','background':'#a10e0e'});
});
});
</script>
<style>
#clickdiv{width: 200px; height: 200px; background: #16da24; text-align: center; color: #fff; font-size: 30px; margin-bottom: 30px;}
#hoverdiv{width: 200px; height: 200px; background: #a10e0e; text-align: center; color: #fff; font-size: 30px;}
</style>
</head>
<body>
<div id="clickdiv">Click</div>
<div id="hoverdiv">Hover</div>
</body>
</html>
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 31 No ‘lu Maddeden İndirebilirsiniz..
Sitede ki yeşil renge bayıldım, yazı için de teşekkürler