jQuery - 5 | WebMaster & WebDesigner

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:
  $('#book').show('slow', function() {
    // Animation complete.
  });
});

toggle
• .toggle() Mostra e nasconde
l'elemento in base
allo stato che ha.

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

Sliding
• .slideDown() Aggiunge lo
• .slideToggle() scorrimento
• .slideUp() 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.

  $('#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 [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:
matteo@magni.me

jQuery - 5 | WebMaster & WebDesigner

More Related Content

Viewers also liked (6)

Similar to jQuery - 5 | WebMaster & WebDesigner (10)

More from Matteo Magni (20)

jQuery - 5 | WebMaster & WebDesigner