Kadir GÜNAY' ın Css, Xhtml, jQuery ve Arayüz Geliştirme Güncesi

jQuery İle Sekmeler – Tab With jQuery

jQuery İle Sekme - Tab With jQuery

Adım 1 – Html Kodlarını Eklemek

<div id="Main">
<ul class="TabMenu">
<li id="BirinciTab" class="Aktif">Tab 1</li>
<li id="IkinciTab">Tab 2</li>
<li id="UcuncuTab">Tab 3</li>
</ul>
<div class="TabIcerik Tab1">
<h1>Tab 1 Başlık</h1>
<ul>
<li>Tab1-1</li>
<li>Tab1-2</li>
<li>Tab1-3</li>
</ul>
</div>
<div class="TabIcerik Tab2">
<h1>Tab 2 Başlık</h1>
<ul>
<li>Tab2-1</li>
<li>Tab2-2</li>
<li>Tab2-3</li>
</ul>
</div>
<div class="TabIcerik Tab3">
<h1>Tab 3 Başlık</h1>
<ul>
<li>Tab3-1</li>
<li>Tab3-2</li>
<li>Tab3-3</li>
</ul>
</div>
</div>

Adım 2 – Css Kodlarını Eklemek

#Main{
margin: 7em auto;
width: 400px;
}
#Main ul{
list-style: none;
list-style-position: outside;
}
#Main ul.TabMenu li{
float: left;
margin-right: 5px;
margin-bottom: -1px;
}
#Main ul.TabMenu li{
font-weight: 700;
display: block;
padding: 5px 10px 5px 10px;
background: #efefef;
margin-bottom: -1px;
border: 1px solid #d0ccc9;
border-width: 1px 1px 1px 1px;
position: relative;
color: #898989;
cursor: pointer;
}
#Main ul.TabMenu li.Aktif{
background: #fff;
top: 1px;
border-bottom: 0;
color: #5f95ef;
}
.TabIcerik{
margin: 0pt auto;
background: #efefef;
background: #fff;
border: 1px solid #d0ccc9;
text-align: left;
padding: 10px;
padding-bottom: 20px;
font-size: 11px;
}
.TabIcerik h1{
line-height: 1em;
vertical-align: middle;
height: 48px;
padding: 10px 10px 10px 52px;
font-size: 32px;
}
.TabIcerik.Tab1{
display: block;
}
.TabIcerik.Tab2{
display: none;
}
.TabIcerik.Tab3{
display: none;
}
.TabIcerik.Tab3 a{
color: #5f95ef;
}

Adım 3 – jQuery Kod Bloğu

$(document).ready(function(){
$("ul.TabMenu > li").click(function(e){
switch(e.target.id){
case "BirinciTab":
//durum değiştirme ve menu seçimi
$("#BirinciTab").addClass("Aktif");
$("#IkinciTab").removeClass("Aktif");
$("#UcuncuTab").removeClass("Aktif");
//seçileni göster diğerlerini gizle
$("div.Tab1").fadeIn();
$("div.Tab2").css("display", "none");
$("div.Tab3").css("display", "none");
break;
case "IkinciTab":
//durum değiştirme ve menu seçimi
$("#BirinciTab").removeClass("Aktif");
$("#IkinciTab").addClass("Aktif");
$("#UcuncuTab").removeClass("Aktif");
//seçileni göster diğerlerini gizle
$("div.Tab2").fadeIn();
$("div.Tab1").css("display", "none");
$("div.Tab3").css("display", "none");
break;
case "UcuncuTab":
//durum değiştirme ve menu seçimi
$("#BirinciTab").removeClass("Aktif");
$("#IkinciTab").removeClass("Aktif");
$("#UcuncuTab").addClass("Aktif");
//seçileni göster diğerlerini gizle
$("div.Tab3").fadeIn();
$("div.Tab1").css("display", "none");
$("div.Tab2").css("display", "none");
break;
}
return false;
});
});

Burada yapılan işlem çok basit aslında. li elemanlarından birisine tıklandığın e isimli bir fonksiyon çalışıyor. Bu fonksiyon kendi içinde switch case yöntemi ile id leri baz alarak işlem yapıyor. BirinciTab ise id diğer idlerin sınıflarını kaldır seçili yani tıklanana Aktif sınıfını ekle. Daha sonra ise Tab1 sınıflı divi fadeIn efekti ile göster diğer divleri ise gösterme. Bu işlemi her tab için yaparsanız istediğiniz görünümü elde edecekseniz.

Makalenin orjinal uygulamasını görmek için  -> http://yensdesign.com/tutorials/tabs/ adresine bakabilirsiniz. Ben de buradaki kaynak kodlarını Türkçeye göre yorumlayarak hem html hem css hem de js dosyalarını düzenledim.

Uygulamaya Ait Örneği Görmek İçin Tıklayınız

Uygulamaya Ait Örneği İndirmek İçin Tıklayınız

jQuery İle Dönen Harf Efekti – Airport – Information Board Text Effect

Havalimanlarında bilgilendirme tabelalarında uçakların durumu, saati v.b. bilgilerin olduğu alanların animasyonuna benzeyen bir animasyonun nasıl yapılacağını anlatacağım.

jQuery İle Dönen Harf Efekti - Airport - Information Board Text Effect

Adım 1 – HTML Kodlarını Eklemek

<div id="Main">
<p>Şu anda <span id="DonenHarf1"></span> <span id="DonenHarf1-1"></span> <span id="DonenHarf1-2"></span> adresinde bulunuyorsunuz.</p>
<p>Aynı zamanda <span id="DonenHarf2"></span> <span id="DonenHarf2-1"></span> <span id="DonenHarf2-2"></span> <span id="DonenHarf2-3"></span> <span id="DonenHarf2-4"></span> isimli yazının örneğini inceliyorsunuz.</p>
<p>Sevdiğim meyveler <span id="Meyveler"></span></p>
</div>

Adım 2 – CSS Kodlarını Eklemek

#DonenHarf1, #DonenHarf1-1, #DonenHarf1-2 { font-size:28px; font-weight:bold; color:#FF0000;}
#DonenHarf2, #DonenHarf2-1, #DonenHarf2-2, #DonenHarf2-3, #DonenHarf2-4 { font-size:48px; font-weight:bold; color:#0099FF;}
#Meyveler { width:300px; height:100px; background-color:#999999; color:#990000; font-weight:bold;}

Adım 3 – jQuery Dosyası ve Eklenti Dosyasını Eklemek

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.airport-1.1.source.js"></script>

Adım 4 – jQuery Tetikleyici Kodu Eklemek

$(document).ready(function(){
$('#DonenHarf1').airport(['www.']);
$('#DonenHarf1-1').airport(['kadirgunay']);
$('#DonenHarf1-2').airport(['.com']);
$('#DonenHarf2').airport(['jQuery']);
$('#DonenHarf2-1').airport(['İle']);
$('#DonenHarf2-2').airport(['Dönen']);
$('#DonenHarf2-3').airport(['Harf']);
$('#DonenHarf2-4').airport(['Efekti']);
$('#Meyveler').airport(['Elma', 'Muz', 'Çilek', 'Portakal']);

});

Burada gördüğünüz .airport parametresi eklenti ile gelen bir durumdur. p etiketi içindeki span lere id atayarak jquery tetikleyicisinde hangi id’ ye ne kelimesinin geleceğini yazdım. Eklentinin parametresi ile de kelimeleri kendi içlerinden döndürdüm. Css kısmında ise id’ lere stil değeri atadım ve ekrana bastırdım.

Uygulamaya Ait Örneği Görmek İçin Tıklayınız

Uygulamaya Ait Örneği İndirmek İçin Tıklayınız

Makalenin orjinal anlatımı için lütfen -> http://www.unwrongest.com/projects/airport/ adresine bakınız.

Metin Alanlarına jQuery İle Odaklama Efekti – Changing Form Input Styles on Focus with JQuery

Metin Alanlarına jQuery İle Odaklama Efekti - Changing Form Input Styles on Focus with JQuery

Formlarda kullandığımız alanların odaklanma şeklini yapabileceğimiz çok basit bir uygulama.

Adım 1 – XHTML Kodlarını Eklemek

<div id="Main"><input class="Alan1" type="text" value="Metin Alanı" />

<input class="Alan2" type="text" value="Metin Alanı" />

<textarea class="Alan3" cols="30" rows="5"></textarea></div>

Adım 2 – Css Kodlarını Eklemek

#Main { width:760px; height:100%; margin:0 auto; background-color:#CCCCCC; padding:10px 20px;}
.Alan1, .Alan2 { width:180px; height:20px; border:2px solid #666666; background-color:#999999; margin-bottom:20px;}
.Alan2 { border:2px dotted #CC0000; background-color:#FFCC99;}
.Alan3 { border:4px solid #666666; background-color:#0099FF; overflow:hidden;}
.Odakla1 { border:2px solid #0066CC; background-color:#0099CC; color:#FFFFFF;}
.Odakla2 { border:2px solid #339900; background-color:#990000; color:#FFFFFF;}
.Odakla3 { border:1px solid #FFCC00; background-color:#000000; color:#FFFFFF;}

Adım 3 – Script Dosyalarını Eklemek

<script type="text/javascript" src="jquery-1.3.1.min.js"></script>

Adım 4 – jQuery Kod Bloğunu Eklemek

$(document).ready(function() {
$(".Alan1").focus(function() {
$(this).addClass("Odakla1");
if (this.value == this.defaultValue){
this.value = '';
}
if(this.value != this.defaultValue){
this.select();
}
});
$(".Alan1").blur(function() {
$(this).removeClass("Odakla1").addClass("Alan1");
if ($.trim(this.value) == ''){
this.value = (this.defaultValue ? this.defaultValue : '');
}
});
});

Alan1 isimli sınıfın odaklanma durumunda Odakla1 sınıfını atadık ve içindeki değeri kontrol ettik. Daha sonra ise blur eklentisi ile tam tersi işlem yaptırdık. Bunu yapmazsak arkadaşlar tıklandıktan sonra atanan sınıf odaklanma durumu geçerse aynen kalacaktı. Fakat bu şekilde odaklanma durumu geçerse ilk sınıfına geri dönecek.

Uygulamaya Ait Örneği Görmek İçin Tıklayınız

Uygulamaya Ait Dosyaları İndirmek İçin Tıklayınız

Yansıma Efekti İle jQuery Toggle – Fade Slider Toggle jQuery Plugin

Yansıma Efekti ile jQuery Toggle - Fade Slider Toggle jQuery Plugin

Toggle kullanımı ile ilgili bir çok örnek internette mevcut. İstenirse ben de yeniden yazabilirim. Bugün anlatacağım olay ise bu toggle eyleminin yansıma efekti ile kullanılması.

Adım 1 – HTML Kodlarını Eklemek

<a href="#" class="ToggleTikla">Buraya Tıklayın</a>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>

Adım 2 – CSS Kodlarını Eklemek

.Icerik{opacity:0;display:none;}

Adım 3 – Script Dosyalarını Eklemek

<script src="Script/jquery.js" type="text/javascript"></script>
<script src="Script/jquery.fadeSliderToggle.js" type="text/javascript"></script>

Adım 4 – jQuery Kod Bloğunu Eklemek

$(document).ready(function() {
$(".ToggleTikla").click(function(){
$(this).next().fadeSliderToggle()
return false;
})
});

Burada yaptığımı işlem şudur arkadaşlar, ToggleTikla sınıfının tıklama eylemine bir fonksiyon atıyoruz ve kendi içinde bunu eklentimiz ile döndürüyoruz. Eklenti kendi içinde hem toggle yapımını hem de yansıma efektini veriyor. Adım 2 de Icerik sınıfının css değerlerini de gördüğünüz gibi opacity:0 dedik. Tıklandığında gözüken alan bu sayede efektif görüntü alıyor. Hepsi bu kadar

Uygulamaya Ait Örneği Görmek İçin Tıklayınız

Uygulamaya Ait Dosyaları İndirmek İçin Tıklayınız

Uygulamanın orjinal anlatımı için lütfen -> http://www.position-absolute.com/articles/jquery-fade-and-slide-toggle-plugin/ ziyaret ediniz.

Html 5 – O da Nedir?

Html5

Uzun zamandır konuşulan, tartışılan konuya son nokta konuldu sanırım. Html dilinin 5. versiyonu yayına girdi. Hatta W3C’ nin açıklamasına göre Xhtml diline destek ve güncelleme 2009 senesi sonunda bitiyor. 1999 yılında yaptıkları açıklamalarında; XML’ in nadir XHTML’ in ise doğru yol olduğunu söylemişlerdi. 2009 senesindeki açıklamarında ise artık XHTML için geliştirme çalışmaları yapılmayacakmış.

XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML 5

2009-07-02: Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the Working Group, W3C hopes to accelerate the progress of HTML 5 and clarify W3C’s position regarding the future of HTML. A FAQ answers questions about the future of deliverables of the XHTML 2 Working Group, and the status of various discussions related to HTML. Learn more about the HTML Activity.

HTML 5 Çıktı! O da Nedir?

Tartışmalardan uzak kendi halinde geliştirilen fakat bir çok web programcısının “amannnn! xhtml var ya daha ne” dediği html 5 yayın hayatına başladı. Artık rahatca kullanabiliriz. Rahatca mı? Kesinlikle hayır. Genel görüntü ve yapı olarak aslında gayet iştah açıcı olsa da şu an için sadece Firefox, Opera ve Safari destekliyor. IE7 ve 8 için ekstra bazı kodlar ekleniyor. Biz halen IE6 gibi bir tarayıcı ile uğraşırken kalkıp HTML5 ile bir web sitesi yaparsak sizce ne kazanmış oluruz?

Bilgi açısından çok şey katabilir ama şunu da bir düşünün, yaptığınızı sadece belirli bir kesim görebiliyor ve geri kalanlar ise size beceriksiz diyor. Ne kadar utanç verici değil mi?

Öncelikle şunu anlamadığımı belirtmek isterim, madem ki HTML5 gibi geniş kullanıma sahip bir dil çıkaracaktınız xhtml’ i neden oluşturdunuz ve bu kadar zaman destek verip bir anda bitiriyoruz dediniz? Çapraz tarayıcı sorunları ile boğuşurken başımıza yeni bir dil ve özellikleri çıkardınız.

HTML5′ in göze çarpan özelliklerine biraz göz atalım;

• Her şeyden önce benim en çok hoşuma giden özelliği şu; en çok kullanılan alanlar, sınıflar v.b. şeyleri bir etiket kapsamına almışlar.
  

  html4 - xhtml kod yapısı

  Gördüğünüz gibi ana alanlar div ile oluşturulup içine diğer öğeler ekleniyor(du!).

  

  html5

  html5de ise en çok kullanılan alanlar birer etiket haline getirilmiş durumda.

• Audio ve Video Özelliği
  html4 veya xhtml de video veya ses eklemek için genelde javascript kullanılırdı. html5de ise bu olay artık tamamen kendisine ait kod yapısı içinde oluyor ve video – audio etiketleri ile yapılıyor. Ayrıca bu etiketler de kendilerine ait nitelikleri alabiliyorlar.
• aside etiketi
  aside etiketi bizim her zaman kullandığımız genel sidebar mantığında bir etiket. kullanıldığı alanı içerik alanından ayırıyor.
• canvas
  grafiksel işlemler için kullanılacak bir etiket
• command
  komut düğmesi
• datagrid
  ağaç listesi içinde ekrana basılacak veri alanı
• datalist
  .net kullananlar bilirler, açılan kutu içinde ekrana basılan veri alanı
• datatemplate
  veri şeması
• details
  bir elemana ait olan detayları göstermek adına kullanılan etiket
• dialog
  konuşma etiketi (henüz denemedim )

bunlardan bazıları. Daha detaylı liste için http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/ adresine bakabilirsiniz.

Kullanılan yeni etiketlere ve özelliklere bakınca gerçekten insanın hemen geçesi geliyor. Ama işte gelin görün ki yukarıda da belirttiğim gibi 8 sene önce üretilen ve ömrü hayatıda 1 kez güncellenen bir tarayıcı ile bile bu kadar uğraşırken kalkıp bu güzel özellikleri bize sunan fakat yarım yamalak desteklenen bir dili nasıl kullanabiliriz?