Tag Archives: jquery learning

jQuery Video Dersleri – slide, hide ve fade Metodları

Posted on by
19

http://zingocan.com/wp-content/uploads/rolleve2r.png

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

http://zingocan.com/wp-content/uploads/demo1.png

http://zingocan.com/wp-content/uploads/download.pnghttp://zingocan.com/wp-content/uploads/vdownload1.png

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

&lt;/p&gt;
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;script type=&quot;text/javascript&quot;&gt;

$(function()  {
$('a').click(function() {
$('#kutu').slideDown ('6000');
$('p a').css('color' , 'green');
});

});
&lt;/script&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: left;&quot;&gt;

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 Video Dersleri – jQuery Başlangıç

Posted on by
25

http://zingocan.com/wp-content/uploads/jquery.png

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

http://zingocan.com/wp-content/uploads/demo1.png

http://zingocan.com/wp-content/uploads/download.pnghttp://zingocan.com/wp-content/uploads/vdownload1.png

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.

&lt;script src=&quot;jquery.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

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


jQuery Extra Seçimli Extra Ajax Dropdown Menü

Posted on by
Reply

http://zingocan.com/wp-content/uploads/4.png

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.

http://zingocan.com/wp-content/uploads/6.png

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;


&lt;code&gt;$(&quot;.myMenu&quot;).buildMenu(
 {
 template:&quot;menuVoices.jsp&quot;,
 additionalData:&quot;&quot;,
 menuWidth:200,
 openOnRight:false,
 menuSelector: &quot;.menuContainer&quot;,
 iconPath:&quot;ico/&quot;,
 hasImages:true,
 &lt;/code&gt;&lt;code&gt; fadeInTime:200,
 fadeOutTime:100,
 &lt;/code&gt;&lt;code&gt;adjustLeft:2,
 adjustTop:10,
 opacity:.95,
 shadow:true,&lt;/code&gt;&lt;code&gt;
 closeOnMouseOut:true,&lt;/code&gt;&lt;code&gt;
 closeAfter:500,
 minZindex:200,
 hoverIntent:0
 });&lt;/code&gt;

http://zingocan.com/wp-content/uploads/1.png

veya aşağıdaki ile asıl menüyü çağırıyoruz;

(bu bağlam opera sistemlerinde tam çalışmayabilir)


&lt;code&gt;$(document).buildContextualMenu(
 {
 template:&quot;menuVoices.html&quot;,
 menuWidth:200,
 overflow:2,
 menuSelector: &quot;.menuContainer&quot;,
 iconPath:&quot;ico/&quot;,
 hasImages:false,&lt;/code&gt;&lt;code&gt;
 &lt;/code&gt;&lt;code&gt; fadeInTime:200,&lt;/code&gt;
 &lt;code&gt; fadeOutTime:100,&lt;/code&gt;
 &lt;code&gt; adjustLeft:0,
 adjustTop:0,
 opacity:.99,
 shadow:true,
 &lt;/code&gt;&lt;code&gt;onContextualMenu:function(o,e){}&lt;/code&gt;
 &lt;code&gt; });&lt;/code&gt;

Aşağıda verdiğim kodda menü başlıkları yeralmaktaır;


&lt;code&gt;&lt;!-- menu voices --&gt;&lt;div&gt;&lt;table  class=&quot;rootVoices&quot; cellspacing='0' cellpadding='0'  border='0'&gt;&lt;tr&gt;
 &lt;td menu=&quot;menu_12&quot; &gt;ajax menu 1&lt;/td&gt;
 &lt;td menu=&quot;menu_2&quot; &gt;menu 2&lt;/td&gt;
 &lt;td menu=&quot;menu_3&quot; &gt;menu 3&lt;/td&gt;
 &lt;/tr&gt;&lt;/table&gt;
 &lt;/div&gt;
 &lt;/code&gt;
 &lt;!– end menu voices –&gt;

ve diğer her submenü için;


&lt;code&gt;&lt;!-- example code --&gt;&lt;div id=&quot;menu_1&quot;  class=&quot;menu&quot;&gt;&lt;a rel=&quot;title&quot; &gt;title menu_1.1&lt;/a&gt; &lt;!--  menuvoice title--&gt;
 &lt;a href=&quot;../mb_carusel/carousel.html&quot; target=&quot;_blank&quot; img=&quot;image.gif&quot;  &gt;menu_1.1 (href)&lt;/a&gt; &lt;!-- menuvoice with href--&gt;
 &lt;a action=&quot;document.title=('menu_1.2')&quot; &gt;menu_1.2&lt;/a&gt;  &lt;!-- menuvoice with js action--&gt;
 &lt;a rel=&quot;separator&quot;&gt;&lt;/a&gt; &lt;!-- menuvoice separator--&gt;
 &lt;a action=&quot;document.title=('menu_1.3')&quot;  disabled=true&gt;menu_1.3&lt;/a&gt; &lt;!-- menuvoice disabled--&gt;
 &lt;a action=&quot;document.title=('menu_1.4')&quot; menu=&quot;menu_1&quot;  img=&quot;image.png&quot;&gt;menu_1.4&lt;/a&gt;&lt;!-- menuvoice with js action,  image and submenu--&gt;
 &lt;/div&gt;&lt;/code&gt;

http://zingocan.com/wp-content/uploads/5.png

Bölgelerini kendinize göre değişerek sonuca ulaşınız..Teşekkürler..İşte Örnekler;

Demo |  Download

http://zingocan.com/wp-content/uploads/3.png

http://zingocan.com/wp-content/uploads/2.png

Demo |  Download

Jquery Sayfaya Yeni elementler eklemek – Başa Dön ibaresi

Posted on by
Reply

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() {
$('&lt;a href=&quot;#top&quot;&gt;başa dön&lt;/a&gt;').insertAfter('div.chapter p');
$('&lt;a id=&quot;top&quot;&gt;&lt;/a&gt;');
});

[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('&lt;a href=&quot;#top&quot;&gt;başa dön&lt;/a&gt;');

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() {
$('&lt;a href=&quot;#top&quot;&gt;başa dön&lt;/a&gt;').insertAfter('div.chapter p');
$('&lt;a id=&quot;top&quot; name=&quot;top&quot;&gt;&lt;/a&gt;').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.