Quinta lezione del modulo jQuery del corso per WebMaster & WebDesigner

1. JQuery [5]
Matteo Magni

2. Effects
jQuery possiede
anche un buon
numero di
funzionalità per fare
animazioni/effetti
nelle 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 nasconde
l'elemento in base
allo stato che ha.

6. Fading
• .fadeIn() All'effetto di far
• .fadeOut() apparire l'elemento
• .fadeTo() aggiunge la
dissolvenza
• .fadeToggle()

7. Sliding
• .slideDown() Aggiunge lo
• .slideToggle() scorrimento
• .slideUp() all'animazione di far
apparire l'elemento.

8. 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.
});
});

9. Plugin
http://archive.plugins.jquery.com/
I plugin sono metodi personalizzati che
estendono le funzionalità di jQuery.

10. jQuery Tablesorter
http://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 modali
http://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. Sosacroniro plugin?
http://docs.jquery.com/Plugins/Authoring
(function( $ ) {
$.fn.sosacroniro = 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.sosacroniro = function() {
this.each(function() {
alert($(this).text());
});
};
})( jQuery );

18. Domande?
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me