Kategori: jQuery

Köpeğim çomar ve arkadaşları için küçük bir sayfa hazırlamayı planlıyordum.. Ve bu sayfayı hazırlarken de dersini çekmeye karar verdim.. Derste yaptığımız şey, tam sayfa olmak üzere sayfalar arası animasyonlu geçiş.. Yararlı olması dileğiyle..

Sonradan Eklenenler;

Videoda kaldığı yerden devam etmeme hatası vardı.. Bunu aşağıdaki kod ile düzelttim;

/* otomatik olana gitsin */
setTimeout(function(){
	indis = Math.ceil( $('body').scrollTop() / $.height() );
	$('.solMenu ul li').removeClass('aktif').eq( indis ).addClass('aktif');
	$('body').scrollTop( $.height() * indis );
}, 100);

Ve ek olarakta klavye aşağı ve yukarı yön tuşlarını kullanarakta geçiş yaptırdım.. Onlar içinde aşağıdaki kodları kullandım;

/* klavye yön tuşları hareketi */
$.oynat = function(e){
	evt = e || window.event;
	if ( evt.keyCode == 40 || evt.keyCode == 38 ) $('.solMenu ul li').removeClass('aktif');
	/* Aşağı Yön Tuşu */
	if ( evt.keyCode == 40 ){
		if ( indis < $('.blok').length - 1 ) indis++;
		$('.solMenu ul li:eq('+ indis +')').addClass('aktif');
		$('html, body').stop().animate({
			scrollTop: $.height() * indis
		}, {
			duration: 1000
		});
	}
	/* Yukarı Yön Tuşu */
	else if ( evt.keyCode == 38 ){
		if ( indis > 0 ) indis--;
		$('.solMenu ul li:eq('+ indis +')').addClass('aktif');
		$('html, body').stop().animate({
			scrollTop: $.height() * indis
		}, {
			duration: 1000
		});
	}
}

Tabi bu bir fonksiyon.. Body etiketine onkeydown=”$.oynat(event)” şeklinde olayı tanımladım.. Ve birde indis değişkenini genel tanımlayıp tıklamada ve klavye yön tuşlarında otomatik değerini değiştirdim ki nereden kaldıysa oradan devam edebilsin diye.. Kodları incelediğinizde zaten açık ve net görebilirsiniz.

İndir

http://yadi.sk/d/IgV9a6J74-dYm

jQuery UI kütüphanesinin olup olmadığını ve versiyonunu nasıl öğreneceğinizi merak ediyorsanız konuya göz atabilirsiniz..jQuery UI kütüphanesinin olup olmadığını ve versiyonunu nasıl öğreneceğinizi merak ediyorsanız aşağıdaki kodlar işinize yarayacaktır;

if ( $.ui ){
    alert('UI Kütüphanesi Mevcut!');
    alert('Versiyon: ' + $.ui.version );
}
else
{
    alert('UI Kütüphanesini Yükleyin!');
}

Mevcut jquery kütüphanesinin sürümünü bulmak istiyorsanız konuya bir göz atmanızda fayda var ????Mevcut jquery kütüphanesinin sürümünü bulmak istiyorsanız aşağıdaki kodlar işinize yarayacaktır;

var versiyon = $().jquery;
alert( versiyon ); // 1.9.1

var versiyon = jQuery.fn.jquery;
alert( versiyon ); // 1.9.1

jQuery’de yaptığımız işlemlerin daha performanslı çalışması için farklı farklı yöntemler bulunmakta. Bende bu yöntemlerden bir tanesini sizlere göstereceğim.

Ayrıca birçok performans testi için;
http://jsperf.com/browse

Örnek;

// 136ms
console.time('test');
for ( i = 1; i <= 1000; i++ ){
	$('.box').text(i);
}
console.timeEnd('test');

// 99ms
console.time('test_cache');
var box = $('.box');
for ( i = 1; i <= 1000; i++ ){
	box.text(i);
}
console.timeEnd('test_cache');

Bu yazımda jQuery 1.9 versiyonu ile gelen bazı yeni metodlardan ve eski metodlardaki güncellemelerden bahsedeceğim.

.css()
Bildiğiniz gibi css metodu içerisinde özellik adını yazıp o özelliğin değerine ulaşabiliyorduk. Artık 1.9 ile bu özellikleri dizi halinde tanımlayıp birden fazla özelliğin değerine tek seferde dizi olarak ulaşabiliyoruz.

.finish()
1.9 ile gelen ve animasyonları bitirmek için kullanılan bir metoddur. Çalışan hali hazırda animasyonu sonlandırmak için kullanılır. Yani bu metod uygulandığında animasyon işlemini tamamlamış olur, sıralı tüm animasyonlarda kaldırılır. Küçük bir örnek ile anlamak için;

:first-of-type
1.9 ile gelen ve benimde çok sevdiğim yeni bir filtre.. Örnek ile ne işe yaradığını açıklayayım.. Örneğin her div içerisinde ki ilk span’ı seçip işlem yapmak istiyorsunuz.. Bunu şu kodla yapmanız sadeece ilki için işe yarayacaktır;

$("div span:first")

Ancak :first yerine bu filtreyi kullandığınızda div nesnesini döngüye sokup ilk span nesnelerini seçip işlem yapıyor.. Yani sizi böyle güzel bir zahmetten kurtarıyor ????

:last-of-type
:last filtresinin :first-of-type’ıdır ???? Yani ilk nesneyi döngüye sokarak 2. nesnenin sonuncularını seçip işlem yapmamızı sağlar. Yukarıdakinin tam tersidir kısaca.

:lang
1.9 ile gelen ve language niteliğine sahip nesneleri filtremek, seçmek için kullanılan filtre, seçicidir.

:nth-last-child()
1.9 ile gelen ve girilen nesnede son’dan x.ci nesneyi seçmemizi sağlayan filtre, metoddur.

:nth-last-of-type()
“nth-last-child” ile aynı sonucu veren farklı bir metod. Daha iyi kavramak için farklı bir örnek verelim;

$("div span:nth-last-of-type(2n + 1)")

Bu şekilde seçilen nesneler şu mantıkla seçilecek.. Önce 1.si seçilecek.. Daha sonra +2 eklenip 3.sü +2 eklenip 5.si +2 eklenip 7.si gibi seçilmeye devam edilecek.

:nth-of-type()
1.9 ile gelen ve seçilen nesne içerisinde gelen 2. nesneyi seçmeyi sağlar.. Bu tanım pek yeterli olmayabilir, şöyle örnek vereyim..
div’ler içerisinde spanların olduğunu düşünün.. örneğin span’dan sonra gelen nesne her ne ise onu seçmek istiyorsunuz. Ama sadece ilk span için bunu uygulamak istiyorsunuz. Ve eğer span var ama ondan sonra bir nesne yoksa işlem yapmamasını istiyorsunuz. İşte o zaman bu metodu kullanıyorsunuz ????

:only-of-type
1.9 ile gelen ve hiçbir kardeş öğesi bulunmayan nesneyi seçmemizi sağlar..

Not: 1.9 versiyonda kaldırılan metodlara bakmak için aşağıdaki linki kullanın;
http://jquery.com/upgrade-guide/1.9/#changes-of-note-in-jquery-1-9

Daha fazlası için;
http://api.jquery.com/category/version/1.9/

Bu dersimizde jquery ile arkaplan ve yazı renklerinde animasyonlu bir şekilde nasıl renk geçişi yapabileceğimizi öğreneceğiz.. Yararlı olması dileğiyle..

İndir: http://yadi.sk/d/zUL8bmAy1Yktb

Yirmi dördüncü jQuery dersimizde aşağıdakileri öğrendik;
– is() Metodu
– replaceWith() Metodu
– blur() Metodu

Yirmi üçüncü jQuery dersinde aşağıdakileri öğrendik;
– jQuery has Metodu
– jQuery children Metodu
– jQuery prev Metodu

.has() Metodu
Seçilen nesne içerisinde, has metoduna geçirilmiş nesnenin olup olmadığını bulmamızı sağlar.. Örneğin div içinde strong nesnesi olup olmadığını kontrol edelim;

if ($("div").has("strong").length){
    alert("strong nesnesi bulundu!");
}

.children() Metodu
Seçilen nesne içerisinde ki, çocuk nesneleri seçmemizi ve işlem yapmamızı sağlar. Örneğin div içerisindeki tüm çocuk nesneleri seçip renklerini değiştirelim;

$("div").children().css("color","red");

Ya da sadece strong çocuk nesneleri seçip renk değiştirelim;

$("div").children("strong").css("color","blue");

Ya da kaç tane çocuk seçicisi olduğunu öğrenelim;

alert($("div").children().length);

.prev() Metodu
Seçilen nesneden bir önceki nesneyi seçmemizi sağlar. Örneğin div nesnesinden önce hangi nesne varsa onu seçip arkaplan rengini değiştirelim;

$("div").prev().css("background","yellow");

Ya da şöyle bir koşulumuz olsun.. Div nesnesinden hemen önce eğer a nesnesi varsa onu seçip işlem yapalım, a nesnesi değilde başka bir nesne varsa işlem yapmayalım;

$("div").prev("a").css("background","red");

Uzun bir süre önce çektiğim dersleri yeniden yükledim.. Bu dersler ile projelerinizin mobil versiyonlarını hazırlayabilirsiniz.. Bunu jQuery Mobile Framework’ünü kullanarak kolayca yapabiliyorsunuz, zaten dersleri incelediğinizde ne kadar kolay olduğunu anlayacaksınız ???? Yararlı olması dileğiyle.

Giriş Dersi;

Veri alışverişi için kullandığımız data’ların niteliklerini bu bölümde inceleyeceğiz.. Yazı olarak türkçeleştirdiğim dökümanıda sizler için ekliyorum;

Button (data-role=”button”)

data-corners = ovallikleri ayarlamamızı sağlar.. Sabit değeri true’dur.. Ve true | false değerleri alabilir.. False değeri aldığında ovallikler kalkacaktır.
data-icon = Nesneye bazı belli başlı ikonları atamamızı sağlar.. Bu niteliğe değer olarak şunları girebiliriz; (home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search)
data-iconpos = Nesneye uygulanan ikonun pozisyonunu belirler.. Alabileceği değerler (left | right | top | bottom | notext)’dir.. Sabit değeri left’dir.. Ve notext olarak belirlendiğinde nesnede sadece ikon kalacaktır.. Adı üstünde metinsiz = no text ????
data-iconshadow = Nesneye uygulanan ikonun gölgesinin varolup olmayacağını belirliyoruz.. Sabit değeri true’dur. Alabileceği değerler (true | false)’dur. False değerini uyguladığınızda birşey değişmiyormuş gibi gelebilir ilk etapta, o yüzden ikona yakınlaşın ve dikkatlice bakın gölgenin gittiğini göreceksiniz ????
data-inline = Bu nitelikle nesneyi blok seviyesinden satıriçi (inline) seviyesine getiriyoruz.. Yani nesnenin genişliği içerdiği içeriğe bağlı olarak artıp, azalıyor.. Sabit değeri false’dır.. Alabileceği değerler ise (true | false).. True değeri belirlendiğinde nesne satıriçi hale gelir.
data-shadow = Nesnenin gölgesinin varolup olmayacağını belirleriz.. Sabit değeri true’dur. Alabileceği değerler ise (true | false)..
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise c’dır.

Checkbox (data-role gerektirmez)

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
Not: Tipi checkbox olması yetmiyor inputun.. Ayrıca id’si olmalı ve bu id’ye ait labeli oluşturulmalı.. Örnek verecek olursam;

<input type="checkbox" id="prototurk" />
<label for="prototurk">Kuralları Kabul Et</label>

Collapsible (data-role=”collapsible”)

data-collapsed = Açılır içeriğin otomatik olarak açık gelip gelmeyeceğini bu nitelik ile belirleriz.. Sabit değeri true’dur.. Yani bunun anlamı içerik kapalı gelsin tıklandığında açılsındır kısaca ???? False yaparsak açık gelecektir.. Tıklandığında yine kapanabilme özelliği var. Alabildiği değerler (true | false)
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
data-content-theme = Nesnenin kapalı olan içeriğinin temasını değiştirmek için kullanılır.. Yani tıkladığımızda açılacak olan nesnenin teması ???? Alabileceği değerler data-theme niteliğindekiler ile aynıdır. (a | b | c | d | e)..

Collapsible set (data-role=”collapsible-set”)

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
data-content-theme = Nesnenin kapalı olan içeriğinin temasını değiştirmek için kullanılır.. Yani tıkladığımızda açılacak olan nesnenin teması ???? Alabileceği değerler data-theme niteliğindekiler ile aynıdır. (a | b | c | d | e).. (Ufak bir hatırlatma yapayım bunu ayarladığınızda birşey değişmiyorsa daha önce siz collapsible’da tema atadığınızdan olabilir)

Dialog (data-role=”page” için data-rel=”dialog”)

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
(Birkaç niteliği daha var.. Ancak çalışmadığı ya da henüz ben çalıştıramadığım için eklemedim.. Bunlara jquerymobile.com’da docs bölümünden bakabilirsiniz.)

Content (data-role=”content”)

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Field container (data-role=”fieldcontain”)

label ile form elemanlarının yanyana dizilmesini sağlar.

Flip toggle switch (data-role=”slider”)

Bu nitelik select tagına uygulanıyor..
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
data-track-theme = Select’deki değer değiştikten sonraki kısmın rengini belirler.. Alabileceği değerler data-theme ile aynıdır.

Footer (data-role=”footer”)

Adının evrenselliğinden bileceğiniz gibi sayfanın en altını temsil eder ????
data-id = Benzersiz bir kimlik atayıp düzenlemek isterseniz bu niteliği kullanabilirsiniz.
data-position = Footer’ın pozisyonunu belirler.. Tek bir değeri vardır oda fixed’dır.. Yani içerik kaysa bile footerın altta sabit kalmasını sağlar..
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Header (data-role=”header”)

Adının evrenselliğinden bileceğiniz gibi sayfanın en üstünü temsil eder ????
data-position = Header’ın pozisyonunu belirler.. Tek bir değeri vardır oda fixed’dır.. Yani içerik kaysa bile headerın üstte sabit kalmasını sağlar..
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Link (data-role=”button”)

data-ajax = Bu değer sabit olarak true’dur.. Eğer false atanırsa ajax etkileşimi duracaktır.. Normal bir link gibi sayfa yenilenerek geçiş yapılacaktır. Alabileceği değerler (true | false)
data-rel = Bu nitelik 3 değer alır.. Bunlar (back | dialog | external).. “back” yazılırsa bir önceki sayfaya geri döndürme linki oluşturmuş oluruz.. “dialog” yazılırsa açılacak linki dialog penceresinde açtırmış oluruz.. “external” yazılırada herhangi bir dış bağlantıya gideceğimizi belirtiriz ????
data-transition = Veri geçişi anlamına gelen bu nitelik ile sayfalar arası nasıl geçiş yapacağımızı belirliyoruz.. Alabileceği değerler (slide | slideup | slidedown | pop | fade | flip).. Sabit değeri slide’dır.

Listview (data-role=”listview”)

Adındanda anlaşılacağı üzere bu nitelik listeler içindir.
data-dividertheme = Listeleri bölen başlık olarak belirlenmiş (data-role=”list-divider”) listelerin temasını değiştirmek için kullanılır. Alabildiği değerler (a | b | c | d | e)..
data-filter = Listelerde filtreleme yapmak istersek bu niteliğe true değerini verebiliriz.. Böylece bir arama kutusu belirir ve burada filtreleyerek listelerde arama yapabiliriz.
data-filter-placeholder = filtrelemek için çıkan arama kutusunun default yazısını değiştirir.. placeholder niteliğini bilenler bilecektir ????
data-filter-theme = filtremele için çıkan arama kutusunun temasını değiştirmek için kullanılır.. Alabileceği değerler tahmin ettiğiniz gibi (a | b | c | d | e)..
data-inset = Türkçe karşılığını ifade ediyormu bilmiyorum ama true değerini verirseniz listenizi adam ediyor diyebiliriz ???? margini ayarlıyor, köşeleri yuvarlıyor, kutunuza gölge veriyor vs…
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Listview

Adındanda anlaşılacağı üzere bu nitelik listeler içindir. Sadece li tagları için daha doğrusu ????
data-role = li taglarında başlık yapmak istediğimize bu niteliği atayıp değer olarakda list-divider yazarız.. 
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Page (data-role=”page”)

data-overlay-theme = sayfa dialog ile açıldığında sayfanın temasını belirleyebiliriz.. Alacağı değerler (a | b | c | d | e)
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
data-title = Dialog ile sayfa açıldığında title’ı dinamik olarak değiştirmek için kullanılır.. Başlık girilir değer olarak ????

Radio button (type=”radio”)

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Select

data-icon = Select’in ikonunu değiştirmek için bu niteliği kullanırız.. Alabileceği değerler (home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search)
data-iconpos = İkonun pozisyonunu belirlemek için bu niteliği kullanırız.. Alabileceği değerler (left | right | top | bottom | notext).. Sabit değeri right’dır.
data-inline = Select’i blok seviyesinden satıriçi (inline) seviyesine getirmek için bu niteliğe true değerini vermemiz yeterlidir.. Böylece selectin genişliği içerdiği içerik kadar olacaktır. Aldığı değerler (true |false).. Sabit değeri false’dır.
data-native-menu = Select’e bastığımızda açılan kısmı menü şeklinde göstermek istersek bu niteliğe false değerini atamamız gerekir.. Alabileceği değerler (true | false).. Sabit değeri ise true’dur.
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Slider (type=”range”)

Ve işte input slider ???? iPhone’de sıkça kullanılan bir form elemanı bilirsiniz.. İnput’un type niteliği range olmalıdır. Ayrıca value, min ve max nitelikleride belirlenmelidir.. Kod;

<input type="range" name="slider" value="60" min="0" max="100" />

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
data-track-theme = slider’ın arka kısmının temasını ayarlamak için kullanılır. Alacağı değerler data-theme ile aynıdır.

Tema Yapımı;