• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery - 5 | WebMaster & WebDesigner
 

jQuery - 5 | WebMaster & WebDesigner

on

  • 309 views

Quinta lezione del modulo Jquery per il corso di WebMaster & WebDesigner

Quinta lezione del modulo Jquery per il corso di WebMaster & WebDesigner

Statistics

Views

Total Views
309
Views on SlideShare
307
Embed Views
2

Actions

Likes
0
Downloads
3
Comments
0

1 Embed 2

http://cypher.informazione.me 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery - 5 | WebMaster & WebDesigner jQuery - 5 | WebMaster & WebDesigner Presentation Transcript

    • JQuery [5]Matteo Magni
    • EffectsjQuery possiedeanche un buonnumero difunzionalità per fareanimazioni/effettinelle 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 nascondelelemento in baseallo stato che ha.
    • Fading• .fadeIn()• .fadeOut()• .fadeTo()• .fadeToggle()Alleffetto di farapparire lelementoaggiunge ladissolvenza
    • Sliding• .slideDown()• .slideToggle()• .slideUp()Aggiunge loscorrimentoallanimazione di farapparire lelemento.
    • CallbackIn tutti questi metodi possiamo aggiungereuna funzione di callback che viene invocataquando lanimazione è terminata.$(#clickme).click(function() {  $(#book).slideDown(slow, function() {    // Animation complete.  });});
    • Pluginhttp://archive.plugins.jquery.com/I plugin sono metodi personalizzati cheestendono le funzionalità di jQuery.
    • jQuery Tablesorterhttp://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 modalihttp://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