jQuery - 5 | WebMaster & WebDesigner

546 views

Published on

Quinta lezione del modulo Jquery per il corso di WebMaster & WebDesigner

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
546
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery - 5 | WebMaster & WebDesigner

  1. 1. JQuery [5]Matteo Magni
  2. 2. EffectsjQuery possiedeanche un buonnumero difunzionalità per fareanimazioni/effettinelle 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 nascondelelemento in baseallo stato che ha.
  6. 6. Fading• .fadeIn()• .fadeOut()• .fadeTo()• .fadeToggle()Alleffetto di farapparire lelementoaggiunge ladissolvenza
  7. 7. Sliding• .slideDown()• .slideToggle()• .slideUp()Aggiunge loscorrimentoallanimazione di farapparire 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. Pluginhttp://archive.plugins.jquery.com/I plugin sono metodi personalizzati cheestendono le funzionalità di jQuery.
  10. 10. jQuery Tablesorterhttp://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 modalihttp://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. Cypher plugin?http://docs.jquery.com/Plugins/Authoring(function( $ ) {  $.fn.cypher = 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.cypher = function() {        this.each(function() {            alert($(this).text());        });      };  })( jQuery );
  18. 18. Domande?Slide:http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:matteo@magni.me

×