griglie in boostrap - Gabriele Ruscelli · 2016-02-22 · griglie in boostrap Come Foundation il...
21
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.
Transcript of griglie in boostrap - Gabriele Ruscelli · 2016-02-22 · griglie in boostrap Come Foundation il...
griglie in boostrapCome 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.
jQuery
come utilizzare javascript senza troppi problemi
Queste slideQueste 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.
Il presente materiale è pubblicato con licenza Creative Commons “Attribuzione - Non commerciale - Condividi allo stesso modo – 3.0” (http://creativecommons.org/licenses/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.
Introduzione
jQuery è una libreria di funzioni (un cosiddetto software framework) javas-cript, 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.
documentazione
http://jquery.com
http://jqueryui.com
http://www.jqueryrain.com
alcuni esempi sono stati presi da questi libri
per iniziare.... manuale completoper i designer..
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
perchè jQuery?
codice scritto con javascript
Differenze
codice scritto con jQuery
screen presi da wikipedia
jQuery - primi passi
1- scaricare da http://jquery.com 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-1.7.1.min.js”>
</script>
4- iniziare a scrivere codice javascript nel proprio file HTML
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 chiusuradel 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>
jQuery strutturaParte iniziale, richiama la funzione jQuery
Istruzione legata al selettore “a”.L’istruzione si chiama: click.Se click “a” allora crea una funzione nuova.
chiudi la secondafunzione chiudi la prima
funzione
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>.
Selettore. In questo caso sta puntando ad un tag HTML “a”
$(document).ready(function() {$(“a”).click(function(event) { alert(“ciao!”); event.preventDefault(); }); });
selettoriPer 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’)
FiltriI filtri permettono un ulteriore “ricerca e filtraggio” di qualsiasi elemen-to dentro un documento HTML, tuttavia sono più lenti rispetto ai selet-tori primari.
alcuni filtri:$(‘:button’)$(‘:checkbox’)$(‘:input’)
$(‘:animated’)$(‘:checked’)$(‘:focus’)
$(‘:first-child’)$(‘:last-child’)$(‘:odd’)
Uso$(‘:button’)$(‘*:button’)$(‘#id’).filter(‘:button‘)$(‘form input:button‘)
addClassCreiamo una classe nei css “colore” e la associamo al paragrafo..colore{background-color: fuchsia;}
<p class=”colore”>Lorem ipsum dolor sit amet, consectetur adipisic-ing 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(); }); }); });
removeClassCreiamo una classe nei css “sottolineato” e la associamo al paragrafo..sottolineato{text-decoration: underline;}
<p class=”colore sottolineato”>Lorem ipsum dolor sit amet, consecte-tur 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 precen-dentemente.
$(document).ready(function() { $(“a”).click(function(event) { $(“p”) .removeClass(“sottolineato”) event.preventDefault(); });});
toggleClassper 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(); }); });
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(); });});
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()
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 https://jqueryui.com/easing/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)
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’); });});
Esercizi 1Creare 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.
Esercizi 2Creare 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
