jquery - 5 | webmaster & webdesigner
DESCRIPTION
Quinta lezione del modulo jQuery del corso per WebMaster & WebDesignerTRANSCRIPT
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.
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
},
Sosacroniro plugin?
http://docs.jquery.com/Plugins/Authoring
(function( $ ) {
$.fn.sosacroniro = 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.sosacroniro = function() {
this.each(function() {
alert($(this).text());
});
};
})( jQuery );
Domande?
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail: