Materiali realizzati durante la lezione del 22/07/2017
Pagina html che dimostra il funzionamento di jQuery mettendo in rilievo alcune sue caratteristiche. Visualizza la pagina.
esercizio-jq.html
<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/miostile.css" rel="stylesheet">
</head>
<body>
<header class="jumbotron bg-sfumato">
<div class="container">
<h1>jQuery</h1>
</div>
</header>
<div class="container">
<h1>Duo Reges: constructio interrete.</h1>
<div id="immagini"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. An hoc usque quaque, aliter in vita? Quod autem in homine praestantissimum atque optimum est, id deseruit. Proclivi currit oratio. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat,
sed suavitatem ipsam neglegebat; <a href='http://loripsum.net/' target='_blank'>Simus igitur contenti his.</a> Ne discipulum abducam, times. Hoc dixerit potius Ennius: Nimium boni est, cui nihil est mali. Sed quot homines, tot sententiae; </p>
<ol>
<li>Quae adhuc, Cato, a te dicta sunt, eadem, inquam, dicere posses, si sequerere Pyrrhonem aut Aristonem.</li>
<li>Licet hic rursus ea commemores, quae optimis verbis ab Epicuro de laude amicitiae dicta sunt.</li>
<li>Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas.</li>
<li>Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus.</li>
</ol>
<ul>
<li>Potius inflammat, ut coercendi magis quam dedocendi esse videantur.</li>
<li>Sed tempus est, si videtur, et recta quidem ad me.</li>
<li>Nos commodius agimus.</li>
<li>Suo genere perveniant ad extremum;</li>
</ul>
<p>Sint modo partes vitae beatae. <a href='http://loripsum.net/' target='_blank'>Primum quid tu dicis breve?</a> Dolere malum est: in crucem qui agitur, beatus esse non potest. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Quod quidem
nobis non saepe contingit. Solum praeterea formosum, solum liberum, solum civem, stultost; </p>
<dl>
<dt><dfn>A mene tu?</dfn></dt>
<dd>Ad eas enim res ab Epicuro praecepta dantur.</dd>
<dt><dfn>Sed nimis multa.</dfn></dt>
<dd>Curium putes loqui, interdum ita laudat, ut quid praeterea sit bonum neget se posse ne suspicari quidem.</dd>
<dt><dfn>Nihil sane.</dfn></dt>
<dd>Sed haec ab Antiocho, familiari nostro, dicuntur multo melius et fortius, quam a Stasea dicebantur.</dd>
<dt><dfn>Idemne, quod iucunde?</dfn></dt>
<dd>Qualis ista philosophia est, quae non interitum afferat pravitatis, sed sit contenta mediocritate vitiorum?</dd>
</dl>
<h4>Primum Theophrasti, Strato, physicum se voluit;</h4>
<p><code>Suo genere perveniant ad extremum;</code> Qua igitur re ab deo vincitur, si aeternitate non vincitur? Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Nos vero, inquit ille;
<mark>Quid enim?</mark> At enim, qua in vita est aliquid mali, ea beata esse non potest. Quid est enim aliud esse versutum? Quae cum essent dicta, finem fecimus et ambulandi et disputandi. Quae si potest singula consolando levare, universa quo modo sustinebit?
<a href='http://loripsum.net/' target='_blank'>At multis se probavit.</a> </p>
<h2>Quamquam id quidem, infinitum est in hac urbe;</h2>
<p>Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Ait enim se, si uratur, Quam hoc suave! dicturum. <a href='http://loripsum.net/' target='_blank'>Sint ista Graecorum;</a> Non dolere, inquam, istud quam vim habeat postea videro; Et quod
est munus, quod opus sapientiae? </p>
<dl>
<dt><dfn>Praeteritis, inquit, gaudeo.</dfn></dt>
<dd>Nec vero alia sunt quaerenda contra Carneadeam illam sententiam.</dd>
<dt><dfn>Scrupulum, inquam, abeunti;</dfn></dt>
<dd>Deque his rebus satis multa in nostris de re publica libris sunt dicta a Laelio.</dd>
<dt><dfn>Si longus, levis.</dfn></dt>
<dd>Quare obscurentur etiam haec, quae secundum naturam esse dicimus, in vita beata;</dd>
<dt><dfn>Haec dicuntur inconstantissime.</dfn></dt>
<dd>Occultum facinus esse potuerit, gaudebit;</dd>
</dl>
<ul>
<li>Etenim si delectamur, cum scribimus, quis est tam invidus, qui ab eo nos abducat?</li>
<li>Haec quo modo conveniant, non sane intellego.</li>
<li>Nam de summo mox, ut dixi, videbimus et ad id explicandum disputationem omnem conferemus.</li>
</ul>
<pre>
Quibus expositis facilis est coniectura ea maxime esse
expetenda ex nostris, quae plurimum habent dignitatis, ut
optimae cuiusque partis, quae per se expetatur, virtus sit
expetenda maxime.
Ex rebus enim timiditas, non ex vocabulis nascitur.
</pre>
<p>Cuius quidem, quoniam Stoicus fuit, sententia condemnata mihi videtur esse inanitas ista verborum. <b>Sed fortuna fortis;</b> Iam id ipsum absurdum, maximum malum neglegi. Quae similitudo in genere etiam humano apparet. Unum nescio, quo modo possit,
si luxuriosus sit, finitas cupiditates habere. Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. <a href='http://loripsum.net/' target='_blank'>Omnia peccata paria dicitis.</a> </p>
<ol>
<li>Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</li>
<li>Nam et a te perfici istam disputationem volo, nec tua mihi oratio longa videri potest.</li>
<li>Potius inflammat, ut coercendi magis quam dedocendi esse videantur.</li>
<li>Suam denique cuique naturam esse ad vivendum ducem.</li>
<li>Atque his de rebus et splendida est eorum et illustris oratio.</li>
</ol>
<h5>Quae est igitur causa istarum angustiarum?</h5>
<p>Hic ego: Pomponius quidem, inquam, noster iocari videtur, et fortasse suo iure. Minime vero, inquit ille, consentit. Ubi ut eam caperet aut quando?
<mark>Stoici scilicet.</mark> Conferam tecum, quam cuique verso rem subicias;
<mark>Inde igitur, inquit, ordiendum est.</mark>
</p>
<p>Atqui reperies, inquit, in hoc quidem pertinacem; <code>Iam in altera philosophiae parte.</code> Hoc est non dividere, sed frangere. At ille non pertimuit saneque fidenter: Istis quidem ipsis verbis, inquit; </p>
<p>Nam adhuc, meo fortasse vitio, quid ego quaeram non perspicis. Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. At, illa, ut vobis placet, partem quandam tuetur, reliquam deserit. Nobis aliter videtur, recte secusne,
postea; <a href='http://loripsum.net/' target='_blank'>Magna laus.</a> <a href='http://loripsum.net/' target='_blank'>Sedulo, inquam, faciam.</a> Perge porro; </p>
<blockquote cite='http://loripsum.net'>
Ut enim, inquit, gubernator aeque peccat, si palearum navem evertit et si auri, item aeque peccat, qui parentem et qui servum iniuria verberat.
</blockquote>
<p>Torquatus, is qui consul cum Cn. <a href='http://loripsum.net/' target='_blank'>Sed fortuna fortis;</a> Quis istud possit, inquit, negare? Quod cum dixissent, ille contra. </p>
<h3>Nec enim, dum metuit, iustus est, et certe, si metuere destiterit, non erit;</h3>
<p>Comprehensum, quod cognitum non habet? Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem. Hoc non est positum in nostra actione. Quae contraria sunt his, malane? Non dolere, inquam, istud quam vim habeat postea videro;
Sed haec quidem liberius ab eo dicuntur et saepius. </p>
<blockquote cite='http://loripsum.net'>
Honestum igitur id intellegimus, quod tale est, ut detracta omni utilitate sine ullis praemiis fructibusve per se ipsum possit iure laudari.
</blockquote>
<pre>
Non metuet autem, sive celare poterit, sive opibus magnis
quicquid fecerit optinere, certeque malet existimari bonus
vir, ut non sit, quam esse, ut non putetur.
Quae tamen a te agetur non melior, quam illae sunt, quas
interdum optines.
</pre>
</div>
<div class="side-menu clearfix offscreen">
<button id="show-hide" class="btn btn-menu btn-lg"><span class="glyphicon glyphicon-cog"></span></button>
<div class="form">
<h2>Test</h2>
<div class="form-group">
<label>Inserisci un selettore</label>
<input type="text" class="form-control" id="selector">
</div>
<div class="form-group">
<button id="btn-seleziona" class="btn btn-default">Seleziona</button>
</div>
<div class="form-group">
<label>Inserisci un url</label>
<input type="text" class="form-control" id="image-url">
</div>
<div class="form-group">
<button id="addImage" class="btn btn-default">Crea immagine</button>
<button id="resetImages" class="btn btn-danger">Cancella</button>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script>
if (!window.jQuery)
document.write('<script src="js/jquery-3.2.1.min.js"><\/script>')
</script>
<script>
$(document).ready(function($) {
$('#show-hide').click(function() {
$(this)
.parent()
.toggleClass('offscreen');
});
$('#btn-seleziona').click(function() {
var sel = $('#selector').val();
$('.selezionato').removeClass('selezionato');
$(sel).addClass('selezionato');
});
$('#addImage').click(function() {
var $btn = $(this);
var url = $('#image-url').val();
if (url) {
$btn.button('loading');
$('<img />')
.attr('src', url)
.addClass("img-responsive center-block")
.appendTo('#immagini')
.on('error', function() {
alert('Errore di caricamento dell\'immagine');
$btn.button('reset');
})
.on('load', function() {
$btn.button('reset');
});
}
});
});
</script>
</body>
</html>
Foglio di stile comune a tutte le pagine web con le modifica apportate nelle ultime lezione del corso.
miostile.css
.bg-darkblue {
background-color: darkblue;
color: white;
}
.bg-sfumato {
background-image: -webkit-gradient(linear,left top, left bottom,from(#000033),to(#800));
background-image: -webkit-linear-gradient(#000033,#800);
background-image: linear-gradient(#000033,#800);
color: white;
}
.fullscreen {
min-height: 100vh;
margin-bottom: 0;
}
.jumbotron .page-header {
margin-top: 0;
padding-bottom: 50px;
}
.off.dissolvenza {
opacity: 0;
}
.dissolvenza {
opacity: 1;
-webkit-transition: all 0.7s;
transition: all 0.7s;
}
.off.rotazione {
opacity: 0;
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.rotazione {
opacity: 1;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.off.zoom {
-webkit-transform: scale(0.1, 0.1);
-ms-transform: scale(0.1, 0.1);
transform: scale(0.1, 0.1);
opacity: 0;
}
.zoom {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
opacity: 1;
-webkit-transition: all 1s;
transition: all 1s;
}
.off.slide {
-webkit-transform: translateY(-20%);
-ms-transform: translateY(-20%);
transform: translateY(-20%);
opacity: 0;
}
.slide {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-transition: all .7s;
transition: all .7s;
}
/* Interruttore */
.interruttore {
border:0;
background-image: url(/img/on-off.png);
background-position: top left;
width: 80px;
height: 80px;
border-radius: 50%;
-webkit-box-shadow: #000 0 0 10px;
box-shadow: #000 0 0 10px;
margin: 10px;
}
.interruttore:focus {
outline: 0;
}
.interruttore.on {
background-position: toin-right: -5px;
-webkit-box-shadow: #400 0 0 10px;
box-shadow: #400 0 0 10px;
}
.btn-history {
margin-top: 40px;
border-radius: 20px;
}
.row.slim {
margin-left: -5px;
margin-right: -5px;
}
.row.slim [class^="col-"] {
padding-left: 5px;
padding-right: 5px;
}
.row.slim .picture {
padding-bottom: 100%;
background-size: cover;
border-radius: 50%;
}
.post-body {
overflow: hidden;
position: relative;
cursor: pointer;
}
.post-body.sized {
height: 60px;
}
.post-body.sized::after {
position: absolute;
display: block;
bottom: 0;
left: 0;
right: 0;
content:"";
height: 30px;
background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));
}
.side-menu {
position: fixed;
top: 20vh;
right: 0;
min-height: 300px;
transition: all 0.7s;
}
.side-menu .btn-menu {
border-radius: 0;
background-color: black;
color: white;
padding: 10px;
display:block;
float: left;
}
.side-menu .form {
background-color: black;
color: white;
padding: 20px;
min-height: 300px;
width: 270px;
float: left;
}
.side-menu.offscreen {
transition: all 0.7;
right: -270px;
}
.selezionato {
background-color: yellow;
border: 1px red solid;
}