Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

IT504 Javascript çerçeveleri Yrd. Doç. Dr. Yuriy Mishchenko.

Benzer bir sunumlar


... konulu sunumlar: "IT504 Javascript çerçeveleri Yrd. Doç. Dr. Yuriy Mishchenko."— Sunum transkripti:

1 IT504 Javascript çerçeveleri Yrd. Doç. Dr. Yuriy Mishchenko

2 Javascript çerçeveleri nedir? Javascript çerçeveleri, RIA geliştirmede kullanılan ve temel Javascript DOM işleri için daha kolay veya komforlu yöntemleri sunan javascript kütüphaneleri 2http://www.scinetcentral.com/~mishchenko/MIT504.html

3 Javascript çerçeveleri nedir? Javascript çerçeveleri HTML veya Javascript DOM'dan ayrı bir teknolojiler değil Javascript çerçeveleri temel olarak HTML, CSS veya Javascript DOM araçları tarafından çözülebilir işleri çözmekte 3http://www.scinetcentral.com/~mishchenko/MIT504.html

4 Javascript çerçeveleri nedir? Javascript çerçeveleri, HTML, CSS ve Javascript DOM araçları, RIA geliştirme için daha mantıklı, kolay ve kullanılabilir yapıda oluşturur Bu yapıları kullanarak tipik RIA geliştirme hızlandırılabilir 4http://www.scinetcentral.com/~mishchenko/MIT504.html

5 Javascript çerçeveleri nedir? Javascript çerçeveleri genellikle bir javascript kütüphane olarak geliştirilip tek veya birkaç.js dosya olarak yayınlanır Javascript çerçevesinden yararlanmak için, ya ilgili js dosyası web sayfanız ile birlikte sunucunuzdan indirilebilir veya genellikle javascript çerçevenin yazarısının web sitesinden HTML script tagındaki "src" komutunu kullanarak direkt olarak bağlanabilir 5http://www.scinetcentral.com/~mishchenko/MIT504.html

6 Javascript çerçevesi kullanım örneği $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); If you click on me, I will disappear. Click me away! Click me too!

7 En önemli javascript çerçeveleri – jQuery – MooTools – Prototype – YUI – DOJO –... 7http://www.scinetcentral.com/~mishchenko/MIT504.html

8 jQuery kod örneği $('#btnSlideUp').click(function() { $('#slideMe').slideUp('slow'); }); $('#btnSlideDown').click(function() { $('#slideMe').slideUp(); }); $('#btnSlideToggle').click(function() { $('#slideMe').slideToggle('fast'); }); Kayan metin kutusu!!!

9 Prototype Kod örneği div { padding: 10px; margin: 5px; border: 1px solid black; width: 75%; } document.observe('dom:loaded', function() { $$('ol#meyveliste li').each(function(elmt) { elmt.observe('click', function(ev) { var listitem = ev.target; var aboveitems = listitem.previousSiblings(); if (aboveitems.length > 0) { var itemtext = aboveitems[0].innerHTML; aboveitems[0].innerHTML = listitem.innerHTML; listitem.innerHTML = itemtext; } }); Elma Armut Muz

10 MootTools Kod örneği css/style.css js/mootools.js window.addEvent('domready', function() { $('mainnav').getElements('li a').each( function(item){ if ( !item.hasClass('clicked') ) { item.setStyle('opacity',0.01).addEvent('mouseenter', function() {this.fade(1)}).addEvent('mouseleave', function(){this.fade(0.01)}); } }) home products contact /#

11 Javascript çerçeveleri nedir? Javascript çerçeveleri tipik olarak standart javascript DOM işleri için farklı araçlar sunar – DOM taranması ve DOM'da navigasyon – DOM hierarşi güncelleştirilmesi – Javascript olay işlemleri ve animasyon – AJAX iletişim – Nesne tabanlı programlama (OOP) ile ilgili işler 11http://www.scinetcentral.com/~mishchenko/MIT504.html

12 Javascript çerçeveleri nedir? – jQuery jQuery en popüler js-çerçevelerinden biridir Temiz dil yapıları, kolay DOM taranması, iyi olay işlem ve animasyon araçları ve AJAX; standart UI kütüphanesi (jquery.ui) Web uygulama hızlandıran araç kolleksiyonu – MooTools OOP tabanlı programlamaya odaklayan js platformu Zengin modüller, nesne ve nesne devralma araçları Javascript için OOP odaklı web uygulama geliştirme çerçevesi – Prototype OOP tabanlı programlamaya odaklayan js platformu Zengin nesneler ve nesne devralma araçları Genişletilmiş DOM, standart DOM elemanlarına yeni metotlar tanımlanmış 12http://www.scinetcentral.com/~mishchenko/MIT504.html

13 jQuery – Cross-platform javascript kütüphanesi – 2006'da John Resig tarafından tasarımlanmış – Şu anda en popüler js çerçevesi, İnternette var olan web sitelerinin %75'inde kullanılmakta ( ) 13http://www.scinetcentral.com/~mishchenko/MIT504.html

14 jQuery jQuery özellikleri: – Kolay DOM elemanlarının taranması – DOMda navigasyon ve DOM elemanları güncelleştirme – CSS selektörler kullanarak DOM taranması – DOM olay işleme – Animasyon – AJAX – JSON analizi – Plug-in'leri kullanarak genişletilmesi – Çarpaz tarayıcı uyumluluk – Standart UI kütüphanesi 14http://www.scinetcentral.com/~mishchenko/MIT504.html

15 jQuery jQuery ana kısımları: – Animasyon efektleri – DOM tarama – DOM güncelleştirme – AJAX işlemeleri – UI aletleri 15http://www.scinetcentral.com/~mishchenko/MIT504.html

16 jQuery temelleri İndirme – Özel kopyası, web sitesinden sunulduğu, (http://jquery.com/download/)http://jquery.com/download/ – jQuery CDN – Google CDN – Microsoft CDN 16http://www.scinetcentral.com/~mishchenko/MIT504.html

17 jQuery temelleri Tipik jquery komutunun yapısı: – $(selectör).eylem(parametreler) Selektör, DOM elemanlarının altkümesini belirtilen bir ifade Eylem, ilgili DOM elemanlarının üzerinde yapılacak işlem – Bu ölçüde, jQuery temel tasarım kavramı ve dil yapıların odak noktası, farklı ve esnek DOM elemanlarının kümeleri üzerinde işlem yapılması dır 17http://www.scinetcentral.com/~mishchenko/MIT504.html

18 jQuery temelleri jQuery selektörleri, DOM hierarşisinde elemanları bulup elde etmek için kullanılır; jQuery selektörleri: – metin satır şeklindedir – CSS selektör notasyonu ile uyumludur – Özel jQuery selektörleri de vardır 18http://www.scinetcentral.com/~mishchenko/MIT504.html

19 jQuery temelleri jQuery selektörleri: – $("a"), CSS tag selektörü (tüm ilgili taglar) – $(".blue"), CSS sınıf selektörü (tüm "class=blue" elemanları) – $("#menu"), CSS id selektörü ("id=menü" elemanı) – $("a.blue"), CSS tag+sınıf selektörü (tüm "class=blue" alan "a" elemanları) – $("ul li a"), CSS iç-içe selektörleri (bir ul içindeki bir li elemanının içinde olan a elemanları) – CSS düzen selektörleri $("div + p") – div yanında olan p elemanları $(".altemenu ~ a") -.altmenu elemanlarının kardeş olan a elemanları – CSS hierarşi selektörleri $(".menu > a") -.menu elemanlarının direkt çocuğu olan a elemanları $("p:first-child") – ana elemanının ilk çocuğu olan p elemanları $("a:first-of-type") – ana elemanının a çocuk-elemanları arasında ilk olan çocuk a elemanı $("a:last-child") - ana elemanının son çocuğu olan p elemanları $("p:last-of-type") – ana elemanının a çocuk-elemanları arasında son olan çocuk a elemanı $("div:nth-child(2)")- ana elemanının 2. çocuğu olan div elemanı $("a:nth-type(2)")- ana elemanının a çocuk-elemanları arasında 2. olan çocuk a elemanı $("ul li:first-child") – ilk olan ul li çocuklar 19http://www.scinetcentral.com/~mishchenko/MIT504.html

20 jQuery temelleri özel selektörler: – $("*"), tüm elemanlar – $(this), şuanki eleman (olay işlemcileri içinde kullanılır) – $("tr:even"), bir tabloda çift satırlar – $("tr:odd"), bir tabloda tek satırlar – $("p:contains('Hello')"), 'Hello' metni içeren p elemanları – $("li:has(.altmenu)"),.altmenu elemanı içeren li elemanları – $("p:hidden"), saklanmış p elemanları – $(":input"), tüm "input" elemanları (form) – $(":button"), tüm "button" ve "input button" elemanları (form) – $(":checkbox"), tüm "checkbox" elemanları (form) – $(":selected"), tüm tıklanmış select veya radiobutton elemanları (form) – $(":checked"), tüm tıklanmış checkbox elemanları (form) – $(":enabled"), tüm "enabled" elemanları (form) 20http://www.scinetcentral.com/~mishchenko/MIT504.html

21 jQuery temelleri özel selektörler: – $("[href]"), href özelliğini tanımlayan elemanlar – $("a[href='değer']"), href='değer' alan a elemanları – $("[href$='.jpg']"), '.jpg' ile biten href özelliğini alan elemanlar – $("[title|='yarın']"), 'yarın'e eşit veya 'yarın-' ile başlayan "title" özelliğini alan elemanlar – $("[title^='bugun']"), 'bugun' ile başlayan title özelliğini alan elemanlar – $("[title~='hello']"), 'hello' kelimesi içeren title özelliğini alan elemanlar – $("[title*='hello']"), 'hello' metni içeren title özelliğini alan elemanlar 21http://www.scinetcentral.com/~mishchenko/MIT504.html

22 jQuery olaylarla çalışma örneği $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); $("p").dblclick(function(){ $(this).hide(); }); $("#p1").mouseenter(function(){ alert("p1 e girdiniz!"); }); $("#p1").mouseleave(function(){ alert("p1 den ayrildiniz"); }); $("#p1").mousedown(function(){ alert("p1 de mousedown!"); }); $("#p1").mouseup(function(){ alert("p1 de mouseup!"); }); }); Tıkandığımda saklanacağım! Ben de!

23 jQuery DOMda navigasyon özel selektörler: – $(selektör).parent(), elemanın ana elemanları – $(selektör).parents(), elemanın tüm yukarıda olan elemanlar (DOM köküne kadar) – $(selektör).parentsUntil(selektör), belirli elemana kadar tüm yukarıdaki ana elemanları 23http://www.scinetcentral.com/~mishchenko/MIT504.html

24 jQuery DOMda navigasyon özel selektörler: – $(selektör).children(), elemanın direkt çocukları – $(selektör).children(selektör), elemanın belirli tipten direkt çocukları – $(selektör).find(selektör), elemanın belirli tipten tüm alttaki çocukları 24http://www.scinetcentral.com/~mishchenko/MIT504.html

25 jQuery DOMda navigasyon özel selektörler: – $(selektör).siblings(), elemanın kardeşleri – $(selektör).siblings(selektör), elemanın belirli tipten kardeşleri – $(selektör).next(), elemanın sonraki kardeş – $(selektör).nextAll(), elemanın tüm sonraki kardeşler – $(selektör).nextUntil(selektör), bir elemana kadar elemanın tüm sonraki kardeşler – $(selektör).prev(), $(selektör).prevAll(), $(selektör).prevUntil(selektör), benzer şekilde 25http://www.scinetcentral.com/~mishchenko/MIT504.html

26 jQuery DOMda navigasyon özel selektörler: – $(selektör).first(), selektör kullanarak elde edilmiş DOM elemanlarının kümesinin ilk elemanı – $(selektör).last(), selektör kullanarak elde edilmiş DOM elemanlarının kümesinin son elemanı – $(selektör).eq(index), selektör kullanarak elde edilmiş DOM elemanlarının kümesinin belirli indexte olan elemanı – $(selektör).filter(selektör), selektör kullanarak elde edilmiş DOM elemanlarının kümesinin altkümesi – $(selektör).not(selektör), filter'nin tersi 26http://www.scinetcentral.com/~mishchenko/MIT504.html

27 jQuery DOMda navigasyon $(document).ready(function(){ $("div p").first().css("background-color","yellow"); }); Ilk paragraf. divde ilk paragraf. divde son paragraf. başka divde ilk paragraf. başka divde son paragraf.

28 jQuery DOMda navigasyon $(document).ready(function(){ $("p").filter(".intro").css("background-color","red"); }); Merhaba Ben Donald Duck'im. Ben Duckburg'de yasiyorum. Ben Duckburg'i seviyorum. Mickey Fare benim en iyi arkadasim!

29 jQuery komutlarının zincirlenmesi jQuery komutlarının sonucu tipik olarak aynı jQuery nesnesidir; bu nedenle jQuery komutları tipik olarak zincirlenebilir 29http://www.scinetcentral.com/~mishchenko/MIT504.html

30 jQuery komutlarının zincirlenmesi $(document).ready(function(){ $("p").filter(".intro").css("background-color","red"); }); Merhaba Ben Donald Duck'im. Ben Duckburg'de yasiyorum. Ben Duckburg'i seviyorum. Mickey Fare benim en iyi arkadasim!

31 jQuery komutlarının zincirlenmesi $(document).ready(function(){ $("p").click(function(){$(this).hide();}).dblclick(function(){$(this).hide();}); $("#p1").mouseenter(function(){alert("p1 e girdiniz!");} ).mouseleave(function(){alert("p1 den ayrildiniz");} ).mousedown(function(){alert("p1 de mousedown!");}).mouseup(function(){alert("p1 de mouseup!");}); }); Tıkandığımda saklanacağım! Ben de!

32 jQuery DOMu güncelletirme DOM güncelleştirme komutları: – $(selektör).text(), elemanın metni elde etmek veya değiştirmek – $(selektör).html(), elemanın html'i elde etmek veya değiştirmek – $(selektör).val(), elemanın value özelliğini elde etmek veya değiştirmek – $(selektör).attr(isim), elemanın "isim"li özelliğini elde etmek veya değiştirmek 32http://www.scinetcentral.com/~mishchenko/MIT504.html

33 jQuery DOMu güncelletirme $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html(" Hello world! "); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); Bu bir paragraf. Bu baska bir paragraf. Input field: Metin değiştir HTML değiştir Value değiştir

34 jQuery DOMu güncelletirme $(document).ready(function(){ $("#but1").click(function(){ $("#w3s").attr("href","http://www.w3schools.com/jquery"); }); $("#but2").click(function(){ $("#w3s").attr({ "href" : "http://www.w3schools.com/jquery", "title" : "W3Schools jQuery Tutorial" }); W3Schools.com href değiştir href ve title değiştir

35 jQuery DOMu güncelletirme DOM güncelleştirme komutları: – $(selektör).append(), elemanın sonuna yeni html ekle – $(selektör).prepend(), elemanın başına yeni html ekle – $(selektör).after(), elemanın sonrasına yeni html – $(selektör).before(), elemanın öncesine yeni html ekle 35http://www.scinetcentral.com/~mishchenko/MIT504.html

36 jQuery DOMu güncelletirme DOM güncelleştirme komutları: – $(selektör).remove(), elemanı sil – $(selektör).empty(), elemanın çocuklarını sil – $(selektör).remove(filtre), belirli elemanlar sil 36http://www.scinetcentral.com/~mishchenko/MIT504.html

37 jQuery DOMu güncelletirme.italic {font-style:italic;} $(document).ready(function(){ $("button").click(function(){ $("p").remove(".italic"); }); Bu bir paragraf Bu italik paragraf italik paragrafları sil

38 jQuery DOMu güncelletirme DOM güncelleştirme komutları: – $(selektör).css(), elemanın stili değiştir – $(selektör).addClass(), elemanlara yeni sınıflar ekle – $(selektör).removeClass(), elemanlardan belirli sınıflar sil 38http://www.scinetcentral.com/~mishchenko/MIT504.html

39 jQuery DOMu güncelletirme $(document).ready(function(){ $("button").click(function(){ alert("Background color = " + $("p").css("background-color")); }); Paragraf Rengi goster

40 jQuery DOMu güncelletirme $(document).ready(function(){ $("button:first-of-type").click(function(){ $("p").first().css("background-color","yellow"); }); $("button:nth-of-type(2)").click(function(){ $("p").css({"background-color":"yellow","font-size":"200%"}); }); Paragraf bir rengi degistir tum renkler ve fontlar degistir

41 jQuery DOMu güncelletirme $(document).ready(function(){ $("button:first-of-type").click(function(){ $("p").first().css("background-color","yellow"); }); $("button:nth-of-type(2)").click(function(){ $("p").css({"background-color":"yellow","font-size":"200%"}); }); Paragraf bir rengi degistir tum renkler ve fontlar degistir

42 jQuery DOMu güncelletirme $(document).ready(function(){ $("button").eq(0).click(function(){ $("p").first().css("background-color","yellow"); }); $("button").eq(1).click(function(){ $("p").css({"background-color":"yellow","font-size":"200%"}); }); Paragraf bir rengi degistir tum renkler ve fontlar degistir

43 jQuery DOMu güncelletirme $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); });.important {font-weight:bold; font-size:xx-large;}.blue { color:blue; } Heading 1 Heading 2 Paragraph 1 Paragraph 2 Önemli metin! Işle

44 jQuery DOMu güncelletirme DOM güncelleştirme komutları (boyutları) – $(selektör).width() – $(selektör).height() – $(selektör).innerWidth() – $(selektör).innerHeight() – $(selektör).outerWidth() – $(selektör).outerHeight() 44http://www.scinetcentral.com/~mishchenko/MIT504.html

45 jQuery Animasyon jQuery saklama komutları – $(selektör).hide(hız,callback-fonksiyonu), sakla – $(selektör).show(hız,callback-fonksiyonu), göster – $(selektör).toggle(hız,callback-fonksiyonu), sakla/göster Callback-fonksiyonu, komut gerçekleştikten sonra çağırılacak fonksiyonun ismi (zorunlu değil) 45http://www.scinetcentral.com/~mishchenko/MIT504.html

46 jQuery Animasyon jQuery saklama komutları – $(selektör).fadeIn(hız,callback-fonksiyonu) – $(selektör).fadeOut(hız,callback-fonksiyonu) – $(selektör).fadeToggle(hız,callback-fonksiyonu) – $(selektör).fadeTo(hız,opacity,callback-fonksiyonu) 46http://www.scinetcentral.com/~mishchenko/MIT504.html

47 jQuery Animasyon jQuery saklama komutları – $(selektör).slideDown(hız,callback-fonksiyonu) – $(selektör).slideUp(hız,callback-fonksiyonu) – $(selektör).slideToggle(hız,callback-fonksiyonu) 47http://www.scinetcentral.com/~mishchenko/MIT504.html

48 jQuery Animasyon $(document).ready(function(){ $("button").click(function(){ $("p").toggle(1000); }); Toggle This is a paragraph with little content. This is another small paragraph.

49 jQuery Animasyon $(document).ready(function(){ $("button").click(function(){ $("p").fadeToggle(1000); }); Toggle This is a paragraph with little content. This is another small paragraph.

50 jQuery Animasyon $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); #panel,#flip {padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;} #panel {padding:50px;display:none;} Kaydır paneli Hello world!

51 jQuery Animasyon İleri animasyon, $(selektör).animate(parametreler,hız,callback- fonksiyonu) komutu kullanarak gerçekleştirilebilir 51http://www.scinetcentral.com/~mishchenko/MIT504.html

52 jQuery Animasyon $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); Calistir

53 jQuery Animasyon $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); //sırayla calisacak animasyon }); Calistir

54 jQuery Animasyon İleri animasyon, $(selektör).stop(stopAll,goToEnd) komutu animasyon durdurmak için kullanılır – stopAll ("true/false") parametresi, tek veya tüm animasyonların durdurulması belirtiyor – goToEnd ("true/false"), animasyonun son haline götürülmesi belirten parametredir 54http://www.scinetcentral.com/~mishchenko/MIT504.html

55 jQuery Animasyon $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); #panel,#flip {padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3;} #panel {padding:50px; display:none;} Kayma durdur Paneli kaydırınız Hello world!

56 jQuery Animasyon $(document).ready(function(){ $("button").click(function(){ $("#p1").css("color","red").slideUp(2000).slideDown(2000,function(){ $("#p1").css("color","black"); }); }); //zincirlenme, komutlar sırayla çalışacak, // ayrıca animasyon sonunda rengi siyaha değiştirecek callback-fonksiyonu da var }); jQuery cok eglenceli!! tikla beni

57 jQuery AJAX jQuery kullanarak AJAX isteklri $(selektör).load(), $.get() ve $.post() komutlarını kullanarak gerçekleştirilir – $(selector).load(URL,data,callback) jQuery load komutu, AJAX isteğin cevabı $(selector) elemanına direkt olarak yazıyor Callback fonksiyonu varsa, veri aldıktan sonra çağırılacak fonksiyondur 57http://www.scinetcentral.com/~mishchenko/MIT504.html

58 jQuery AJAX $(document).ready(function(){ $("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("External content loaded successfully!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); jQuery AJAX bunu degistiricek Veri indir

59 jQuery AJAX $(document).ready(function(){ $("button").click(function(){ $("#div1").load("demo_test.txt");}); }); jQuery AJAX bunu degistiricek Veri indir

60 jQuery AJAX jQuery $.get(), AJAX get isteği göndermek için kullanılır – $.get(URL,callback) jQuery $.post(), AJAX get isteği göndermek için kullanılır – $.post(URL,data,callback) – $.get ve $.post komutları sunucunun cevabını işletmez, cevabın gösterilmesi gerekirse callback- fonksiyonu olarak kullanılmalı 60http://www.scinetcentral.com/~mishchenko/MIT504.html

61 jQuery AJAX $(document).ready(function(){ $("button").click(function(){ $.post("demo_test_post.asp", { name:"Yuriy", city:"Mersin" }, function(data,status){ $("p").html("Veri: " + data + "\nStatus: " + status); }); HTTP POST istegi gonder ve sonucu goster Bekleniyor...

62 jQuery noConflict() komutu jQuery'nin çök önemli bir özelliği, diğer js çerçeveleri ile birlikte çalışabilmesi dir – Eğer diğer js çerçevesi (örneğin MooTools) $ sembolümü kullanmaktaysa, jQuery $.noConflict() komutu jQuery'nin $ sembolüne bağlantısından vazgeçiyor – Bu durumda jQuery hala kullanılabilir, $ sembolü yerinde jQuery nesnesinin açık olarak kullanılmalı, "jQuery(document).ready(function(){..." 62http://www.scinetcentral.com/~mishchenko/MIT504.html

63 Baze jQuery olaylar $(selektör).bind("olay-ismi",işleyici-fonksiyonu) ve $(selektör).on("olay-ismi",işleyici-fonksiyonu), genel olay işleyici atama yöntemi $(selektör).unbind() ve $(selektör).off(), elemanın olay işleyicileri silme yöntemi 63http://www.scinetcentral.com/~mishchenko/MIT504.html

64 jQuery olaylar Diğer baze olaylar: – $(selektör).click() – $(selektör).dblclick() – $(selektör).focus() – $(selektör).hover() – $(selektör).mouseover() – $(selektör).mouseout() – $(selektör).mousedown() – $(selektör).mouseup() – $(selektör).mouseenter() – $(selektör).mouseleave() – $(selektör).keydown() – $(selektör).keyup() –... – (http://www.w3schools.com/Jquery/jquery_ref_events.asp) 64http://www.scinetcentral.com/~mishchenko/MIT504.html

65 jQuery UI jQuery UI, jQuery'nin "standart" kullanıcı arayüzü (User Interface, UI) kütüphanesi (http://jqueryui.com/ veya Direkt olarak bağlanırsa, web sayfası içerisinden şu şekilde kullanılmalı, 65http://www.scinetcentral.com/~mishchenko/MIT504.html

66 jQuery UI jQuery UI tarafından sağlanan UI aletleri: – Accordion – açılan kontainer kutularının sırası – Autocomplete – auto-complete giriş alanları – Button – yeni düğmeler – Datepicker – ileri tarih giriş alanı – Dialog – dialog kutuları – Menu – açılan menüler – Progressbar – progress bar aleti – Slider – slider aleti – Spinner – sayaç giriş alanı – Tabs – tabed kullanıcı arayüzü – Tooltip – fare üzerindeyken yardım 66http://www.scinetcentral.com/~mishchenko/MIT504.html

67 jQuery UI jQuery UI tarafından sağlanan UI aletleri: – Draggable – (kullanıcı tarafından) çekilebilir UI elemanları – Droppable – drag-and-drop UI elemanları – Resizable – boyut değiştirilebilir UI elemanları – Selectable – seçilebilir UI elemanları – Sortable – belirli sırada olan çekilebilir UI elemanları 67http://www.scinetcentral.com/~mishchenko/MIT504.html

68 jQuery UI.ui-menu { width: 100px; font-size:12px; } Menu 1 Menu 1>1 Menu 1>2 Menu 2 Menu 3 Menu 3>1 Menu 3>1>1 Menu 3>1>2 Menu 3>2 $("#menu").menu();

69 Son örnek 69http://www.scinetcentral.com/~mishchenko/MIT504.html

70 jQuery çok eğlenceli #p1 {padding:10px;width:200px;border:solid black 5px;} $(document).ready(function(){ $("#p1").hover(function(){ $(this).text("8-) iceri girdiniz!!!").css({"color":"red","font- weight":"bold","text-align":"center"}); }, function(){ $(this).text("Bye Bye, geri bekliyoruz! :-)").css({"color":"black","font- weight":"normal","text-align":"left"}); }); ustune fare cekin...

71 Egzersiz Son derste paylaşılmış javascript açılan menüsü jQuery kullanarak yeniden yazın (tabi jQuery kullanarak, jQuery UI kullanmadan!)


"IT504 Javascript çerçeveleri Yrd. Doç. Dr. Yuriy Mishchenko." indir ppt

Benzer bir sunumlar


Google Reklamları