Kategori arşivi: JQUERY
Jquery ile Saydamlık(Opacity) Kullanarak Menü Hazırlama
Bu yazımda Jquery kullanarak hazırladığım bir menü örneğini sizlere tanıtacağım. Birçok sitede kullanılan bu örneği Jquery ile hazırladım ve elementlerin saydamlıklarıyla oynayarak efektif bir menü yapmaya çalıştım. Sonuçta yaptığım örnek Flash veya Silverlight ile hazırlanan örnekleri andırıyor. Ayrıca jquery kodlamalarımız ile oynayarak örneğimizi daha efektif daha görsel hale getirebiliriz. Sonuçta güzel ve kullanılabilir bir menü sisteminin oluştuğunu düşünüyorum. Şimdi kodlarımıza ve örneğimize göz atalım.
Örneği hazırlarken kullandığım html kodlar ve bu kodlara göre yazdığım Jquery kodlarım şöyle:
// Html kodlar
<div id="menu">
<a href="#">Anasayfa</a>
<a href="#">Deneme 1</a>
<a href="#">Deneme 2</a>
<a href="#">Deneme 3</a>
<a href="#">Deneme 4</a>
</div>
// Jquery kodlarımız
$(function() {
$("#menu a").hover(function() {
$(this).stop().animate({ /* stop() kontrolü*/
"opacity": "0.3"
}, 500 /*süre*/);
}, function() {
$(this).animate({
"opacity": "1"
}, 1000 /*süre*/);
});
});
Görüldüğü gibi Jquery içinde yer alan hover fonksiyonu sayesinde istediğimiz elementin veya elementlerin mouseover ve mouseout eventlarını kontrol ediyoruz. Kodlarda ve örnekte en önemli nokta saydamlık değiştirme süreleri ve bunu kontrol eden stop() fonksiyonu. Bu fonksiyon ile saydamlık değişme süreci başlamış olan bir elementin saydamlık değiştirme olayı süre bitmeden tekrarlandığında bir önceki süreci sonlandırıyoruz ve yeni süreç işliyor. Bu işlem görselliğin daha iyi olmasını ve görselliğin Flash ve Silverlight örneklerine benzemesini sağlıyor. Daha iyi anlamak için bu fonksiyonu örnekten kaldırarak deneyebilirsiniz.
Hazırladığım örneği buradan görebilir, buradan da dosyaları indirebilirsiniz.
Örnekte menüleri renklendirmek yerine arka plan için resim kullandım. Bu tür örneklerde genellikle resim tercih ediliyor. Saydamlık değiştirme esnasında renklerin değiştirilmesi pek tercih edilmiyor. Ancak yine de yapılabilir bir yöntem. Ben ise örneğimde bir adet resim kullandım. Ayrıca örneği hem yatay menü hem de dikey menü olarak hazırladım.
jQuery Ajax ile Dropdown Etkileşimleri (Eklenti ile)
Bu yazımda jQuery Ajax işlemlerinde Dropdown elementleri arasında etkileşim sağlayan eklentimi paylaşacağım. Son dönemde bu konuda oldukça soru oldu. Bu sorulara ve isteklere cevap verebilmek adına kullandığım eklentiyi paylaşacağım. Bu eklenti ile bir dropdown elementini kontrol ediyoruz. Kontrol edilen dropdown üzerinde bir seçim yapıldığında Ajax ile seçilen değere göre ilişkili veriler alınıp, diğer bir dropdown elementine aktarılıyor. Bunun en çok kullanıldığı durum ise şehirlere ait ilçelerin alınmasıdır. Şimdi eklentiyi nasıl kullanacağımıza ve örneğimize göz atalım.
Öncelikle hazırladığım jQuery eklentsini buradan görebilirsiniz. Eklentinin adı DropIslem‘dir. Eklentinin mutlaka alması gereken 2 parametresi vardır. Biri Ajax isteğinde bulunulacak ve seçilen değerle ilişkili verileri getirecek olan adres (url) parametresi ve Ajax isteği sonucu verileri alacak olan elementin id değerini belirten hedef parametresidir. Bunları öğrendikten sonra eklentimizi aşağıdaki gibi kullanabiliriz.
$(function() {
$("#Sehirler").DropIslem({
adres: "Default.aspx/Ilceler",
hedef: "#Ilceler"
});
});
Bu şekilde eklentimizi kullanabiliyor, dropdown elementleri arasında etkileşim sağlayabiliyoruz. Ayrıca eklenti içinde Webmethod ile alınan ilişkili verilerin iki değeri söz konusudur. Biri degerisimli dropdown elementine eklenen option elementinin value özelliğine atanırken, diğeri metinisimli değer ise option elementinin text özelliğine atanmaktadır. Buradaki deger ve metindeğerlerini Webmethod ile gelen Json tipindeki verilerin içerdiği özelliklere göre değiştirebiliriz.
Örneği çalışır halde buradan görebilir, buradan da indirebilirsiniz.
Ayrıca örnek içerisinde C# 3.0 ile gelen Generic Class olan List yapısını kullandım ve ilişkili verileri çekerken de Linq sorgusu yazdım. Bu bakımdan bu konularda örnek arayanlar için de faydalı olacaktır.
İyi çalışmalar.
JQuery ile Site Açılışında Resim Gösterme
Aşağıdaki linkten dosyaları indirip sitenize yükleyin ve daha sonra alttaki kodu head tagları arasında olacak şekilde yapıştırın.Son olarak image_small.jpg yerine sitenizin açılışına koymak istediğiniz resmin linkini yerleştirin.
<link rel="stylesheet" href="js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="all"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="js/fancybox/jquery.fancybox-1.3.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$.fancybox(
'<img src="image_small.jpg"/>', {
'autoDimensions' : false,
'width' : '420',
'height' : '470',
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);
});
</script>
JQuery ile Div Üstüne Gelince Başka Bir Div Açma
Adresinden JQuery UI kütüphanesini indiriyoruz ve projemizin içindeki scripts klasörü altına atıyoruz
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title>
<style type=”text/css”>
#outer
{
width:200px;
height:200px;
background-color:Aqua;
}
#ustmenu
{
width:200px;
height:200px;
background-color:Maroon;
}
</style>
<script src=”Scripts/jquery-1.7.2.js” type=”text/javascript”></script>
<script src=”Scripts/jquery-1.7.2.min.js” type=”text/javascript”></script>
<script src=”Scripts/jquery-ui-1.8.20.custom.min.js” type=”text/javascript”></script>
<script language=”javascript” type=”text/javascript”>
$(document).ready(function () {
$(“#ustmenu”).dialog({
autoOpen: false,
show: “blind”,
hide: “explode”
});
$(“#outer”).mouseover(function () {
$(“#ustmenu”).dialog(“open”);
return false;
});
$(“#outer”).mouseout(function () {
$(“#ustmenu”).dialog(“close”);
return false;
});
});
</script>
</head>
<body>
<div id=”ustmenu”>merhaba</div>
<div id=”outer”>
emrah kahraman
</div>
</body>
</html>
Murat Kale 