‘jquery’ etiketi için sonuçlar
jQuery ile Basit Sekme Yapımı
Mayıs 25th, 2009 • Comments 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 • Comments 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 • Comments 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 • Comments Haberler
Etiketler: %100 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ı
11 Eylül 2008 web’den seçme haberler
Eylül 11th, 2008 • Comments Haberler
Etiketler: CSS ön eki, css3.0, Google Chrome, ie, jquery, Konumlandırma, menü, upload, WordPress
- jQuery ile yapılmış güzel bir efekt. Bağlantı
- FireFox, Opera ve Webkit’den sonra Internet Explorer’da kendi özel ön ekini CSS özelliklerine eklemiş. Bağlantı
- Partilerin İnternet Stratejileri – hasanyalcin.com Bağlantı
- TechCrunch50′den ilk gün izlenimleri – webrazzi.com Bağlantı
- CSS ile Konumlandırma ilgili güzel bir ipucu uyugulama. Bağlantı
- WordPress 2.6.2 sürümü çıkmış yükselttim. Yaklaşık 5 dakikamı aldı. Bir sorun görünmüyor.
- Form girdi alanlarını maskelemk için jquery ile yapılmış bir script. Bağlantı
- CSS sıfırlama teknikleri hakkında güzel bir makale. Bağlantı
- Google Chrome’dan beklenen 10 şey. Bağlantı
- Web kod yazarları için 20 Firefox eklentisi. Bağlantı
- Güzel <hr> örnekleri. Bağlantı
- Neden Webkit yükselirken Mozilla düşüşe geçti. Bağlantı
- CSS 3.0 çalışmalarını sürdüren grup kenarlık(border) ve ardalan(background) üzerine son çalışmalarını tamamlamış. Bağlantı
- Tek tıklama ile dosya göndermek için jquery eklentisi. Bağlantı
- jQuery ile menü elemanlarına efekt vermek. Bağlantı
- Wordpress Temanızdan Silebileceğiniz 13 Etiket – alemsite.com geçen haberlerde bahsettiğim konuyu Selman Kara Türkçeye çevirmiş. Bağlantı
09 Eylül 2008 web’den seçme haberler
Eylül 9th, 2008 • Comments Haberler
Etiketler: Fix Feed, form, gameQuery, Google Chrome, ie6, jquery, poster, rss, WordPress
- Özel form elemanları tasarlamak. Bağlantı
- Google Chrome ipuçları. Bağlantı
- Google Chrome javascript hata konsolu kodları. Bağlantı
- WordPress temasını geliştirmek ve yenilemek Bağlantı
- WordPress Kurulumu Sonrası Yapılacaklar Listesi – webdeneyimleri.donanimhaber.com Bağlantı
- WordPress sitenizde silmeniz gerek 13 kod. Bağlantı
- gameQuery ile oyun kodlamak. jQuery alt yapısını kullana gameQuery bize oyun kodlamak için kolaylıklar sağlıyor Bağlantı
- Şehriderya Wordpress Teması Huzurlarınızda… – sehriderya.net Bağlantı
- Web tasarımcıları için posterler. Bağlantı
- jQuery öğrenmeye başlamak için. Bağlantı
- Internet Explorer 6 bloklamak için. Bağlantı
- İnternet Tarayıcıları savaşı 2.0 Bağlantı
- eBurhan Fix Feed v1.1 yayınlandı… – eburhan.com Bağlantı
- Internet Explorer 8′deki CSS gelişmeleri. Bağlantı
- Google Chrome’un bilinmeyen yanları. Bağlantı
- SmashingMagazine’den güzel bir WordPress teması daha Agregado. Bağlantı
- 12 adet WordPress RSS eklentisi. Bağlantı
