Your SlideShare is downloading. ×

jQuery - 5 | WebMaster & WebDesigner

216

Published on

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

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
216
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JQuery [5]Matteo Magni
  • 2. EffectsjQuery possiedeanche un buonnumero difunzionalità per fareanimazioni/effettinelle nostre pagine
  • 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. 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. toggle• .toggle() Mostra e nascondelelemento in baseallo stato che ha.
  • 6. Fading• .fadeIn()• .fadeOut()• .fadeTo()• .fadeToggle()Alleffetto di farapparire lelementoaggiunge ladissolvenza
  • 7. Sliding• .slideDown()• .slideToggle()• .slideUp()Aggiunge loscorrimentoallanimazione di farapparire lelemento.
  • 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. Pluginhttp://archive.plugins.jquery.com/I plugin sono metodi personalizzati cheestendono le funzionalità di jQuery.
  • 10. jQuery Tablesorterhttp://tablesorter.com/docs/
  • 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. 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]// validate signup form on keyup and submit$("#signupForm").validate({rules: {firstname: "required",lastname: "required",username: {required: true,minlength: 2},
  • 15. Cypher plugin?http://docs.jquery.com/Plugins/Authoring(function( $ ) {  $.fn.cypher = function() {      // Do your awesome plugin stuff here  };})( jQuery );
  • 16. HTML<div class="container">    <p class="sosacroniro">sosacroniro.com</p>    <p class="sosacroniro">sosacroniro.it</p></div>
  • 17. Javascript(function( $ ) {     $.fn.cypher = function() {        this.each(function() {            alert($(this).text());        });      };  })( jQuery );
  • 18. Domande?Slide:http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:matteo@magni.me

×