Dünkü dersimizde jQuery‘de hover metodunu kullanarak resmimizin şeffaflık ayarlarının, mouse hareketi ile değişmesini sağladık. Continue reading
jQuery hover ve chlidren Metodu – Video Ders
14
Tag Archives: jquery öğreniyorum
jQuery Video Dersleri – slide, hide ve fade Metodları
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;
CSS
<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ı
Jquery
</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ı.
Diğer Video Dersleri
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
http://zingocan.com/jquery-video-dersleri-ders1.html
jQuery Extra Seçimli Extra Ajax Dropdown Menü
Demo | Download
Demoyu incelediğinizde gerçekten hayran bırakan ve extra seçim aralıklarıyla, menü açıklamaları ve ajax kullanımıyla göz kabartan menü özellğine sahip.. Şimdiye kadar zingocan.com da verdiğimiz dropdown menülerden en iyisi diyebilirim..Ajax menü, Submenü ve submenü başlıkları, menü içerisinde form oluşturabilme ve header image kullanabilme şansımız var…Ayrıca iki çeşit renk düzenine sahip demo1 ve demo 2 de inceyebilirsiniz.
Hemen scrptin kullanımına geçelim..
Scriptin bağımlılıkları;
optional: jquery.metadata.plugin
optional: jquery.hoverIntent.plugin
aşağıda javascriptimizi çağırıyoruz;
<code>$(".myMenu").buildMenu(
{
template:"menuVoices.jsp",
additionalData:"",
menuWidth:200,
openOnRight:false,
menuSelector: ".menuContainer",
iconPath:"ico/",
hasImages:true,
</code><code> fadeInTime:200,
fadeOutTime:100,
</code><code>adjustLeft:2,
adjustTop:10,
opacity:.95,
shadow:true,</code><code>
closeOnMouseOut:true,</code><code>
closeAfter:500,
minZindex:200,
hoverIntent:0
});</code>
veya aşağıdaki ile asıl menüyü çağırıyoruz;
(bu bağlam opera sistemlerinde tam çalışmayabilir)
<code>$(document).buildContextualMenu(
{
template:"menuVoices.html",
menuWidth:200,
overflow:2,
menuSelector: ".menuContainer",
iconPath:"ico/",
hasImages:false,</code><code>
</code><code> fadeInTime:200,</code>
<code> fadeOutTime:100,</code>
<code> adjustLeft:0,
adjustTop:0,
opacity:.99,
shadow:true,
</code><code>onContextualMenu:function(o,e){}</code>
<code> });</code>
Aşağıda verdiğim kodda menü başlıkları yeralmaktaır;
<code><!-- menu voices --><div><table class="rootVoices" cellspacing='0' cellpadding='0' border='0'><tr> <td menu="menu_12" >ajax menu 1</td> <td menu="menu_2" >menu 2</td> <td menu="menu_3" >menu 3</td> </tr></table> </div> </code> <!– end menu voices –>
ve diğer her submenü için;
<code><!-- example code --><div id="menu_1" class="menu"><a rel="title" >title menu_1.1</a> <!-- menuvoice title-->
<a href="../mb_carusel/carousel.html" target="_blank" img="image.gif" >menu_1.1 (href)</a> <!-- menuvoice with href-->
<a action="document.title=('menu_1.2')" >menu_1.2</a> <!-- menuvoice with js action-->
<a rel="separator"></a> <!-- menuvoice separator-->
<a action="document.title=('menu_1.3')" disabled=true>menu_1.3</a> <!-- menuvoice disabled-->
<a action="document.title=('menu_1.4')" menu="menu_1" img="image.png">menu_1.4</a><!-- menuvoice with js action, image and submenu-->
</div></code>
Bölgelerini kendinize göre değişerek sonuca ulaşınız..Teşekkürler..İşte Örnekler;
Demo | Download
Demo | Download
jQuery Slidedeck Slayt Content Slayt Manşet
jQuery Slider özelliği kullanılarak hazırlanmış SlideDeck olarak adlandırılmış, Slide Content yada slayt manşet vb. gibi isimlendirebileceğimiz, her zamanki jquery slayt elemanlarımızdan bir diğeridir..
Kullanımı güzel ve wordpress temasına entegre edilebilir durumda.
Jquery Sayfaya Yeni elementler eklemek – Başa Dön ibaresi
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.