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..
Daha önceki jQuery örneklerinde nesneleri kaybedebilme, sürükleme ve fade metodları ile harektlendirme katmıştık.Bu derste animate metodu ile oluşturduğumuz katmana çeşitli hareketlendirmeleri nasıl katacağımızı gösterdim. Continue reading
Merhaba arkadaşlar. İlk dersimizde jQuery’i kullanabilmek için ne gibi alanlardan faydalanabiliriz, jquery‘i sitemize nasıl import ederiz ve fadeOut yöntemini nasıl kullanırız sorularını cevapladık.Bu dersimizde ise jQuery‘de kullanabileceğimiz;
fadeOut, fadeIn, slideUp, slideDown, hide ve show metodlarını gösterdim.Daha kaliteli Görüntü için Videoyu indiriniz
Ben video izlemek istemiyorum diyen arkadaşlarımız için kısa bir özet geçeceğim.Download butonunu kullanarak indirdiğiniz ders içeriğinde, index.html ve jquery.js dosyasını bulacaksınız.
İndex’imizin içerisinde aşağıdaki bölümleri kullandık;
<style type="text/css">
#kutu
{
background: orange;
width: 550px;
height: 520px;
display: none;
}
p a
{
color: orange;
}
</style>
Bir önceki dersimize nazaran bu dersteki CSS farklılıkları;
display: none; :
kutu olarak adlandırdığımız katmanın görünmemesini sağladı.
p a
{
color: orange;
}
<p> olarak kullandığımız paragraf belirtecinin içerisindeki link renklerini turuncu (orange) yapmamızı sağladı
</p>
<p style="text-align: left;"><script type="text/javascript">
$(function() {
$('a').click(function() {
$('#kutu').slideDown ('6000');
$('p a').css('color' , 'green');
});
});
</script></p>
<p style="text-align: left;">
Bir önceki dersimizde gördüğümüz fadeOut yöntemini bu dersimizde slide ve hide / show metordlarıyla gösterdik.
Daha sonra
$(‘p a’).css(‘color’ , ‘green’);
olarak belirttiğimiz fonksiyon, linklerimizden herhangi birine tıklanıldıktan sonra,css kodlarında belirttiğimiz p a belirtecinin rengini green olarak değiştirmesini sağladı.
Ders 1- jQuery Başlangıç
Ders 2 -Fade, Slide hide -show Metodları
Ders 3 -Animate Metodu
Ders 4 – Varyasyon Oluşturma
Ders 5 - toggle ve toggleClass Metodları
Ders 6 - jQuery Slidedown Metodu Kullanımı
Ders 7 - jQuery Dersleri: hover() Metodu
Ders 8 - jQuery hover ve chlidren Metodu
Ders 9 – Chaniable – Animate Metodu ile Nesne Hareketlendirme
Merhaba arkadaşlar.. Bildirgec‘ te ve blogumuzda pm olarak özel istekte bulunan arkadaşlara yöenlik jQuery yeni başlayanlar için dersler hazırlayacağım. Bu konumuzda jQuery öğrenebilmek içni ilk derimizdir.
İlk başta Video ya geçmeden önce jQuery kullanabilmek için jquery resmi sitesinden jQuery Javascript dosyasını indiriniz.Daha sonra Video’yu izleyerek jQuery kalıpları nasıl oluşturulur ve ilk olarak nereden başlamalıyız sorularınıza cevap alabilirsiniz.. Umarım faydalı bir kaynak olmuştur..Daha kaliteli Görüntü için Videoyu indiriniz
jQuery kullanabilmek için videodada gösterdiğim gibi jquery.com sitesinden indirdiğiniz jquery.js dosyası eğer index.html olarak kullandığımız sayfamız ile aynı klasördeyse (farklı klasördeyse yolunu belirtmeniz gerekiyor)aşağıdaki kodu <head> .. </head> tagları arasına giriniz ve videoda gösterdiğim uygulamaları html dosyanıza işleyiniz.
<script src="jquery.js" type="text/javascript"></script>
Ders 1- jQuery Başlangıç
Ders 2 -Fade, Slide hide -show Metodları
Ders 3 -Animate Metodu
Ders 4 – Varyasyon Oluşturma
Ders 5 - toggle ve toggleClass Metodları
Ders 6 - jQuery Slidedown Metodu Kullanımı
Ders 7 - jQuery Dersleri: hover() Metodu
Ders 8 - jQuery hover ve chlidren Metodu
Ders 9 – Chaniable – Animate Metodu ile Nesne Hareketlendirme
Merhaba arakdaşlar.. Bugün itibariyle video derslere başlamış bulunuyorum.. Çekim esnasında bir kaç hata yaptım fakat bunları çekim dışında düzenledim artık hatalarımı maruz görünüz:)
Ben video içeriği dışında bir kaç bilgi daha vermek istiyorum;
Rollever yapıyı oluşturabilmek için videodada göründüğü gibi bir fonksiyon oluşturduk. Fonksiyonumuzun asıl mantığı ilk başta görünen resmin daha sonra mouse ile üzerine geldiğimiz zaman transparanlık kazanım ve en sonunda opacity ayarlarının 0 ‘ a düşmesini sağlıyor, arka kısımda bulunan background resmimizi ortaya çıkarıyor.. Aslında zaten bir backgorund resmimiz vardı fakat üzerinde bir resim olduğu için görünmüyordu, resmin opacity ayarını düşürdüğümüz için arkaplanımız ortaya çıktı.
Kodlarımız şu şelilde;
<pre><span class="tag"><img </span><span class="atn">class</span><span class="tag">=</span><span class="atv">"fade"</span><span class="tag"> </span><span class="atn">src</span><span class="tag">=</span><span class="atv">"images/who.jpg"</span><span class="tag"> </span><span class="atn">style</span><span class="tag">=</span><span class="embsrc"><span class="pun">"</span><span class="pln">background</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">(</span><span class="pln">images</span><span class="pun">/</span><span class="pln">who_ro</span><span class="pun">.</span><span class="pln">jpg</span><span class="pun">);</span><span class="str">"</span></span><span class="tag"> </span><span class="atn">/</span><span class="tag">></span></pre>
CSS sınıflarında backgorund-image olarak adlandırılan ismi kendi isteğinize göre değişebilirsiniz.Resmimizin pozisyounu float: right seçeneğini kullanarak istediğimiz gibi efect verebiliriz. İstersek resmin bir kısmını gösterip diğer kısımları transparan yaparak backgorund resmimizle birlikte çalışmasına izin verebiliriz. Fakat CSS sınıflarında bir değişiklik yaparsak bunlara yeni boyut kazandırıp, HTML kodlarımız arasında ki div komutunu yaptığımız stile göre değiştirmemiz gerekir.
1. Span daki wrap resmi (resmin pozisyonunu belirten kod)
2. background-image kodundaki arkaplan resmini ortaya çıkarma
3. Yeni bir resim olarak gösterme
4. Hover efecti ile resme animasyon katma:
(function ($) {
$.fn.cross = function (options) {
return this.each(function (i) {
var $$ = $(this);
var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
$$.wrap('<span style="position: relative;"></span>')
.parent()
.prepend('<img>')
.find(':first-child')
.attr('src', target);
if ($.browser.msie || $.browser.mozilla) {
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : this.offsetTop
});
} else if ($.browser.opera && $.browser.version < 9.5) {
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : "0"
});
} else { // Safari
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : ''
});
}
$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 250);
}, function () {
$$.stop().animate({
opacity: 1
}, 250);
});
});
};
})(jQuery);
$(window).bind('load', function () {
$('img.fade').cross();
});
Aklınıza takılan herhangi bir soru olursa ben buradayım.. Bu ilk videolu jquery dersimdi.. kusurlarım varsa madur görünüz. Heycandandır 
<img class="fade" src="images/who.jpg" style="background: url(images/who_ro.jpg);" />