SlideShare a Scribd company logo
1 of 18
Download to read offline
JQuery [5]
Matteo Magni
Effects
jQuery possiede
anche un buon
numero di
funzionalità per fare
animazioni/effetti
nelle nostre pagine
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.');
  });
});
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.
  });
});
toggle
• .toggle() Mostra e nasconde
l'elemento in base
allo stato che ha.
Fading
• .fadeIn()
• .fadeOut()
• .fadeTo()
• .fadeToggle()
All'effetto di far
apparire l'elemento
aggiunge la
dissolvenza
Sliding
• .slideDown()
• .slideToggle()
• .slideUp()
Aggiunge lo
scorrimento
all'animazione di far
apparire l'elemento.
Callback
In tutti questi metodi possiamo aggiungere
una funzione di callback che viene invocata
quando l'animazione è terminata.
$('#clickme').click(function() {
  $('#book').slideDown('slow', function() {
    // Animation complete.
  });
});
Plugin
http://archive.plugins.jquery.com/
I plugin sono metodi personalizzati che
estendono 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.timconway.com</td> 
</tr> 
</tbody> 
</table> 
$(document).ready(function() { 
        $("#myTable").tablesorter(); 
    }); 
Finestre modali
http://www.designresourcebox.com/fancybox-lighbox-jquery-plugin/
http://fancyapps.com/fancybox/
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
Validation
Validation [2]
// validate signup form on keyup and 
submit
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
Cypher plugin?
http://docs.jquery.com/Plugins/Authoring
(function( $ ) {
  $.fn.cypher = function() {
  
    // Do your awesome plugin stuff here
  };
})( jQuery );
HTML
<div class="container">
    <p class="sosacroniro">sosacroniro.com</p>
    <p class="sosacroniro">sosacroniro.it</p>
</div>
Javascript
(function( $ ) { 
    $.fn.cypher = function() {
        this.each(function() {
            alert($
(this).text());
        }); 
     };  
})( jQuery );
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail:
matteo@magni.me

More Related Content

More from Matteo Magni

Introduzione DevOps con Ansible
Introduzione DevOps con AnsibleIntroduzione DevOps con Ansible
Introduzione DevOps con AnsibleMatteo Magni
 
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesignerHTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesignerHTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 4 | WebMaster & WebDesigner
HTML5 e Css3 - 4 | WebMaster & WebDesignerHTML5 e Css3 - 4 | WebMaster & WebDesigner
HTML5 e Css3 - 4 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesignerHTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 - 2 | WebMaster & WebDesignerHTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 - 2 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner Matteo Magni
 
jQuery - 4 | WebMaster & WebDesigner
jQuery - 4 | WebMaster & WebDesignerjQuery - 4 | WebMaster & WebDesigner
jQuery - 4 | WebMaster & WebDesignerMatteo Magni
 
jQuery - 2 | WebMaster & WebDesigner
jQuery - 2 | WebMaster & WebDesignerjQuery - 2 | WebMaster & WebDesigner
jQuery - 2 | WebMaster & WebDesignerMatteo Magni
 
jQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerjQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesignerJavascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesignerJavascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesignerMatteo Magni
 
Web Usability - 3 | WebMaster & WebDesigner
 Web Usability - 3 | WebMaster & WebDesigner Web Usability - 3 | WebMaster & WebDesigner
Web Usability - 3 | WebMaster & WebDesignerMatteo Magni
 
Web Usability - 2 | WebMaster & WebDesigner
Web Usability - 2 | WebMaster & WebDesignerWeb Usability - 2 | WebMaster & WebDesigner
Web Usability - 2 | WebMaster & WebDesignerMatteo Magni
 
Web Usability - 1 | WebMaster & WebDesigner
Web Usability - 1 | WebMaster & WebDesignerWeb Usability - 1 | WebMaster & WebDesigner
Web Usability - 1 | WebMaster & WebDesignerMatteo Magni
 
Seo e Web Marketing - 5 | WebMaster & WebDesigner
Seo e Web Marketing - 5 | WebMaster & WebDesignerSeo e Web Marketing - 5 | WebMaster & WebDesigner
Seo e Web Marketing - 5 | WebMaster & WebDesignerMatteo Magni
 
Seo e Web Marketing - 4 | WebMaster & WebDesigner
 Seo e Web Marketing - 4 | WebMaster & WebDesigner Seo e Web Marketing - 4 | WebMaster & WebDesigner
Seo e Web Marketing - 4 | WebMaster & WebDesignerMatteo Magni
 
Seo e Web Marketing - 3 | WebMaster & WebDesigner
Seo e Web Marketing - 3 | WebMaster & WebDesignerSeo e Web Marketing - 3 | WebMaster & WebDesigner
Seo e Web Marketing - 3 | WebMaster & WebDesignerMatteo Magni
 
Seo e Web Marketing - 2 | WebMaster & WebDesigner
Seo e Web Marketing - 2 | WebMaster & WebDesignerSeo e Web Marketing - 2 | WebMaster & WebDesigner
Seo e Web Marketing - 2 | WebMaster & WebDesignerMatteo Magni
 

More from Matteo Magni (20)

Introduzione DevOps con Ansible
Introduzione DevOps con AnsibleIntroduzione DevOps con Ansible
Introduzione DevOps con Ansible
 
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesignerHTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesigner
 
HTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesignerHTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesigner
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesigner
 
HTML5 e Css3 - 4 | WebMaster & WebDesigner
HTML5 e Css3 - 4 | WebMaster & WebDesignerHTML5 e Css3 - 4 | WebMaster & WebDesigner
HTML5 e Css3 - 4 | WebMaster & WebDesigner
 
HTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesignerHTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesigner
 
HTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 - 2 | WebMaster & WebDesignerHTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 - 2 | WebMaster & WebDesigner
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner
 
jQuery - 4 | WebMaster & WebDesigner
jQuery - 4 | WebMaster & WebDesignerjQuery - 4 | WebMaster & WebDesigner
jQuery - 4 | WebMaster & WebDesigner
 
jQuery - 2 | WebMaster & WebDesigner
jQuery - 2 | WebMaster & WebDesignerjQuery - 2 | WebMaster & WebDesigner
jQuery - 2 | WebMaster & WebDesigner
 
jQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerjQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesigner
 
Javascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesignerJavascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesigner
 
Javascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesignerJavascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesigner
 
Web Usability - 3 | WebMaster & WebDesigner
 Web Usability - 3 | WebMaster & WebDesigner Web Usability - 3 | WebMaster & WebDesigner
Web Usability - 3 | WebMaster & WebDesigner
 
Web Usability - 2 | WebMaster & WebDesigner
Web Usability - 2 | WebMaster & WebDesignerWeb Usability - 2 | WebMaster & WebDesigner
Web Usability - 2 | WebMaster & WebDesigner
 
Web Usability - 1 | WebMaster & WebDesigner
Web Usability - 1 | WebMaster & WebDesignerWeb Usability - 1 | WebMaster & WebDesigner
Web Usability - 1 | WebMaster & WebDesigner
 
Seo e Web Marketing - 5 | WebMaster & WebDesigner
Seo e Web Marketing - 5 | WebMaster & WebDesignerSeo e Web Marketing - 5 | WebMaster & WebDesigner
Seo e Web Marketing - 5 | WebMaster & WebDesigner
 
Seo e Web Marketing - 4 | WebMaster & WebDesigner
 Seo e Web Marketing - 4 | WebMaster & WebDesigner Seo e Web Marketing - 4 | WebMaster & WebDesigner
Seo e Web Marketing - 4 | WebMaster & WebDesigner
 
Seo e Web Marketing - 3 | WebMaster & WebDesigner
Seo e Web Marketing - 3 | WebMaster & WebDesignerSeo e Web Marketing - 3 | WebMaster & WebDesigner
Seo e Web Marketing - 3 | WebMaster & WebDesigner
 
Seo e Web Marketing - 2 | WebMaster & WebDesigner
Seo e Web Marketing - 2 | WebMaster & WebDesignerSeo e Web Marketing - 2 | WebMaster & WebDesigner
Seo e Web Marketing - 2 | WebMaster & WebDesigner
 

jQuery - 5 | WebMaster & WebDesigner