Come Foundation il sistema di griglie comprende anche l offset, il push e pull degli elementi per far si che questi si posizionano o si spingono in

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Come Foundation il sistema di griglie comprende anche l offset, il push e pull degli elementi per far si che questi si posizionano o si spingono in"

Fabiano Valenti
5 anni fa
Visualizzazioni

griglie in boostrap Come Foundation il sistema di griglie comprende anche l offset, il push e pull degli elementi per far si che questi si posizionano o si spingono in altre parti dello schermo.

1 griglie in boostrap Come Foundation il sistema di griglie comprende anche l offset, il push e pull degli elementi per far si che questi si posizionano o si spingono in altre parti dello schermo. Classi fondamentali per il responsive design sono anche le possibilità di nascondere o rendere visibili alcuni contenuti. Un esempio potrebbe essere una sidebar non importante per una navigazione mobile.

2 jquery come utilizzare javascript senza troppi problemi

Queste slide Queste slides fanno parte del corso Web Design II & HTML II. Il sito del corso, con il materiale completo, si trova in http://www.gabrieleruscelli.com. Data la rapida evoluzione della rete, il corso viene aggiornato ogni anno.

3 Queste slide Queste slides fanno parte del corso Web Design II & HTML II. Il sito del corso, con il materiale completo, si trova in Data la rapida evoluzione della rete, il corso viene aggiornato ogni anno. Il presente materiale è pubblicato con licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 ( by-nc-sa/3.0/it/deed.it ): La licenza non si estende alle immagini provenienti da altre fonti e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che, ove possibile, sono stati indicati. L autore si scusa per eventuali omissioni, e resta a disposizione per correggerle.

4 Introduzione jquery è una libreria di funzioni (un cosiddetto software framework) javascript, cross-browser per le applicazioni web, che si propone come obiettivo quello di semplificare la programmazione lato client delle pagine HTML. wikipedia Grazie a jquery è possibile scrivere poche righe di codice per richiamare tantissime funzioni javascript.

5 documentazione per iniziare... per i designer.. manuale completo alcuni esempi sono stati presi da questi libri

6 perchè jquery? -manipolazione di HTML/DOM e CSS metodi per eventi HTML effetti e animazioni supporto a programmazione AJAX -è diffuso, testato e manutenuto open source compatto (meno di 100kb, se compresso) può essere esteso con una serie di plugin di vario genere

7 perchè jquery? Differenze codice scritto con javascript codice scritto con jquery screen presi da wikipedia

8 jquery - primi passi 1- scaricare da l ultimo file aggiornato jquery 2- fare una cartellina nuova chiamandola js 3- inserire nell head un link che richiama il file scaricato <script type= text/javascript src= js/jquery min.js > </script> 4- iniziare a scrivere codice javascript nel proprio file HTML

9 HTML e jquery È possibile implementare codice jquery in diversi parti: -All interno di head nella pagina HTML -All interno di body a fine pagina HTML prima della chiusura del tag </body> -Creando un file nuovo *.js e richiamarlo nella head, ES: <head> <script src= js/jquery.js type= text/javascript ></script> <script src= js/script_mio.js type= text/javascript ></script> </head>

10 jquery struttura Parte iniziale, richiama la funzione jquery Selettore. In questo caso sta puntando ad un tag HTML a $(document).ready(function() { $( a ).click(function(event) { alert( ciao! ); event.preventdefault(); chiudi la seconda funzione chiudi la prima funzione Istruzione legata al selettore a. L istruzione si chiama: click. Se click a allora crea una funzione nuova. La funzione nuova è un alert. L alert comunicherà: ciao! NB. se questo pezzo di codice viene inserito dentro head o dentro body deve essere all interno del tag <script></script>.

11 selettori Per poter collegare gli script a degli elementi presenti nella pagina HTML si necessita di un selettore e/o un filtro. Questo permette di far agire jquery a un determinato box, tag etc.. etc.. La sintassi di un selettore è determinata dalla struttura HTML e dai sui tag, classi o id; saranno proprio questi che ci serviranno per collegare i nostri script. Selettori classici $( p ) $(.classe ) $( #id ) Selettori discendenti $( ul li a ) $(.classe1.colore ) $( #id #id_piccolo ) Selettori multipli $( p, h1, a ) $(.classe1,.classe2,.classe3 ) $( #id, #id2 ) Selettori gerarchici $( p > a ) $(.classe1 +.classe2 ) $( #id ~ #id2 )

12 Filtri I filtri permettono un ulteriore ricerca e filtraggio di qualsiasi elemento dentro un documento HTML, tuttavia sono più lenti rispetto ai selettori primari. alcuni filtri: $( :button ) $( :checkbox ) $( :input ) $( :animated ) $( :checked ) $( :focus ) Uso $( :button ) $( *:button ) $( #id ).filter( :button ) $( form input:button ) $( :first-child ) $( :last-child ) $( :odd )

13 addclass Creiamo una classe nei css colore e la associamo al paragrafo..colore{background-color: fuchsia;} <p class= colore >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a href= # >clicca</a> seguendo la stessa logica dell esempio precedente associamo la nostra classe al click $(document).ready(function() { $( a ).click(function(event) { $( p ).addclass( colore ); event.preventdefault();

14 removeclass Creiamo una classe nei css sottolineato e la associamo al paragrafo..sottolineato{text-decoration: underline;} <p class= colore sottolineato >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a href= # >clicca</a> Al contrario di addclass questa proprietà si occupa di cancellare una classe già esistente. In questo caso sottolineato associata precendentemente. $(document).ready(function() { $( a ).click(function(event) { $( p ).removeclass( sottolineato ) event.preventdefault();

15 toggleclass per far si che quando c è si cancella e quando non c è si attiva... $(document).ready(function() { $( a ).click(function(event) { $( p ).toggleclass( colore ) event.preventdefault();

16 animazioni jquery 1 jquery offre diversi una serie di animazioni predefinite che possono essere manipolate per creare animazioni complesse. NB. attenzione toggle è diversa dalla funzione toggleclass $(document).ready(function() { $( a ).click(function(event) { $( p ).toggle( slow ); event.preventdefault();

17 animazioni jquery 2 Le principali funzioni di animazioni si suddividono in 3 macro gruppi: Mostrare o Nascondere:.hide().show().toogle() Scorrimento:.slideDown().slideUp().slideToggle() Dissolvenza:.fadeIn().fadeOut().fadeTo().fadeToggle()

18 animazioni jquery 3 Ognuni funzione può ammettere dei valori per settare l animazione. sintassi per tutte le funzioni.hide(duration [, callback]).hide([duration] [, easing] [, callback]) sintassi solo per queste funzioni.toggle(showorhide).fadeto(duration, opacity [, easing] [,callback]) Duration: durata dell animazione (fast, slow, millisecondi) Callback: serve per concatenare le animazioni seguendo il DOM. Easing: curva dell animazione showorhide: non considera lo stato attuale di visualizzazione dell elemento, se è visibile si può nascondere e viceversa. Opacity: valore di opacità (da 0 a 1)

19 animazioni jquery 4 È possibile implementare animazioni diverse da quelle offerte dalle funzionalità di base precedentemente descritte. Per fare ciò si utilizza la funzione.animate() integrandola con parametri CSS. NB non tutte le proprietà CSS sono animabili..animate(properties [, duration] [,easing] [,complete]) Complete: termine dell animazione $(document).ready(function(){ $( #animate1 ).click(function(){ $( #content ).animate( { border-width : 5, height: 10 $( #animate2 ).click(function(){ $( #content ).animate( {width: 10}, slow );

20 Esercizi 1 Creare una barra che informa gli utenti che il sito utilizza i cookies. 1 step: usare HTML e CSS per la costruzione e lo stile; 2 step: usare jquery per implementare la funzione che permette il box di scomparire.

21 Esercizi 2 Creare un sistema di filtraggio che permetta l eliminazione di alcuni colori una volta cliccato il nome. NB attenzione ai nomi degli id dei blocchi e dei bottoni

Documenti analoghi

jquery come utilizzare javascript senza troppi problemi

jquery come utilizzare javascript senza troppi problemi Queste slide Queste slides fanno parte del corso Web Design II & HTML II. Il sito del corso, con il materiale completo, si trova in http://www.gabrieleruscelli.com.