JQuery [5] Matteo Magni
Effects    jQuery possiede    anche un buon    numero di    funzionalità per fare    animazioni/effetti    nelle nostre pa...
Basic• .hide()   <div id="clickme">              Click here            </div>            <img id="book" src="book.png" alt...
show• .show()   <div id="clickme">              Click here            </div>            <img id="book" src="book.png" alt=...
toggle• .toggle()      Mostra e nasconde                 lelemento in base                 allo stato che ha.
Fading•   .fadeIn()          Alleffetto di far•   .fadeOut()         apparire lelemento•   .fadeTo()          aggiunge la ...
Sliding• .slideDown()         Aggiunge lo• .slideToggle()       scorrimento• .slideUp()           allanimazione di far    ...
CallbackIn tutti questi metodi possiamo aggiungereuna funzione di callback che viene invocataquando lanimazione è terminat...
Plugin       http://archive.plugins.jquery.com/I plugin sono metodi personalizzati cheestendono le funzionalità di jQuery.
jQuery Tablesorter http://tablesorter.com/docs/
tablesorter<table id="myTable" class="tablesorter">     ...    <td>Conway</td>     <td>$50.00</td>     <td>http://www.timc...
Finestre modali  http://www.designresourcebox.com/fancybox-lighbox-jquery-plugin/                   http://fancyapps.com/f...
Validation
Validation [2]// validate signup form on keyup and submit$("#signupForm").validate({rules: {firstname: "required",lastname...
Sosacroniro plugin?http://docs.jquery.com/Plugins/Authoring(function( $ ) {  $.fn.sosacroniro = function() {      // Do yo...
HTML<div class="container">    <p class="sosacroniro">sosacroniro.com</p>    <p class="sosacroniro">sosacroniro.it</p></div>
Javascript(function( $ ) {     $.fn.sosacroniro = function() {        this.each(function() {            alert($(this).text...
Domande?               Slide:http://www.slideshare.net/ilbonzo               Code:https://github.com/ilbonzo/Cypher       ...
Upcoming SlideShare
Loading in...5
×

jQuery - 5 | WebMaster & WebDesigner

343

Published on

Quinta lezione del modulo jQuery del corso per WebMaster & WebDesigner

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
343
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery - 5 | WebMaster & WebDesigner

  1. 1. JQuery [5] Matteo Magni
  2. 2. Effects jQuery possiede anche un buon numero di funzionalità per fare animazioni/effetti nelle nostre pagine
  3. 3. Basic• .hide() <div id="clickme">   Click here </div> <img id="book" src="book.png" alt=""  width="100" height="123" /> With the element initially shown, we can  hide it slowly: $(#clickme).click(function() {   $(#book).hide(slow, function() {     alert(Animation complete.);   }); });
  4. 4. show• .show() <div id="clickme">   Click here </div> <img id="book" src="book.png" alt=""  width="100" height="123" /> With the element initially hidden, we  can show it slowly: $(#clickme).click(function() {   $(#book).show(slow, function() {     // Animation complete.   }); });
  5. 5. toggle• .toggle() Mostra e nasconde lelemento in base allo stato che ha.
  6. 6. Fading• .fadeIn() Alleffetto di far• .fadeOut() apparire lelemento• .fadeTo() aggiunge la dissolvenza• .fadeToggle()
  7. 7. Sliding• .slideDown() Aggiunge lo• .slideToggle() scorrimento• .slideUp() allanimazione di far apparire lelemento.
  8. 8. CallbackIn tutti questi metodi possiamo aggiungereuna funzione di callback che viene invocataquando lanimazione è terminata.$(#clickme).click(function() {  $(#book).slideDown(slow, function() {    // Animation complete.  });});
  9. 9. Plugin http://archive.plugins.jquery.com/I plugin sono metodi personalizzati cheestendono le funzionalità di jQuery.
  10. 10. jQuery Tablesorter http://tablesorter.com/docs/
  11. 11. tablesorter<table id="myTable" class="tablesorter">     ...    <td>Conway</td>     <td>$50.00</td>     <td>http://www.timconway.com</td> </tr> </tbody> </table> $(document).ready(function() {         $("#myTable").tablesorter();     }); 
  12. 12. Finestre modali http://www.designresourcebox.com/fancybox-lighbox-jquery-plugin/ http://fancyapps.com/fancybox/$(document).ready(function() { $(".fancybox").fancybox({ openEffect : none, closeEffect : none });});
  13. 13. Validation
  14. 14. Validation [2]// validate signup form on keyup and submit$("#signupForm").validate({rules: {firstname: "required",lastname: "required",username: {required: true,minlength: 2},
  15. 15. Sosacroniro plugin?http://docs.jquery.com/Plugins/Authoring(function( $ ) {  $.fn.sosacroniro = function() {      // Do your awesome plugin stuff here  };})( jQuery );
  16. 16. HTML<div class="container">    <p class="sosacroniro">sosacroniro.com</p>    <p class="sosacroniro">sosacroniro.it</p></div>
  17. 17. Javascript(function( $ ) {     $.fn.sosacroniro = function() {        this.each(function() {            alert($(this).text());        });      };  })( jQuery );
  18. 18. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×