‘jquery’ etiketi için sonuçlar
jQuery İpuçları – 2
Şubat 19th, 2010 • 5 yorum Javascript, jquery
Etiketler: ie6, ipuçları, jquery, kontrol kutuları, metot zincirleme, toggle, toggleClass, zebra tablolar
Genel olarak kullandığım ve dikkatimi çeken jquery ipuçlarını sizlerle paylaşmaya devam ediyorum. İpucu serisinin ilkine buradan ulaşabilirsiniz.
1- toggle() ile kolayca gizle/göster yapmak.
Javascript ile en çok yaptığımız işlerden biriydi bir bağlantıya veya elemana tıklayınca açılan bir daha tıklayınca kapanan alanlar oluşturmak. jQuery bu iş için bize toggle() fonksiyonunu tanımlamış. Çeşitli kullanım şekilleri olsada ben size burada en basit şeklini anlatacağım.
$('p.hidden').toggle ();
Bu kadar basit bir kod ile işlem tamamdır. toggle() fonksiyonuna çeşitli animasyonlar ve işler ekleyebiliyoruz. Gayet kullanışlı bir özellik.
2- toggleClass() ile toogle uyguladığımız elemanlara sınıf tanımlama
Yukarıda yaptığımız uygulamaya ek olarak tetiklenen elemana bir sınıf tanımlamak için
$('p.hidden').toggleClass ("acik");
bu kod sayesinde mesela çok basit şekilde aç-kapa butonu yapabiliriz.
3- click() ile tetiklenen bağlantılarda ie6 sorununu gidermek
Bir bağlantıya jquery ile erişip click() metodunu uyguladığımızda ie6 ile sorun yaşıyoruz. Ben bu sorun için bir çözüm bulmuştum ancak Hüseyin Mert daha iyi bir çözüm buldu. Ben bu çözümü burada sizlerle paylaşmak istedim.
$("a").click(function(event){
event.preventDefault();
// yapılacaklar
});
Böylece sorunu aşmış oluyoruz. Hüseyin Mert’e teşekkürler tekrar.
4 – Metot Zincirleme özelliği ile daha kısa kodlar üretmek
Bir çok metodu ard arda aynı elemana yazmaktansa zincirleme kullanabilme özelliği sunuyor bize jQuery.
$('p.ilkParagraf').css ('color', '#ff0000').text ('Giriş').addClass ('yazi').fadeTo (1000, 1);
Yukarıdaki örnekte görüldüğü gibi ard arda metotları kullanabiliriz. Ancak çok fazla kullanmanın performansı etkilediğini unutmadan bu özelliği kullanalım.
5- Kontrol kutularının(checkbox) kontrolü
jquery ile kontrol kutularını kontrol etmenin bir kaç yolu var
if($('#deneme:checked').val() != null)
{
// işaretli ise bunu yap
}
//veya
if($('#deneme:checked').length != 0)
{
// işaretli ise bunu yap
}
//veya
$('input[name=deneme]').is(':checked')
$('input[name=deneme]').attr('checked')
// işaretli veya degil
$('input[name=deneme]').attr('checked', true);
6 – Arama metinlerini değiştirmek
Arama kutuları içine açıklayıcı metinler yazarız. “Anahtar Kelime”, “Arama” vb. gibi. bu metinleri yazarız, ancak kullanıcı bu alana odaklandığında bu metni kaldırmalıyız ve kullanıcı bir şey yazmadan çıkarsa o zamanda genel yazdığımız metni geri getirmeliyiz.
var aramaKutusu = $("#aramaAlani");
var aramaKutusuBasDeg = "Aranacak Kelime";
aramaKutusu.attr("value", aramaKutusuBasDeg);
aramaKutusu.focus(function(){
if(jQuery.trim($(this).attr("value")) == aramaKutusuBasDeg) $(this).attr("value", "");
});
aramaKutusu.blur(function(){
if(jQuery.trim($(this).attr("value")) == "") $(this).attr("value", aramaKutusuBasDeg);
})
7- Zebra tablo yapmak
Tablo okunabilirliğini arttırmak için bir satır farklı bir renk veya stil tanımlarız. Bunu javascript ile uzun yoldan yaparken jquery ile tek satır kod ile yapabiliyoruz
$("tr:nth-child(odd)").addClass("farkliSatir");
8 – Çok tekrarlanan seçicileri bir değişkene tanımlamak
$('p.ilkParagraf').css ('color', '#000000');
$('p.ilkParagraf').text ('Giriş');
$('p.ilkParagraf').addClass ('yazi');
$('p.ilkParagraf').fadeTo (1000, 1);
Yukarıdaki gibi bir kullanımda çok fazla tekrarlayan bir seçiciye bir değişkene atayıp daha optimum bir kod elde edebiliriz.
var $p = $('p.ilkParagraf');
$p.css ('color', '#000000');
$p.text ('Giriş');
$p.addClass ('yazi');
$p.fadeTo (1000, 1);
Bu kullanım ile eleman ilk başta bir değişkene atanıp ön belleğe alınıyor ve daha hızlı erişiliyor.
Kaynaklar
Jquery ipuçları
Ekim 22nd, 2009 • 4 yorum Javascript
Etiketler: ipuçları, jquery, kolaylık
jQuery’i artık neredeyse her projemde kullanıyorum. Aklıma gelen ve not aldığım ipuçlarını burada yazdım. Sizinde aklınıza gelen olursa yorum kısmında katkıda bulunabilirsiniz. Ayrıca kaynaklar kısmındaki linklerde de daha fazlası var
1- jQuery kütüphanemizi Google’da host etmek: google bize jQuery kütüphanesini kendi hostu üzerinden yüklememizi sağlıyor. Bu bize ön belleğe alınana dosyanın daha hızlı yüklenmesini sağlar.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//isler burada
});
</script>
Bu sayede jquery kütüphanesini her projeye eklerken kopyala yapıştır ile de uğraşmak zorunda kalmıyoruz. İstediğimiz her yerde jQuery kullanma imkanıda veriyor bize bu kod.
2- jquery kısaltması: jquery kodlarımzı yazarken bazen
$(document).ready(function (){});
aklımıza gelmeye bilir
$(function (){});
bu daha kolay ve akılda kalıcı bence
3- fare üzerinde iken ve üzerinden gittiğinde
$("li").hover(
function () {
// fare üzerinde iken bunu yap
},
function () {
// fare kaçınca bunu yap
}
);
4- not seçicisi: Bir seri elemana yaptırdığımız bir işi aradan bir tane elemanın yapmasını istiyorsak bu seçiciyi uygulayabiliriz.
$('ul#sekme li a').not("ul li#diger a").click(function(){
// yapılacak işler
});
Yukarıdaki kodlamada biz sekmelere bir tanım yapıyoruz ama en son sekmeye tıklayınca bu işlemin yapılmasını istemiyoruz. Bu iş için biçilmiş kaftan :not seçicisi
5- siblings seçicisi liste ve benzeri aynı seviyedeki elemanlar üzerinde etkileşimli erişim sağlayan güzel bir seçici. Daha önce http://www.fatihhayrioglu.com/jquery-ile-basit-sekme-yapimi/ anlatırken kullanmıştım.
$(this).parent('li').addClass('sekmeSecili').siblings().removeClass('sekmeSecili');
Bu kodda da görüldüğü gibi tıklanan sekmeye sekmeSecili sınıfı atıyoruz diğer sekmelerde aynı sınıf varsa onları kaldırıyoruz.
6- HTML içine jQuery den eleman eklemek:
var ekleBunu = $('<div></div>');
ekleBunu.attr("id","yeniKatman").appendTo("body");
7- Bir elemanın varlığını kontrol etmek
if ($("#someDiv").length) {
// eğer varsa bunu yap
}
8- Kolay kullanılan tarayıcıyı yakalama
$.browser.safari $.browser.msie $.browser.mozilla
tarayıcı sürümünü yakalamak için
if ($.browser.msie && $.browser.version <= 7 )
Kaynaklar
jQuery ile Basit Sekme Yapımı
Mayıs 25th, 2009 • 7 yorum Javascript
Etiketler: Javascript, jquery, sekme
Web sitelerinden uzun içerikler her zaman kullanıcıyı itmiştir. Bunun için çeşitli çözümler üretilmiştir ve üretilmeyede çalışılıyor. Yeterli alanların olmadığı durumlarda veya uzun içerikleri olan sayfalarda sekme kullanımı yardımımıza koşar. Birçok sitede bu ve benzeri nedenlerde dolayı sekmeleri kullanır.
Artık neredeyse tüm projelerimde jQuery olmazsa olmaz oluyor. Bu nedenle javascript ile değil jQuery ile kodluyorum bu tip alanları. Sekmeli içerik yapımı jQuery ile çok basit. Bunu burada beraber göreceğiz.
XHTML kodumuz:
<div class="sekmeAlani"> <!--[if !IE]>sekmeler<![endif]--> <ul class="sekmeler"> <li class="s1"><a href="javascript:void(0);" class="s1">Sekme1</a></li> <li class="s2"><a href="javascript:void(0);" class="s2">Sekme2</a></li> <li class="s3"><a href="javascript:void(0);" class="s3">Sekme3</a></li> <li class="s4"><a href="javascript:void(0);" class="s4">Sekme4</a></li> </ul> <!--[if !IE]>sekme icerikleri<![endif]--> <div class="s1">...</div> <div class="s2">...</div> <div class="s3">...</div> <div class="s4">...</div> </div>
Burada aslında href=”javascript:void(0);” özelliğini kullanmayabiliriz, ancak ie6 ve 7 bu durumda link tanımlarında sorun çıkarıyor. HTML’de dikkat edeceğimiz bir kaç yer var. Link sınıf tanımı(örn: class=”s1″) ve sekme içeriği sınıfları birbiri ile aynı olmalıdır.
Hemen uygulamaya geçersek.
Kodumuza jQuery kütüphanesini ekleyelim. Firefox’un YSlow eklentisinin belirttiği gibi javascript kodlarını sayfamızın altına koyalım.
<script type="text/javascript" src="jquery.js"></script> </body> </html>
jQuery kodumuzu yazmaya başlayalım. Mantık olarak sekmeli menüler olsun, sekmeli içerikler olsun aynıdır. Sekmelere tıklayınca o sekmeye ait içerikler görünecek, diğerleri görünmez olacaktır. bu mantığa göre kodumuzu yazalım.
$(document).ready(function() {
$('div.sekmeAlani ul.sekmeler li a').click(function(){
$(this).parent('li').addClass('sekmeSecili').siblings().removeClass('sekmeSecili');
var mevcutSinif = this.className.slice(0,2);
$('div.sekmeAlani > div').hide().filter('div.'+mevcutSinif).show();
});
$('.sekmeAlani ul.sekmeler li a:first').click();
});
Kodumuz sadece bu kadar.
$(document).ready(function() { .. }); jQuery’nin stadart kodu.
5. satırdaki kodda; sekme linklerine tıklanınca yapılacak işlemleri tetikliyoruz.
6. satırda tıklanan sekmeyi seçili hale getiriyoruz. Burada kullandığımız yöntem jQuery’nin bize sunduğu güzelliklerden biridir. Hem tıklanan sekmeyi seçili hale getiriyoruz hemde bu arada diğer sekmeleri(siblings() fonksiyonu sayesinde) normal hale getiriyoruz. Tek satır kod ile bunu bize sağlaması jQuerynin güzelliği
7. satırda tıklanan linkin sekme içeriği ile ilişkisini sağlayan sınıfını yakalıyoruz. Burada slice(0,2) ile sınıfın iki kelimesini alıyoruz, birebir sınıf karşılaştırması yapamıyoruz çünkü bu linke başka sınıflarda atanmış olabilir. Bu sınıf adı bize ilişkili sekme içeriğini göstermek için yardımcı olacaktır.
8. satırda içerikleri gizleme ve gösterme işini çözüyoruz. $(‘div.sekmeAlani > div’) kodu bize sekmeAlani‘nının birincil div’lerini yani sekme içeriğini kapsayan katmanları gizlememizi sağlıyor. Böylelikle sekme içinde div kullansak bile bunlar görünmez olmuyor bu bir çok sekme kodunda göz ardı edilen bir husustur. CSS’de de olan çocuk seçiciler(>) jQueryde gönül rahatlığı ile kullanabiliyoruz çünkü ie6 desteğini jQuery hallediyor. jQuery’nin bize sunduğu avantajlardan biride filter() fonksiyonudur. Bu sayede biz tüm sekme içeriğini kapsayan div’leri gizle ama bu tıkladığımzın(bu tıkladığımızda yukarıdan aldığımız sınıf tanımlaması ile anlıyoruz, aynı sınıf atamamızın sebebi de budur.) içeriği hariç diye biliyoruz. Bize bu kadar kolaylık sağlayan jQuery bundan dolayı çok seviyorum, pardon seviyoruz galiba.
10. satır sekme linki tıklamasını bitirdikten sonra sayfa ilk açıldığında ilk linkin tıklanması ve içeriğinin gösterilmesi için kodumuzu yazıyoruz. Buradaki a:first yine CSS’den bildiğimiz ama ie6 nedeni ile kullanamadığımız bir özellik. click() fonksiyonuda sanki biz tıklamışız işlevi görüyoruz.
Evet koda baktığımızda 5-6 satırlık bir jQuery kodu ile sekmeli bir yapı oluşturduk. jQuery’yi bu yüzden çok güzel. Bende öğrenmeye devam ediyorum. Öğrendikçe sizlerle paylaşacağım. bu konuda ve bir çok yerde yardımlarından dolayı Orhan Ekici‘ye(şu an yapım aşamasında) teşekkürlerimi sunmadan geçemeyeceğim. İnşallah yakında sitesini açarda internet alemine güzel bilgiler sunar.
jQuery UI içinde sekme ekelentisi var onuda tercih edebilirsiniz. jQuery tab eklentisi çok ayrıntılı ve bir çok özellikleri var. Bu bir bakıma avantaj olsada bazen dezavantaja dönüşebiliyor. Ben ufak bir sekmeli içerik yapmak için jQuery UI tab eklentisini kullanmayı uygun görmüyorum açıkçası.
Sekmeli içerik ve sekmeli menülerde farklı şekillerde örnekler var. Stil dosyasını değiştirerek bu örnek üzerinden istediğimiz birçok sekmeli içerik üretebiliriz.
Örnek kodu görmek için tıklayınız.
Örnek kodu IE (6-7-8), Firefox 3.0.10, Opera 9.6, Googel Chrome 1.0 ve Safari 3.2.2 sürümlerinde test ettim.
Kaynaklar
- http://jqueryfordesigners.com/jquery-tabs/
- http://broadcast.oreilly.com/2008/10/how-to-create-tabs-with-css-an.html
- http://justintadlock.com/archives/2007/11/07/how-to-create-tabs-using-jquery
- http://www.barelyfitz.com/projects/tabber/index.php
- http://www.thetruetribe.com/jquery/3-jquery-widgets/77-how-do-i-make-tabs-in-jquery-without-jq-tabs-plugin
Jquery İle IFrame Yüksekliğini İçeriğine Göre Otomatik Ayarlamak
Mayıs 18th, 2009 • 15 yorum Haberler
Etiketler: iframe, Javascript, jquery, jQuery plugin
Ben bu işe başladığımdan beri çerçeve(frame) kullanmak hoşa gitmemiştir. Allah’tan ilk çıktığındaki popülaritesini kaybettide rahatladım. Ancak yine bazı yerlerde tek çare olarak framset’i olmasada iframe’i kullanmak zorunda kalıyoruz.
Iframe kullanımında en çok yaşanan sorunlardan biridir içeriğin yüksekliğine göre iframe yüksekliğinin artması veya azalması. Daha önce ben bunu javascript ile yapmıştım. Ancak farklı tarayıcılarda bazı sorunlar yaşamıştım. Şimdide javascript ile bunu halledebiliriz. Ancak son zamanlarda(o kadar da yeni sayılmaz :D) popüler olan javascript kütüphaneleri(benim için bunun adı jQuery) ile bu daha basit.
Burada ufak bir ipucu var. Ben bir çok projelerimde jquery kütüphanesini kullandığım için jQuery autoHeight eklentisini kullandım. Eğer projemde jQuery kütüphanesi yüklü değilse javascript ile yapmak daha mantıklı. Javascript ile yapacaklar için bir link jQuery ile yapmanın bir kaç avantajıdaha var tabii
Ben burada jQuery autoHeight eklentisinin nasıl kullanılacağını anlatacağım.
Sayfamıza ilk olarak jQuery kütüphanesini eklemeliyiz. Bu script dosyasının ilk sırada olması önemli jQuery için.
<script type="text/javascript" src="script/jquery.js"></script>
Iframe otomatik yükseklik vermek için kullandığımız eklenti kodu.
<script type="text/javascript" src="script/jquery.autoheight.js"></script>
Sayfaya eklediğimiz iframe kodunda yapmamız gereken sadece class="autoHeight" eklemek.
<iframe id="listeCercevesi" name="listeCercevesi" class="autoHeight" scrolling="auto" frameborder="0" src="/liste.aspx"></iframe>
Örnek sayfayı görmek için tıklayın. (sonspring.com alınmıştır)
Uyarılar:
- İlk uyarımız bu metot aynı alan adı üzerindeki sayfa eklemelerinde çalışıyor. İçreriğini farklı siteden aldığımız iframe’ler güvenlik nedeniyle çalışmayacaktır.
- İkinci uyarım ise içeriği yüklü olan iframe sayfalarında yükleme zaman aldığı için ve scriptimiz sayfa yüklendikten sonra çalıştığı için sayfa yüksekliği ilk açılıştı küçük geliyor ve sonradan gerçek boyutuna geliyor. Ben bunu engellemek için iframe’e ortalama bir yükseklik değeri girdim. Script yüklendiğinde zaten beni girdiğim değeri değiştiriyor.
- Üçüncü olarak bu yöntem javascript yönteminden daha kullanışlı yapan özelliklerden biri de kullanımının kolay olması ve her iframe e id vermek zorun olmuyor olmamız.
Kaynaklar
jQuery ve mootools birlikte kullanmak
Aralık 21st, 2008 • 16 yorum Ajax, Javascript
Etiketler: Javascript, jquery, mootools
Ben genellikle jQuery ile çalışıyorum, ama bazen diğer javascript kütüphaneleride kullanmak gerekiyor. Bende yeni projemde mootools’un multibox lightbox kolonunu kullandım.
Tabi jquery ve mootools ile birlikte kullanmamdan dolayı hata vermeye başladı.
Çözüm çok basit $ işareti yerine jQuery yazmak yeterli.
$.ajax
yerine
jQuery.ajax
15 Eylül 2008 web’den seçme haberler
Eylül 15th, 2008 • 1 yorum Haberler
Etiketler: 0 yükseklik, Developer Tools, firebug, Firefox 3.1, HTML 5, ie8, Javascript, jquery, mootools, yazı tipi
- Css-trics’ten jquery hakkında güzel bir video. Bağlantı
- Yazı tipi gömme işinde sona yaklaşılıyor gibi. Sonudan Mozilla(Firefox) @font-face’i destekleyeceğini açıklamış. Bu bizim için çok güzel bir gelişme. Bağlantı
- CSS ile %100 yükseklik için yapmamız gereken. Bağlantı
- SmashingMagazine’den 75 gerçekten kullanışlı javasscript teknikleri. Bağlantı
- IE8′den jscript profiler. FireBug benzeri bir araç. Bağlantı
- Firefox3.1 ile birlikte özel mod adında yeni özellik geliyor. Aslında bu Google Chrome ve IE8′de olan bir özellik. Yaptığınız işlemlerin herhangi bir site veyerde tutulmasına izin vermediğiniz bir tarayıcı modu. Tarayıcı savaşlarında en güzel yanı bir özellik eğer tutarsa bütün tarayıcılara dağalıyor Bağlantı
- Mootools ile yapılmış mükemmel bir google map gibi bir uygulama. Bağlantı
- Internet Explorer 8.0 ile beraber gelen Developer Tools’u inceleyelim. – daron.yondem.com Bağlantı
- CSS ile yapılmış açılır menü örnekleri. Bağlantı
- Web 2.0 bitti ,Web 3.0′ı beklerken – blog.harunpeksen.net Bağlantı
- FireBug1.2.1 sürümü yayınlamış. Değişen bazı hataların giderilmesi. Bağlanatı
- HTML 5 web alameni nasıl değiştirecek. Bağlantı
- Daron Yöndem’den ie8 hakkında güzel makaleler. Bağlantı
