Podstawy jQuery w aplikacjach ASP.NET Web Forms Łukasz Małek, Jakub Maćkiewicz.

Prezentacja na temat: "Podstawy jQuery w aplikacjach ASP.NET Web Forms Łukasz Małek, Jakub Maćkiewicz."— Zapis prezentacji:

1 Podstawy jQuery w aplikacjach ASP.NET Web Forms Łukasz Małek, Jakub Maćkiewicz

2 Czym jest jQuery?

3 Główne przyczyny rozwoju jQuery. Źródło: Rafał Jońca - Kurs jQuery

4 1. 2. 3. Witaj, świecie 4.<script type="text/javascript 5.src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 6. 7.$(document).ready(function() { 8.$('button').click(function() { 9.alert('Witaj, świecie!'); }); 10.}); 11. 12. 13. 14. Kliknij 15. 16. 'Witaj, świecie!'

5 $( document ).ready(function(){ $("button").click(function(){ $("p").hide(); }); This is a heading This is a paragraph. This is another paragraph. Click me Ukrycie tekstu

6 Ukrycie tekstu II $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); This is a heading This is a paragraph. This is another paragraph. Click me

7 Ukrycie tekstu III $(document).ready(function(){ $("button").click(function(){ $(this).hide(); }); This is a heading This is a paragraph. This is another paragraph. Click me

8 jQuery slideDown 1. 2. 3. 4. 5. 6.$(document).ready(function(){ 7. $("#flip").click(function(){ 8. $("#panel").slideDown("slow"); 9. }); 10.}); 11. 12. 13.#panel,#flip 14. { 15.padding:5px; 16.text-align:center; 17.background-color:#e5eecc; 18.border:solid 1px #c3c3c3; 19. } 20.#panel 21. { 22.padding:50px; 23.display:none; 24. } 25. 26. 27. 28. Kliknij! 29. Panel został rozsunięty! 30. 31.

9 jQuery slideUp 1. 2. 3. 4. 5. 6.$(document).ready(function(){ 7. $("#flip").click(function(){ 8. $("#panel").slideUp("slow"); 9. }); 10.}); 11. 12. 13.#panel,#flip 14. { 15.padding:5px; 16.text-align:center; 17.background-color:#e5eecc; 18.border:solid 1px #c3c3c3; 19. } 20.#panel 21. { 22.padding:50px; 23.display:yes; 24. } 25. 26. 27. 28. Kliknij! 29. Panel został rozsunięty! 30. 31.

10 jQuery slideToggle 1. 2. 3. 4. 5. 6.$(document).ready(function(){ 7. $("#flip").click(function(){ 8. $("#panel"). slideToggle("slow"); 9. }); 10.}); 11. 12. 13.#panel,#flip 14. { 15.padding:5px; 16.text-align:center; 17.background-color:#e5eecc; 18.border:solid 1px #c3c3c3; 19. } 20.#panel 21. { 22.padding:50px; 23.display:none; 24. } 25. 26. 27. 28. Kliknij! 29. Panel został rozsunięty! 30. 31.

11 1. 2. 3. 4. 5. 6.$(document).ready(function(){ 7. $("button").click(function(){ 8. $("#div1").fadeIn(); 9. $("#div2").fadeIn("slow"); 10. $("#div3").fadeIn(3000); 11. }); 12.}); 13. 14. 15. 16. Kliknij! 17. 18. 19. 20. 21. 22. jQuery FadeIn

12 1. 2. 3. 4. 5. 6.$(document).ready(function(){ 7. $("button").click(function(){ 8. $("#div1").fadeOut(); 9. $("#div2").fadeOut("slow"); 10. $("#div3").fadeOut(3000); 11. }); 12.}); 13. 14. 15. 16. Kliknij! 17. 18. 19. 20. 21. 22. jQuery FadeOut

13 1. 2. 3. 4. 5. 6.$(document).ready(function(){ 7. $("button").click(function(){ 8. $("#div1").fadeTo("slow",0.05); 9. $("#div2").fadeTo("slow",0.4); 10. $("#div3").fadeTo("slow",0.9); }); 11.}); 12. 13. 14. 15. Kliknij! 16. 17. 18. 19. 20. 21. jQuery fadeToggle

14 1. 2. 3. 4. 5. 6.$(document).ready(function(){ 7. $("button").click(function(){ 8. $("#div1"). fadeToggle(); 9. $("#div2"). fadeToggle("slow"); 10. $("#div3"). fadeToggle(3000); 11. }); 12.}); 13. 14. 15. 16. Kliknij! 17. 18. 19. 20. 21. 22. jQuery fadeToggle

15 Główne zalety korzystania z jQuery Źródło: Rafał Jońca - Kurs jQuery