jquery - 5 | webmaster & webdesigner
Post on 21-Oct-2014
356 views
DESCRIPTION
Quinta lezione del modulo Jquery per il corso di WebMaster & WebDesignerTRANSCRIPT
![Page 1: jQuery - 5 | WebMaster & WebDesigner](https://reader036.vdocument.in/reader036/viewer/2022081907/5446e81eb1af9fdc3a8b4728/html5/thumbnails/1.jpg)
JQuery [5]Matteo Magni
![Page 2: jQuery - 5 | WebMaster & WebDesigner](https://reader036.vdocument.in/reader036/viewer/2022081907/5446e81eb1af9fdc3a8b4728/html5/thumbnails/2.jpg)
Effects
jQuery possiede anche un buon numero di funzionalità per fare animazioni/effetti nelle nostre pagine
![Page 3: jQuery - 5 | WebMaster & WebDesigner](https://reader036.vdocument.in/reader036/viewer/2022081907/5446e81eb1af9fdc3a8b4728/html5/thumbnails/3.jpg)
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.');
});
});
![Page 4: jQuery - 5 | WebMaster & WebDesigner](https://reader036.vdocument.in/reader036/viewer/2022081907/5446e81eb1af9fdc3a8b4728/html5/thumbnails/4.jpg)
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.
});
});
![Page 5: jQuery - 5 | WebMaster & WebDesigner](https://reader036.vdocument.in/reader036/viewer/2022081907/5446e81eb1af9fdc3a8b4728/html5/thumbnails/5.jpg)
toggle
• .toggle() Mostra e nasconde l'elemento in base allo stato che ha.
![Page 6: jQuery - 5 | WebMaster & WebDesigner](https://reader036.vdocument.in/reader036/viewer/2022081907/5446e81eb1af9fdc3a8b4728/html5/thumbnails/6.jpg)
Fading
• .fadeIn()
• .fadeOut()
• .fadeTo()
• .fadeToggle()
All'effetto di far apparire l'elemento aggiunge la dissolvenza
![Page 7: jQuery - 5 | WebMaster & WebDesigner](https://reader036.vdocument.in/reader036/viewer/2022081907/5446e81eb1af9fdc3a8b4728/html5/thumbnails/7.jpg)
Sliding
• .slideDown()
• .slideToggle()
• .slideUp()
Aggiunge lo scorrimento all'animazione di far apparire l'elemento.
![Page 8: jQuery - 5 | WebMaster & WebDesigner](https://reader036.vdocument.in/reader036/viewer/2022081907/5446e81eb1af9fdc3a8b4728/html5/thumbnails/8.jpg)
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.
});
});
![Page 9: jQuery - 5 | WebMaster & WebDesigner](https://reader036.vdocument.in/reader036/viewer/2022081907/5446e81eb1af9fdc3a8b4728/html5/thumbnails/9.jpg)
Plugin
http://archive.plugins.jquery.com/
I plugin sono metodi personalizzati che estendono le funzionalità di jQuery.
![Page 11: jQuery - 5 | WebMaster & WebDesigner](https://reader036.vdocument.in/reader036/viewer/2022081907/5446e81eb1af9fdc3a8b4728/html5/thumbnails/11.jpg)
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();
});
![Page 12: jQuery - 5 | WebMaster & WebDesigner](https://reader036.vdocument.in/reader036/viewer/2022081907/5446e81eb1af9fdc3a8b4728/html5/thumbnails/12.jpg)
Finestre modali
http://www.designresourcebox.com/fancybox-lighbox-jquery-plugin/
http://fancyapps.com/fancybox/
$(document).ready(function() {$(".fancybox").fancybox({
openEffect : 'none',closeEffect : 'none'
});});
![Page 13: jQuery - 5 | WebMaster & WebDesigner](https://reader036.vdocument.in/reader036/viewer/2022081907/5446e81eb1af9fdc3a8b4728/html5/thumbnails/13.jpg)
Validation
![Page 14: jQuery - 5 | WebMaster & WebDesigner](https://reader036.vdocument.in/reader036/viewer/2022081907/5446e81eb1af9fdc3a8b4728/html5/thumbnails/14.jpg)
Validation [2]
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
![Page 15: jQuery - 5 | WebMaster & WebDesigner](https://reader036.vdocument.in/reader036/viewer/2022081907/5446e81eb1af9fdc3a8b4728/html5/thumbnails/15.jpg)
Cypher plugin?
http://docs.jquery.com/Plugins/Authoring
(function( $ ) {
$.fn.cypher = function() {
// Do your awesome plugin stuff here
};
})( jQuery );
![Page 16: jQuery - 5 | WebMaster & WebDesigner](https://reader036.vdocument.in/reader036/viewer/2022081907/5446e81eb1af9fdc3a8b4728/html5/thumbnails/16.jpg)
HTML
<div class="container">
<p class="sosacroniro">sosacroniro.com</p>
<p class="sosacroniro">sosacroniro.it</p>
</div>
![Page 17: jQuery - 5 | WebMaster & WebDesigner](https://reader036.vdocument.in/reader036/viewer/2022081907/5446e81eb1af9fdc3a8b4728/html5/thumbnails/17.jpg)
Javascript
(function( $ ) {
$.fn.cypher = function() {
this.each(function() {
alert($(this).text());
});
};
})( jQuery );
![Page 18: jQuery - 5 | WebMaster & WebDesigner](https://reader036.vdocument.in/reader036/viewer/2022081907/5446e81eb1af9fdc3a8b4728/html5/thumbnails/18.jpg)
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail: