jQuery - 5 | WebMaster & WebDesigner
Upcoming SlideShare
Loading in...5
×
 

jQuery - 5 | WebMaster & WebDesigner

on

  • 361 views

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

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

Statistics

Views

Total Views
361
Views on SlideShare
359
Embed Views
2

Actions

Likes
0
Downloads
6
Comments
0

1 Embed 2

http://cypher.informazione.me 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery - 5 | WebMaster & WebDesigner Presentation 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