En basit ve sorunsuz şekli ile açılır bir menü hazırlıyacağız. Sadece CSS ve HTML ile oluşturacağımız bu menünün en güzel tarafı tüm tarayıcılarda sorunsuz bir şekilde çalışacak olması. Hemde bunları yaparken hiç javascript kullanmayacağız :). Bir ay kadar önce internette bir örneğine rastlamıştım. Şirket içi Proje için basit bir menüye ihtiyacım olunca bu yöntem geldi aklıma.

Öncelikle menümüzün HTML kısmını hazırlayalım.

Menümüzde önemli nokta, iç içe geçmiş <ul> etikleri. Önce yatay bir menü hazırlıyoruz.

<ul id="menu">
	<li><a href="#">Anasayfa</a></li>
	<li> <a href="#">Madde 1</a></li>
	<li> <a href="#">Madde 2</a></li>
</ul>

Anasayfa’nın altında herhangi bir link olmayacağı için Madde 1 ile açılır menümüzü hazırlamaya baÅŸlıyoruz.
<li> etiketi altına bir tane
<ul> etiketi açıyoruz. Bu etiket içerisine açılacak menüyü yerleÅŸtireceÄŸiz. Åžimdi Madde 1′in altında açılacak olan menümüzün kodlarını yazalım.

	<li> <a href="#">Madde 1</a>
<ul>
	<li><a href="#">Madde 1-1</a></li>
	<li><a href="#">Madde 1-2</a></li>
</ul>
</li>

Peki bu menü nasıl açılacak? Bu açılma ve tekrar kapanma iÅŸlemlerini CSS ile yapacağız. ID’si “menu” olan ul etikenine ait li etiketlerinin içerisinde yer alan ul etiketlerinin varsayılan(default) display deÄŸerini “none” olarak belirliyoruz. Tek cümlede anlatınca biraz karışık olduÄŸunu biliyorum o yüzden bir çizim ile bunu anlatarak pekiÅŸtirelim.

Bu grafiğe ait olan CSS kodlarını yazalım. Yukarıdada belirttiğim gibi <li> içindeki etiketinin değerini atayacağız.

ul#menu li ul{
display:none;
border:solid 1px #ccd6e5;
padding:0px;
margin-left:-10px;
padding-bottom:5px;
}

Yukarıda stil olarak vermiÅŸ olduÄŸumuz kodları geçersek ilk sırada yer alan “display:none;” koldarı bizim iÅŸimizi gören kısım. Åžimdi en iÅŸlevsel kısıma geldik. Bu alt menümüz ne zaman açılacak. Genel olarak “<a” etiketlerinde kullanılan “hover” özelliÄŸini kullanacağız. Yani “li:hover” da altındaki “ul” etiketinin display özelliÄŸini “block” yapacaz.

Şimdi CSS kodlarını yazalım :

ul#menu li:hover ul{
display:block;
position:absolute;
width:150px;
background:#fff;
}

Kodlarımızın örneğini görmek için buraya, tüm kodlara ulaşmak için buraya tıklayınız.

Share

Çok geçte olsada jQuery’i temelden ve elimden geldiÄŸi kadar anlatmaya karar verdim.(EÄŸer “jQuery ne” diye bir soru oluÅŸtu ise aklınızda erhan burhan‘ın sitesindeki güzel yazısını tavsiye ederim)

Sanırım sadece yazı değil, yanında videolar ile anlatımlarımda olacak.

jQuery dökümanları ile paralel olarak yazmaya çalısacağım ancak içerisinde atlayacağım alanlar olacak. Orta hatta ortanın üstü bir jQuery bilgisine sahip olmanızı saÄŸlayana kadar yazmaya çalışacağım. Bu baÄŸlamda ilk yazımız jQuery’nin en güzel özelliklerinden olan each olacak.

each :

Temelde olsa yazılım bilginiz var ise zaten bu özelliÄŸin ne iÅŸe yaradığını çoktan anlamışsınızdır. Foreach’in jQuery versiyonuda diyebiliriz.

Peki ne iÅŸ yapar bu each?

Belirlediğiniz seçicilerden oluşan bir dizideki elemanların içerisinde teker teker dönmemizi sağlar. Örnekleyerek devam edersek sanırım daha rahat anlaşılabilir.

Bir sayfamız var, içerisindeki tüm inputları seçeceğiz ve each ile bunların kenar çizgilerini kırmızı yapacağız.

Seçici Kodlar :

    function sec(){
        $('input').each(function(){
	        this.style.border = "solid 1px #cc0000";
        });
    }

Sayfanın örneğine buradan ulaşabilirsiniz.

Ä°yide bunu zaten daha kısa bir kod ile yapabiliriz neden bu yolu seçtik ÅŸeklinde sorabilirsiniz. Bu örnek için aslında each’i kullanmanın bir anlamı yok. Bu örnekte each ile tüm öğeleri seçebildiÄŸimizi görmüş olduk. EÄŸer sayfadaki “seç” butonuna tıklarsanız kendiside dahil tüm inputları seçtiÄŸini göreceksiniz. Each’in bize yararını anlamak için bir sonraki örneÄŸimize geçelim.

Bu örneğimizdeki inputlarımızın 3 farklı yazı rengi bulunmaktadır. Biz bunlardan siyah olanlarının mavi olmasını istiyoruz. Bunun için tüm inputları öncelikle each ile bir diziye alacağız ve daha sonrada yazı renklerini kontrol edip siyah olanları mavi yapacağız.

Seçici Kodlar :

    function sec(){
        $('input').each(function(){
            var yaziRengi = this.style.color; //yazi rengini alıyoruz
            if(yaziRengi == "black"){ //yazı rengi siyahmı kontrol ediyoruz
	            this.style.color = "blue"; //siyah olanları mavi olarak atıyoruz
            }
        });
    }

Sayfanın örneğine buradan ulaşabilirsiniz.

Bu örnek ile aklınızda birşeylerin oluştuğuna inanıyorum.

Each’i amacına uygun nasıl kullanacağımıza geldik. Bir formumuz olduÄŸunu düşünelim ve biz bu formda hiçbir alanın boÅŸ bırakılmamasını istiyoruz. Form submit edildiÄŸinde boÅŸ alan varmı yokmu kontrol edelim. EÄŸer boÅŸ alanlar var ise kenarlık ve arkaplan renklerini deÄŸiÅŸtirelim.

Seçici Kodlar :

function sec(){
    $('input').each(function(){ //tüm inputları bir diziye atıyoruz

    //inputun değerini alıyoruz ve değerdeki boşluları siliyoruz
    //burada boÅŸluk silmemiz normal deÄŸeri etkilemeyeceÄŸi gibi
    //gibi boş veri kontrolünü sağlayacaktır.
	if(this.type=="text"){//tipi text olan inputları seçiyoruz
        var inputValue = this.value.replace(" ","");

            if(inputValue == ""){//eÄŸer deÄŸer boÅŸ ise
                $(this).css({"border":"solid 1px #c00","background-color":"#c00","color":"#fff"});
            //üzerinde işlem yaptığımız inputun stilini değiştiriyoruz.
            }
            else //eğer veri boş değil ise daha önceden kontrolde boş gelme ihtimaline karşın
            //input'un ÅŸeklini eski hale getiriyoruz.
            {
                $(this).css({"border":"solid 1px #000","background-color":"#fff","color":"#000"});
            }
        });
    }
}

Sayfanın örneğine buradan ulaşabilirsiniz.

Yukarıdaki örnekleri jQuery’nin seçicileri ile daha kısa bir ÅŸekilde yapmamızda mümkün ancak konumuz each olduÄŸu için uzunda olsa biz bu yolu tercih ettik. Çünkü seçiciler sayesinde elde edemeyeceÄŸimiz veriler aracılığı ile çok daha etkili çözümler üretebileceÄŸimizi ileride göreceksiniz.

Yukarıda çok kısa bir şekilde yaptığımız işlemleri jQuerysiz yapsak emin olun çok daha uzun sürecekti.

Sorularınız için sağdaki iletişimin altındaki soru sor ile bana iletebilirsiniz.

Share

Jquery ile bir çok validation (doÄŸrulama) plugin’i bulmamız mümkün. Ancak küçük ve orta boyutlu projelerde kendimize has ve daha küçük boyutlu doÄŸrulama ihtiyaçlarımız doÄŸabilir. Kendi yazdığımız kodlar her zaman için daha rahat kontrol altında tutulabilir diye düşünüyorum.

Jquery ile bir formda yer alan input elemanlarından “type=text” yani tipi yazı olanları kapsayan bir script yazalım. DoÄŸrulama esnasında ihtiyacımız olan 3 ÅŸey ;

• O elemanın boÅŸ olup olamayacağı
• BoÅŸ deÄŸil ise kaç karakterden az olamayacağı
• ÖzelleÅŸtirilmiÅŸ hata mesajı

Oluşturduğumuz standart inputlarda bu alanlar tabii ki yer almamaktadır. Biz kendimiz oluşturmalı yada var olan attributeleri(özellikleri) kendimize göre kullanmalıyız.

Ben elemanın value(değer) kontrolü için required(gerekli) diye bir özellik eklemeyi tercih ettim. En az kaç karakter olacağını ise rel özelliğinden belirleyeceğim.Özelleştirilmiş hata mesajı için ise hata özelliğini kullanacağız.

Örnek input kodumuz :

HTML tarafında yapmamız gerekenler bu kadar. Asıl konumuz olan js tarafında ise jQuery ile hiç zorlanmadan fonksiyonlarımızı yazabileceğiz. 3 farklı fonksiyon yazmamız gerekecek.

1. Value kontrol işlemleri için
2. Hata mesajı göstermek için
3. Hata mesajını ekrandan silmek için

1. Fonksiyonumuz : inputValueKontrol

Kısaca yapacaklarımızı anlatmak gerekirse : Öncelikle tüm inputları foreach ile döngü içerisine alarak kontrol ediyoruz. Required değeri 1 olanların valuelarına bakıyoruz. Eğer value uzunluğu (length) rel değerinden az ise bir hata mesajı çağırıyoruz yoksa işleme devam ediyoruz.

Kodlarımızı kısaca açıklayalım. İlk fonksiyonumuz olan inputValueKontrol ile başlayalım.

$(’input’).each(fucntion(){}); ile tüm inputları bir diziye atadıktan sonra bir döngü içerisinde tek tek inceleyeceÄŸiz.
Döngümüz başladıktan sonra incelemekte olduğumz inputun required özelliğinin 1 olup olmadığını kontrol ediyoruz. Peki bir inputun özelliklerini nasıl alırız :

$(this).attr(”required”) ÅŸeklinde, bulunduÄŸumuz input’un attributelarından(özelliklerinden) istediÄŸimize ulaÅŸabiliriz.

if($(this).attr(”required”)==”1″) satırı ile validation’a açık olan inputları seçiyoruz.

var tur = $(this).attr(”rel”);
var hata = $(this).attr(”hata”); Burada tur istenilen verinin uzunluÄŸunu hata ise istenilen veri uzunluÄŸuna eriÅŸilmediÄŸi zaman gösterilecek hatayı dönderecektir bize. EÄŸer hata mesajımız yok ise daha önceden belirlediÄŸimiz mesajı göstermesi için ÅŸu satırları ekleyelim :

if(!hata){hata = “Bu alanı boÅŸ bırakamazsınız”;}

Fonksiyonumuzun çalışmaya baÅŸladığı nokta input’un onblur event’ıdır.

$(this).blur(function(){});

Fonksiyonumuz baÅŸladığına göre gerekli kontrollerimize baÅŸlayabiliriz. Öncelikle tur deÄŸiÅŸkenimizin varlığına göre bir kontrol yapıyoruz ve required deÄŸeri 1 iken rel deÄŸeri 1′den büyük ve boÅŸ deÄŸilse yapılacakları belirlemek için ÅŸu satırları ekliyoruz :

if(tur>1 & tur != “”){}

Ä°stenilen deÄŸer 1′den büyük ve boÅŸ deÄŸilse deÄŸeri kontrol ediyoruz. EÄŸer deÄŸer uzunluÄŸu istenilen uzunluktan büyük deÄŸilse hata mesajını gösteriyoruz ve input’un kenarlıklarını ÅŸekillendiriyoruz.

var thisValue = $(this).val();
var thisValueLength = thisValue.length;
if(thisValueLength<tur){
$(this).css(”border”,”solid 1px #f00″);
hataMesaj(hata);
}else{
$(this).css(”border”,”1px solid #C0C0C0″);
hataMesajiSil();
}

EÄŸer deÄŸerler doÄŸru isede input’un kenarlıklarını eski haline çeviriyoruz ve mevcut olan hata mesajını siliyoruz.

Birde tur (yani rel) deÄŸerinin olmadığı durumlar var. Bu inputların deÄŸerinin boÅŸ olamayacağı anlamına geliyor. Aynı iÅŸlemleri rel’i 1 kabul ederek tekrar uyguluyoruz.

var thisValue = $(this).val();
var thisValueLength = thisValue.length;
if(thisValueLength==0){
$(this).css(”border”,”solid 1px #f00″);
hataMesaj(hata);
}else{
$(this).css(”border”,”1px solid #C0C0C0″);
hataMesajiSil();
}

Inputların değer kontrol işlemlerine ait kodların inputValueKontrol fonksiyonunda olduğunu söylemiştik. Bu fonksiyona ait kodlar aşağıdaki gibidir.

Åžimdi hata mesajlarını ekrana yazdıran fonksiyonumuz hataMesaj‘ı yazalım.Bu fonksiyonun mantığı çok basit. Tek parametre ile gösterilecek mesajı alıyoruz ve bunu bir div etiketinin içerisine ekledikten sonra sayfaya ekliyoruz. Ekstra olarak yaptığımız tek iÅŸlem bu div etiketinin sayfada ekli olup olmadığını kontrol etmek. EÄŸer daha önceden eklenilmiÅŸ bir etiket var ise sadece içeriÄŸini deÄŸiÅŸtiriyoruz ve en son hata mesjını ekliyoruz. En son olarakda bu mesajın 30 saniye sonra kendisini imha etmesini saÄŸlıyoruz

En son fonksiyonumuz ise ekrana yazdığımız hata mesajını kaldırma fonksiyonu. Bunu açıklamaya sanırım gerek yok.

Örnek uygulamaya buradan ulaşabilirsiniz.

Örneğimize ait kodlara buradan ulaşabilirsiniz.

Share

Åževket Bulamaz’a ait olan ben öğreniyorum‘da yer alan ve her zaman ulaşılması gereken bir arÅŸivi paylaÅŸmak istiyorum. Neredeyse yazılmış tüm CSS resetleri bir araya toplanmış durumda.Yazılacak çok birÅŸey yok aslında buyrun :

http://www.kodyapistir.com/show/09e66.aspx

Share

Bir önceki yazımda jQuery ile animasyona giriş yapmıştık. Bu yazı ile zincirleme ve etkileşimli animasyonlar hazırlayacağız.

Zincirleme derken neden bahsediyorum ;

Bir divimiz var ve biz bunu önce geniÅŸlemesini sonrada yüksekliÄŸinin deÄŸiÅŸmesini istiyoruz. Ä°ÅŸte burada jQuery’nin en sevdiÄŸim özelliklerinden birisi olan zincirleme devreye giriyor.

Önce javascript kodlarımızı yazalım :

HTML kodlarımız :

Örneğimize buradan ulaşabilirsiniz.

Zincirleme, sadece animasyonlar arasında bir hiyerarşi sağlamaktadır. Yani animateden sonra bir css kodu yazarsanız bu animasyon başladığı anda gerçekleşecektir.

Temel olarak anlatmamız gerekenleri bitirdiğimize göre örneklerimizi komplike hale getirelim.

4 tane resim içeren bir animasyon hazırlayalım. BaÅŸlangıçta hepsinin eni ve boyu eÅŸit görünecek. Normal boyutları farklı resimler seçecez ve tıkladığımız resim orjinal boyutuna gelecek. Öncelikle resimler için google’dan “cat” diye arama yapıp 4 tane resim seçeyim

Resimlerimizi yan yana sıralıyoruz ve basit bir css uyguluyoruz. CSS’imizin amacı, tüm resimleri aynı boyutlardaki divlerin içerisine yerleÅŸtirerek farklı boyutlardaki resimlerin görüntüyü bozmasını engelliyoruz.

Öncelikle HTML kodlarımızı yazalım :

CSS kodlarımız :

HTML ve CSS kodlarımızı tamamladığımıza göre jQuery kodlarımızı yazmaya başlayabiliriz.

Sayfamız yüklendiÄŸi zaman $(document).ready() ile tüm resimlerimizin orjinal boyutlarını alıp rel‘e atıyoruz. Tıklandığı zaman resmimizin boyutunu alabilmek için en kısa yöntem bence. Boyutları gerekli yere atadıktan sonra tüm resimlerimizin geniÅŸliÄŸini 100 yapıyoruz. Yükseklikte geniÅŸliÄŸe orantılı olarak otomatikmen deÄŸiÅŸiyor. Resimlerden herhangibirisine tıklandığı zaman yapılacak iÅŸlemleri belirliyoruz. AÅŸağıda zaten kodların içinde açıklamaları var ancak ben burada “each“den bahsetmek istiyorum ;

$(’div.resim>img’).each(function(){
$(this).attr(’rel’,$(this).width());
});
satırları ile class’ı resim olan divlerin içerisindeki tüm resimleri “each” yardımı ile tek tek dönüyoruz. Yani hazır bir array‘i yine hazır bir ÅŸekilde tek tek elemanlarına ayırıyoruz. Özellikle id ve class gibi seçivilerimizin olmadığı durumlarda bir üst seçiciye baÄŸlı olarak iÅŸlem yapmamızı kolaylaÅŸtırır(programcılar için çok tanıdıktır zaten). Bu kod satırlarındaki üst seçicimi “div.resim“.

En son olarak javascript kodlarımızı yazıyoruz :

Bu örneğimizede buradan ulaşabilirsiniz.

Share

jQuery’nin iÅŸimizi kolaylaÅŸtırdığı tartışılamaz. Ancak bize sunmuÅŸ olduÄŸu bazı imkanlar varki bunlar iÅŸimizi kolaylaÅŸtırmanın yanında iÅŸimizi zevkli kılıyor. Bunların başındada animate geliyor. Çok daha görsel sayfalar oluÅŸturabilmek çok daha kolay.

Animate jQuery’nin effect grubundan bir öğedir. Genel yazım ÅŸekli ;

.animate( params, [duration], [easing], [callback] );

params : animasyonumu belirleyen parametrelerden oluÅŸur.

duration : anismasyonun süresini belirlememizi saÄŸlar. AlabileceÄŸi deÄŸerler “slow” , “normal” , “fast” ve rakamsaldır. Bir saniye 1000 milisaniye kabul ediliyor.

easing : 2 deÄŸer alabilen özel bir efekttir. “swing(sallantı-sallanma)” ve “linear (çizgisel)” deÄŸerleri alır. Plug-in gerektirmektedir.

function : animasyonun sonunda meydana istediğiniz işlemleri çağırmanıza yarar.

Şimdi örnekler ile açıklamaya devam edebilim;

ilk örneğimizde sadece bir divin genişlik ve yüksekliğini değiştireceğiz. Kodlarımız aşağıdaki şekilde ;

//öncelikle sayfamızın yüklenmesi tamamlandığı zaman yine jQuery
//ile butonlarımızın onclick event'ine animasyonlarımızı atıyoruz
$(document).ready(function(){

$('#genislet').click(function(){
$('#aniDiv1').animate({
width:200,//burada div'in genişliğini 200px olarak atıyoruz
height:200//burada div'in yükseliğini 200px olarak atıyoruz
},250//animasyonumuzun hızını 250 milisaniye olarak ayarlıyoruz (yani 1/4 saniye)
);
});

$('#daralt').click(function(){
$('#aniDiv1').animate({
width:50,
height:50
},250);
});
});

Örneğimize buradan ulaşabilirsiniz.

İkinci örneğimizde az önceki divimizin yerini değiştirecelim. Tabii ki ilk önce kodlarımızı yazalım.

$("#sol").click(function(){
$("#Div3").animate({"left": "+=50px"}, "slow");
});

$("#sag").click(function(){
$("#Div3").animate({"left": "-=50px"}, "slow");
});

Bu örneÄŸimizde dikkatinizi çekmek istediÄŸim nokta “left”:”-=50px” satırlarındaki “-=” ve “+=”. Bu 3 karakter ile oluÅŸan 2 karakterlik katar bizi bir çok kodu yazmaktan kurtarıyor. Bu kodlar olmasa nasıl yazmamız gerekcekti ;

var left = $('#Div3').css('left');
left = left.replace('px','');
left += 50;
$("#Div3").animate({"left": left+"px"}, "slow");

Ä°ÅŸte jQuery’nin gücü

Örneğimize buradan ulaşabilirsiniz.

Şimdiki örneğimizde bir elementin şeffaflığı (opacity) ile oynuyoruz.

$('#btnOpacity0').click(function(){
$("#Div2").animate({opacity: 0}, "slow");
});
$('#btnOpacity05').click(function(){
$("#Div2").animate({opacity: 0.5}, "slow");
});
$('#btnOpacity1').click(function(){
$("#Div2").animate({opacity: 1}, "slow");
});

Örneğimize buradan ulaşabilirsiniz.

“opacity” bu örneÄŸimizdeki gibi sayısal deÄŸer (0 ile 1 arasında) alabildiÄŸi gibi “show(göster)” ve “hide(gizle)” deÄŸerlerinide alabilir. Ancak bu sefer yazım ÅŸeklimiz biraz deÄŸiÅŸiyor ;

$('#btnOpacity0').click(function(){
$("#Div2").animate({"opacity": "hide"}, "slow");
});
$('#btnOpacity1').click(function(){
$("#Div2").animate({"opacity": "show"}, "slow");
});

Åžimdiki örneÄŸimizde ise bir animasyon tamamlandıktan sonra fonksiyon çağıracağız. “Duration” dan sonra “function(){}” yazıyoruz ve normal bir javascript fonksiyonu gibi “{}” arasına istediÄŸimiz kodları yazıyoruz.

$("#Div4").css("opacity","0.5");
$('#btnCalistir').click(function(){

$("#Div4").animate({width:400,height:400,opacity:1}, "slow", function(){alert("animasyonumuz tamamlandı");});

});

Örneğimize buradan ulaşabilirsiniz.

Tüm örnekler 1 sayfada yer alıyor. Tüm kodlara  http://kodyapistir.com/show/35708.aspx adresinden ulaşabilirsiniz.

Bu yazımıza burada son veriyoruz. Tahminen bu serimiz 3 yazı olacak. Bir sonraki yazıda görüşmek dileÄŸiyle hoşçakalın…

Share

Bir önceki yazımda jQuery ile accordion menü hazırlamayı anlatmıştım.  Şimdi ise o functionun plugin halini sizlerle paylaşıyorum.

Pluginin asıl amacı accordion menüler oluşturmak. Ancak ayarlardan daha değişik işlemler için kullanılabilir hale getirebilirsiniz.

Kullanım şekli :

$('div.accordion1').accordion();

İsterseniz kullanabileceğiniz 6 tane ayar barındırıyor içerisinde. Ayarlarının kullanım şekli :

$('div.accordion1').accordion({
acik:1,
baslik:'<div class="menuTitle">Fade - ul </div>',
hiz:150,
etiket:'ul',
effect:'fade',
style:'menu'
});

Ayarlarımızı tek tek açıklayalım :

acik:

Menüdeki maddelerden hangisinin açık geleceÄŸini seçebiliyorsunuz. Dikkat edilmesi gereken bir nokta var. Tabii ki saymaya 1 deÄŸil 0‘dan baÅŸlıyoruz. EÄŸer tamamının kapalı gelmesini istiyorsak ya hiç yazmıyoruz yada deÄŸeri -1 olarak belirliyoruz.

varsayılan değeri : -1

baslik:

Menümüzün başlığını oluşturuyoruz. Tamamen isteğe bağlı olup html tagları kullanabiliyoruz.

varsayılan değeri : yok

hiz :

Menü efektlerinin hızını belirler. 1000 değeri 1 saniyeye eşittir.

varsayılan değeri : -1

etiket :

Belirtmiş olduğumuz etiketin altında yer alan elementlerden hangilerinin menünün maddelerini oluşturacağını belirler.

Örn : etiket : ’span’,

varsayılan değeri : ul

effect :

Menü maddelerinin efektini belirlememize yarar.

AlabileceÄŸi DeÄŸerler :

• slide
• show
• bounce
• none

varsayılan deÄŸeri : ‘none’

style :

Oluşturulan menümüzün başlıkları ve maddelerin stillerini belirlememize yarar.Vermiş olduğumuz style değişkeninin sonuna başlıklar için Baslik, maddeler için Div ekler.

varsayılan değeri : accordion

varsayılan stiller : accordionBaslik, accordionDiv

Önemli olan bir nokta daha var. etiket ile belirlediÄŸimiz maddelerin baÅŸlıklarını etiket‘in title özelliÄŸi oluÅŸturuyor.

    <script type="text/javascript">
        $(document).ready(function(){
            $('div.accordion1').accordion({
                acik:1,
                baslik:'<div class="menuTitle">Fade - ul </div>',
                hiz:150,
                etiket:'ul',
                effect:'fade',
                style:'menu'
            });
        });
    </script>
      <div class="accordion1">
        <ul title="Baslık bir">
            <li><a href="#">Madde 1</a></li>
            <li><a href="#">Madde 2</a></li>
            <li><a href="#">Madde 3</a></li>
        </ul>

        <ul title="Baslık İki">
            <li><a href="#">Madde 2-1</a></li>
            <li><a href="#">Madde 2-2</a></li>
            <li><a href="#">Madde 2-3</a></li>
        </ul>

        <ul title="Baslık Üç">
            <li><a href="#">Madde 3-1</a></li>
            <li><a href="#">Madde 3-2</a></li>
            <li><a href="#">Madde 3-3</a></li>
        </ul>
    </div>

Bu HTML kodlarının çıktısı aşağıdaki gibi olacak :

Diğer Örnekler için buraya tıklayınız.

Kodları indirmek için buraya tıklayınız.

Share

Neredeyse bir web 2.0 standardı olan accordion menüler sayfalarımızında vazgeçilmezi haline geldi. Şimdi yazacağımız plugin ile accordion menü hazırlamak çok kolay hala gelecek. Sizlerde üzerinde biraz değişiklikler yaparak istediğiniz yapıda menüleri kolaylıkla oluşturabilirsiniz.

Öncelikle menümüzün salt html halini oluşturalım;

<!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=ISO-8859-9" />
<title>Accordion Menü</title>
</head>
<body>
<div class="accordion">
<ul title="Baslık bir">
<li><a href="#">Madde 1</a></li>
<li><a href="#">Madde 2</a></li>
<li><a href="#">Madde 3</a></li>
</ul>
<ul title="Baslık İki">
<li><a href="#">Madde 2-1</a></li>
<li><a href="#">Madde 2-2</a></li>
<li><a href="#">Madde 2-3</a></li>
</ul>
<ul title="Baslık Üç">
<li><a href="#">Madde 3-1</a></li>
<li><a href="#">Madde 3-2</a></li>
<li><a href="#">Madde 3-3</a></li>
</ul>
</div>
</body>
</html>

Sayfamıza jquery.js dosyamızı ekledikten sonra accordion.js adında bir javascript dosyası oluşturalım kendimize.Oluşturduğumuz accordion.js dosyasını sayfamıza <link> etiketi ile ekledikten sonra kodlarımızı yazmaya başlayalım.

Öncelikle sabitlerimizi oluşturalım

var divClass = "accordion";//accorion uygulanacak ul'lerin bulunduğu divin classı
var menuHtml = "";//sayfadaki mevcut kodları temizledikten sorna kendi kodlarımızı ekleyeceğimiz değişken.
var sonAcikUl = -1;//en son açılan ul'un id'si.Eğer -1 ise henüz hiçbiri açılmamış demektir.

Buradaki değişkenlerimizin açıklaması zaten yanlarında mevcut ancak <strong>menuHtml</strong> üzerinde durmamız sanırım iyi olacaktır. Eğer menümüzün üzerinde ekstra birşey yer almasını istiyorsak bu değişkene atayabiliriz. Örneğin menümüzün üzerinde menu.jpg adında bir grafik yer almasını istiyorsak

var menuHtml = "<img src="menu.jpg" />";

ÅŸeklinde deÄŸiÅŸtirebiliriz.

Kodumuzun ilk bölümü hazırlandı. Şimdi sayfamız yüklendiğinde değiştirilecek alanı bularak gerekli işlemleri yapmaya başlamamız gerekmektedir. Bu işlemleri jQuery’nin $(document).ready fonksiyonu ile başlatıyoruz ;

$(document).ready(function(){
var us = $('div.'+divClass+'>ul').length;//işleme girecek ul sayısını alıyoruz
//bunları bir for döngüsü ile spanolustur fonksiyonuna atıyoruz
for(i=0;i<us;i++)
{
spanOlustur(i);
}
//fonksiyonumuz gerekli işlemleri yaptıktan sonra bize işlevsel html kodlarımız dönüyor
//Bizde bunları en başta belirlediğimiz div'in içeriğine eklemeden önce
//div'imizin içindeki html kodlarını temizliyoruz
//daha sonrada fonksiyonumuzun oltuşturduğu kodları div'imize ekliyerek işlemlerimizi tamamlıyoruz
$('div.'+divClass).empty().html(menuHtml);
//accordion menümüz artık hazır ve geriye kalan tek şey ul etiketlerinin bulunduğu divleri kapatmak
$('div.acilanDiv').hide();
});

Evet işlemler bitti ve menümüz hazır hayırlı olsun demeyeceğim tabii ki. Burada çağırmış olduğumuz spanOlustur fonksiyonumuz tüm işlevselliği sağlayor. Şimdi o fonksiyonumuzu yazalım.

Not:jQuery’nin en güzel seçicilerinden olan eq’nun burada güzel bir kullanımını göreceğiz.Bu seçicinin ne işe yaradığını kısaca anlatmak gerekirse : eq ile istediğimiz bir etiketin istediğimiz sıradaki elemanını seçebiliriz. Biz burada menümüzü oluşturan ul’leri sırası ile seçerek içerisindeki html kodlarını alıp istediğimiz hale getiriyoruz.

function spanOlustur(ulSayi)
{
//fonksiyonumuz ile gelen ulSayi'ncı sıradaki ul'u seçiyoruz
//bu elementi ul adında bir değişkene atıyoruz.
var ul = $('div.'+divClass+'>ul:eq('+ulSayi+')');
//ulHtml değişkenine ul'e ait html'i atıyoruz
var ulHtml = ul.html();
//menümüzün başlıklarını oluşturmak için ul'e ait title etiketinin değerini alıyoruz.
var spanBaslik = ul.attr('title');
//şimdi ise menümüzü oluşturuyoruz.
//öncelikle bir div oluşturup class,id ve onclick özelliklerini ayarlıyoruz.
//onclick'de accordionAc diye bir fonksiyonu tetikliyoruz.
//En son olarak da menümüzün başlığını bu dive içerik olarak ekliyoruz.
var menu = '<div class="accordionBaslik" id="menu'+ulSayi+'" onclick="accordionAc('+ulSayi+');">'+spanBaslik+'</div>';
//başlık divinin altına bir div daha ekleyerek onada menümüzü içerik olarak göstereceğiz.
//burada dikkatinizi çekmek istediğim bir nokta var;
//az önce hazırladığımız ulHtml, ul etiketlerinin içerisinde kalan li ve a etiketlerini alıyor sadece
//bu yüzden yeni bir ul etiketi yazmak zorundayız.
menu    += '<div id="ul'+i+'" class="acilanDiv"><ul class="accordion">'+ulHtml+'</ul></div>';
//yeni bir menu elementimiz hazır olduğuna göre bunu menuHtml değişkenine ekleyebiliriz.
menuHtml += menu;
}

Şu anda menümüz hazır ancak kullanılabilir değil. Sebebiyse tabii ki accordionAc fonksiyonunu henüz yazmamış olmamız. Bu fonksiyonumuzuda yazarak pluginimizi tamamlayalım.

function accordionAc(id)
{
if(sonAcikUl!=id)//eğer açık dive tıkladı ise herhangi bir işlem yapmıyoruz.
{
if(sonAcikUl==-1)//buradada menüye ilk defa tıklanıp tıklanmadığını kontrol ediyoruz
{
$('div#div'+id).slideDown(250);//eğer ilk tıklama ise sadece açma işlemi yapıyoruz
}
else
{
$('div#div'+sonAcikUl).slideUp(250);//son açık olan divi kapatıyoruz
$('div#div'+id).slideDown(250);//tıklanan divi açıyoruz
}
sonAcikUl = id;
}
}

Artık menümüz kullanıma hazır.

Örnek uygulama için buraya tıklayabilirsiniz.

Html Kodları : http://kodyapistir.com/show/e425b.aspx

Javascript Kodları : http://kodyapistir.com/show/5884a.aspx

Css Kodları : http://kodyapistir.com/show/445ce.aspx

Örneği indirmek içinde buraya tıklayabilirsiniz.

Bir sonraki yazıda görüşmek dileğiyle hoşçakalın.

Share

Çok ama çok kötü bir blog yazarı olduğumu biliyorum. Aslında bu yazı yerine konuşma ile olsaydı çok iyi olurdu diye düşündüm geçen gün ve bundan sonra (umarım) yazmaya başlıyacağım jquery örneklerini video ile hazırlamaya karar verdim.

Ortalarda yokken çok önemli bir projede yer aldım ve jQueryTurk.com‘da yazmayada baÅŸladım.

Oraya paralel olarak yazılarımı burayada ekleyeceğim tabii ki.

Share

.NET ile componentlerden kurtulmak beni ne kadar sevindirdi ise, yine . NET ile herÅŸeye hakim olmakta bir o kadar sevindiriyor. Tabii ki bu sadece 40-50 $’lık componentlerden kurtardığı için deÄŸil. Az sonra yazacağım örnekle eminimki sizde sevecek yada dahada bir ısınacaksınız.

Sitemize kayıt ettirdiğimiz resimleri kullanıcılara gösterirken üzerine sitemizin adını yazmak kim istemez? Eğer ticari bir kaygı varsa sanırım herkes ister. Şu andaki bir projede bu lazım olunca oturup araştırmak ve bulunca da yazmak gerekti. 

Öncelikle CodeBehind tarafına şunları ekliyoruz ;

using System.Drawing;//çizimler için
using System.Drawing.Imaging;//imagelere çizimler için
using System.Drawing.Drawing2D;//2 boyutlu çizimler için
using System.Drawing.Text;//image üzerine yazı yazabilmek için

 

 

Kütüphanelerimizi ekledikten sonra kodu bir class olarakmı kullanacağız yoksa gösterim sayfasındamı yapacağız ona karar vermemiz gerekmektedir.

 

 protected void Page_Load(object sender, EventArgs e)

    {
         //öncelikle üzerine yazı yazacağımız resmimiziÂ
        //seçiyoruz ve bitmap olarak tanımlıyoruz
        //resim adresini isterseniz bir değişkendende alabilirsiniz
        Bitmap img = new Bitmap(Server.MapPath("images/sunset.jpg"));

        //Bitmap'ı bir grafik olarak tanımlıyoruz
        Graphics gimg = Graphics.FromImage(img);

        //yazımızın yerleşimini hesaplıyoruz
        //yukarıdan resmin yüksekliğinin %1'i kadar boşluk veriyoruz
        double boy = img.Height * 0.01;

        //yandan ise %30 u kadar bir boşluk veriyoruz
        double en = img.Width * 0.30;

        //Smooting modeunu seçiyoruz
        gimg.SmoothingMode = SmoothingMode.AntiAlias;

        //keskinliğini belirliyoruz bu değer 0 ile 12 arasında olabilir
        gimg.TextContrast = 6;

        //yazımızın opacity'sini ayarlıyoruz. Ben beyaz ve %80 seçtim
        using (Brush semiTransparentBrush = new SolidBrush(Color.FromArgb(80, Color.White)))

        //tüm deÄŸiÅŸkenlerimiz tamam olduÄŸuna göreÂ
        //artık yazabiliriz
        gimg.DrawString("www.weboutbox.com \ndeneme", new Font("Verdana", 25),semiTransparentBrush, new Point(Convert.ToInt32(en), Convert.ToInt32(boy)));

        //çıktı olarak görünecek image'in formatını belirliyoruz
        Response.ContentType = "image/jpeg";

        //Resmimizi açtık ve üzerine yazımı yazdık ancak atlamamızÂ
        //gereken nokta ÅŸuki biz burada sadece kullanıcıya gösterirkenÂ
        //yazıyoruz yazıyı ve resmimiz aslında orjinal hali ile duruyor
        img.Save(Response.OutputStream, ImageFormat.Jpeg); 

        gimg.Dispose();
        img.Dispose();

    }

yandaki resimdende görebileceğiniz gibi resmimizin uzantısı .aspx iken sağ  tıklayıp  resim olarak kaydet diyebiliyoruz.

Â

Share