jquery - 5 | webmaster & webdesigner

of 18/18
JQuery [5] Matteo Magni

Post on 15-Nov-2014

490 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

Quinta lezione del modulo jQuery del corso per WebMaster & WebDesigner

TRANSCRIPT

  • 1. JQuery [5] Matteo Magni

2. EffectsjQuery possiedeanche un buonnumero difunzionalit per fareanimazioni/effettinelle nostre pagine 3. Basic .hide()

Clickhere

Withtheelementinitiallyshown,wecanhideitslowly:$(#clickme).click(function(){$(#book).hide(slow,function(){alert(Animationcomplete.);});}); 4. show .show()

Clickhere

Withtheelementinitiallyhidden,wecanshowitslowly:$(#clickme).click(function(){$(#book).show(slow,function(){//Animationcomplete.});}); 5. toggle .toggle()Mostra e nasconde lelemento in base allo stato che ha. 6. Fading .fadeIn()Alleffetto di far .fadeOut() apparire lelemento .fadeTo()aggiunge la dissolvenza .fadeToggle() 7. Sliding .slideDown() Aggiunge lo .slideToggle() scorrimento .slideUp() allanimazione di far apparire lelemento. 8. CallbackIn tutti questi metodi possiamo aggiungereuna funzione di callback che viene invocataquando lanimazione terminata.$(#clickme).click(function(){$(#book).slideDown(slow,function(){//Animationcomplete.});}); 9. Plugin http://archive.plugins.jquery.com/I plugin sono metodi personalizzati cheestendono le funzionalit di jQuery. 10. jQuery Tablesorter http://tablesorter.com/docs/ 11. tablesorter...Conway$50.00http://www.timconway.com$(document).ready(function(){$("#myTable").tablesorter();}); 12. Finestre modalihttp://www.designresourcebox.com/fancybox-lighbox-jquery-plugin/ http://fancyapps.com/fancybox/$(document).ready(function(){ $(".fancybox").fancybox({openEffect :none,closeEffect :none });}); 13. Validation 14. Validation [2]//validatesignupformonkeyupandsubmit$("#signupForm").validate({rules:{firstname:"required",lastname:"required",username:{required:true,minlength:2}, 15. Sosacroniro plugin?http://docs.jquery.com/Plugins/Authoring(function($){$.fn.sosacroniro=function(){//Doyourawesomepluginstuffhere};})(jQuery); 16. HTML

sosacroniro.com

sosacroniro.it

17. Javascript(function($){$.fn.sosacroniro=function(){this.each(function(){alert($(this).text());});};})(jQuery); 18. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cyphermail:[email protected]