Öncelikle merhabalar.. jQuery konusunda son zamanlarda, jQueryDesign ve Zingocan iletişim kutusuyla irtibata geçen, jQuery ile yapılabilecek bir çok kullanışlı gereci soruyorlar.. Tam anlamıyla çoğu maile cevap verememkteyim. Bu nedenle bir kaç adımdan oluşacak bir konu parçacıklarını açmayı uygun gördüm. Bu konu başlığı içerisinde sorularla jquery ve javascript etkenlerini kod olarak açıklayacğım. Continue reading
Bir önceki yazıda Maximize Hover Efektleri olarak adlandırdığımız örnek sitelerde kullanılan jQuery hover metodlarını analatacağım.
CSS ve jQuery Kullnarak oluşturulmuş bir listeleme biçimidir.. jQuery dedik diye illa da hareketlendirme oluşturmamız gerekmiyor tabiki.. Burada jQuery ve CSS nin sonsuz nimetlerinden faydalanarak çok hoş bir sıralı liste yapıcaz..
Bu jquery dersimizde CSS ve jQuery kullanarak sadee ve güzel görünümlü bir saat oluşturacağız.. Demoyu inceledikten sonra kaynak dosyamızı indirip Kolları sıvayalım. Continue reading
jQuery de sayfamıza diğer unsurları ekleyebilmek için iki yol vardır. .insertBefore() ve .before() …
İkiside aynı görevi üstlenmekte, aralarındaki fark ise diğer metodlarla aralarında olan bağlılıktır..(Lütfen terimlerde kasılıp kalmak yerine konuyu okumaya devam ediniz..)
Bir diğer metod çiftimiz ise .insertAfter() ve .after(), bu metodlar da sayfaya içerik eklememizi, sayfada kullanıcıya hitap etmemizi, kullanıcının hareketi ile sayfada ki jquery’nin hayata geçmesini sağlar.. Fakat bu metodların en önemli özelliği diğer tüm elementleri atlayıp kendini gösterebilmesidir.Yani sitede başka bir metod daha kullanılıyorsa insertafter ve after seçenekleri ile biz o metodları hiç görmeden bu iki metodu harekete geçirebiliriz. Örneğin bizim sayfamızda da görüdüğünüz gibi; back to top, yada başa dön olarak adlandırdığımız jquery kalıbını ele alalım.. Back to top elemanını kullanabilmemiz için .insertAfter() seçeneğini kullanmamız gerekiyor. Hemen örneklendirelim;
$(document).ready(function() {
$('<a href="#top">başa dön</a>').insertAfter('div.chapter p');
$('<a id="top"></a>');
});
[ad]
Neden .After() metodunu kullanmadık diye içinizden bir uyartı kopuverirse şöyle söyleyeyim .After() metodu kapsar .insertAfter() metodu.. yani after metodunu kullanabilmemiz için javascript kodlarımızda şöyle bir değişikliğe uğramamız gerekiyor;
$('div.chapter p').after('<a href="#top">başa dön</a>');
Birşeye dikkatinizi çekmek isterim;
.insertAfter metodu ile oluşturduğumuz kodda <a> tarafından korunan link zincirine devam edilebilir. .After() yöntemi ile diğer ek metodlardan öne geçebilmrk için $(‘div.chapter p’) seçicisini kullanmak durumunda kaldk. jQuery mantığıyla düşünürsek aslında paragrafın, sayfanın, bölümün yada biz neyi gösterdiysek onun başına geçebilmesi için sitenin o bölgesine link vermiş oluyoruz.. Link denince sayfa yenilenmesi akla gelebilir fakat jQuery mantığı sayfa yenilemeyi kabul etmediği için bize böyle bir kolaylık tanımıştır.
Evet kodumuzu yazdık fakat bu kodlarla istediğimiz elde edemeyiz.. Çalışmamıza hala id=”top” parametresini kodumuza eklememiz gerekmektedir.
$(document).ready(function() {
$('<a href="#top">başa dön</a>').insertAfter('div.chapter p');
$('<a id="top" name="top"></a>').prependTo('body');
});
Bu ek kodu sayfamızın <body> kısmının sağına (sonrasına) diğer bir deyişlede sayfamızın başına eklememiz gerekiyor. Linkler için .insterAfter, zincir için ise .prependTo() metodları sayesinde artık hemen hemen her sitede gördüğümüz başa dön ibaresini kendi sitemizde dilediğimizce yayınlayabiliriz.
Başa dön bağlantılarını kullandıktan sonra Başa dön ibarelerinin kullanıcıya görünmez olması mantıklı değildir. Back to top (başa dön) kalıbı kullanıcının sürekli kullanabileceği bir kalıp olması dolayısıyla bu konuda buna yer vermeyi düşünmüyorum.. Derslerimiz şimdilik yalnız jquery kodlarımızla geçmektedir farkındayız.. Yakında örnekli sitemizle daha kaliteli dersleri hedefliyorum.. Anlamadığınız yeri sorabilirsiniz.. İlginiz için teşekkürler.
JavaScript ile kayıt olay işleyicileri için genel mekanizma DOM elemanına kişisel bir öznitelik katabilmek demektedir.Bu nasıl bir cümle hiçbir şey anlamadım diyenler için hemen örnek verelim:
Aşağıdaki kodumuz javascript komutumuza bir örnektir..
function doStuff() {
// Bir görevi gerçekleştir...
}
Daha sonra bu komutu HTML belgemize atıyoruz.
<body onload="doStuff();">
Merhaba arkadaşlar.. Jquery Öğretim derslerinde pek bir düzen oturtamadım fakat bi ara bu düzeni vereceğim konulara.. Yer yer aklıma gelen kurallar ve gereksinimlerden bahsedeceğim.. Bu dersimiz de jquery‘de sürekli kullanılan dolar işareti ($) ve içerisine fonksiyonumuzu yerleştirdiğimiz parantez işaretinin nasıl ve nerde kullanılacağını anlatacağım.
Jquery üzerinde hangi seçiciyi kullanmak istersek isteyelim (CSS, XPath ya da daha özel) daima dolar ve parantez işaretleriyle başlamamız gerekmektedir $ ( ) [ istisnalar hariç..]
Diğer konularda da belirttiğim gibi $ ( ) fonksiyonu “for” döngüsüne erişebilmek için kullanılan o grubun elementlerini kaldırabilmek için parantezin içerisinde kullanacağımız kod sayesinde kaldırılır. Parantezin içerisine kullanmak istediğimiz emri verip , kullanıcıya ya da web sayfasına yaptırmak istediğimiz uygulamayı tanımasını sağlarız.
Parantez içerisi için bir kaç örnek vermek gerekirse;
Bir etiket ismi: $(‘p’) bir belgedeki bütün paragrafı oluşturur. (p)
ID: $(‘.bir-ID’) belgedeki ID yi baz alıcak vurguyu belirtir. (bir-ID)
(Sınıf) Class: $(‘bir-class’) belgedeki Class ‘ı baz alıcak vurguyu belirtir. (bir-class)
Fonksiyonu Diğer javascript kütüphanelerinde de kullanabiliriz.
Jquery de dolar işareti $ basit bir stenodur. Çünkü bir $() fonksiyonu Javascript kütüphanesinde çokca ortak kullanılan terimlerdendir. Birden fazla kullanılması da bu kütüphanelerde komutların çakışma sebebidir.Öyle bir kod yazarsınızki Javascript ile zenginleştirdiğiniz sayfa parçacıgı ekrenı yenilediğiniz vakit önünüze boş bir sayfa olarak düşebilir.. Bunun tek sebebi kodların çakışması olmasa da kod yazarlarının sıklıkla karşılaştığı bir sorundur. Biz bu soruna engel olabilmek için $ kodunu jQuery de değiştirerek özel Jquery kodlarımız arasına gömmeliyiz. Yani neden jquery kodlarını stil sayfasında değilde index imizde kullanıyoruz sorusuna tam bir cevap olsa gerek bu açıklama.. Bu tür sorunları ilerde anlatacağım bölümlerde daha fazla yer vereceğim.
(Baş not: Jquery derslerimizi bir eğitim setine dökmek istiyorum sizin de önerileriniz var ise lütfen bize bildiriniz.)
Daha önce kullanmış ve anlatmış olduğum fadein fadeout olaylarını kullanarak bir menü nasıl yapabiliriz onu inceleyelim.
##### Jquery.com Plugin Page
Sebep? Pek çok sitede arama kutucukları vardır. Bu arama kutucuğundaki metin alanının karşısına bir label yerleştirmek yerine, içerisinde “Arama yapın” gibi ibareler yerleştirilir, ve siz metin kutusunu tıkladığınızda o metin kaybolur ve metin alanı sizin istediğiz karakterleri yazmanız için boşalır. Hiç bir şey yazmadan başka bir yere tıklarsanız, metin kutusundaki içerik tekrar eski haline (“Arama yapın”) geri döner.
Site içerisindeki arama kutularına buna benzer bir özellik katmak isterken, ufak bir eklenti oluşturmuş oldum. Yukarıda anlattığım senaryodaki özelliklerin hepsini taşıyor. Ek olarak metin alanına tıkladığınızda onu daha belirgin hale getirmek için ufak bir css biçimlendirmesi de oluşturuyor.
İşte Eklenti Kodu:
(function($) {
$.fn.textboxhelp = function(options){
var defaults = {help: 'Help me!', focuscls:'focus'};
// gelen parametreler ile bizimkini birleştirelim
var opts = $.extend(defaults, options);
$(this).val(opts.help);
$(this).focus(function(){
var t = $(this).val();
// metin alanına odaklanıldığı zaman içeriğini temizleyelim
// eğer daha önce girilmiş bir metin var ve bu varsayılan yardım metini ise
if(t.length > 0 && t opts.help)
$(this).addClass(opts.focuscls).val('');
}).blur(function() {
// girilen metini kontrol için hafızada tutalım
var t = $(this).val();
// eğer metin alanı boşsa yardım metinini tekrar ekleyelim
if('' t)
$(this).removeClass(opts.focuscls).val(opts.help);
});
}
})(jQuery);
Kullanımı:
$().ready(function(){
$('#search').textboxhelp({help:'Arama yapın!'});
});
Burada kullandığımız #search metin alanımızın id parametresi. Eklenti çok basit, eklemeler yapılarak daha değişik davranışlar eklemek mümkün olabilir.
Uygulamanın örneğine ulaşmak için: textbox help
Uygulama dosyalarını indirmek için: textbox-help.zip
Jquery.com Plugin Page
Yüksekliği belli olmayan, ancak kullanıcının ekran çözünürlüğüne göre tam tam sayfa olarak görüntülenecek iframe oluşturmak bir problem. İsteğim, bir sayfa içerisinde bulunan iframe bölümünün sayfanın kalan bölümündeki tüm alanı yukarıdan aşağıya doğru kullanması idi. Bu konuda pek çok script buldum, ancak örneklerde çalılşan scriptler ben uygulama içerisine ekleyince çalızmaz oldu.
Örnekleri kurcalarken bazılarından ufak alıntılarla ufak bir script oluşturdum ve sorunuma çözüm buldum. Aşağıya eklediğim kod, Firefox 3.05, Opera 9.62 ve IE 6 ile denendi ve çalıştığı teyit edildi.
Jquery Iframe full height kodu
$().ready(function(){
var height = document.documentElement.clientHeight;
height -= $('#iframe').get(0).offsetTop; // tam olarak DOM nesnesini döndürür
$('#iframe').height(height);
});