:: FILOWEB.it: Sistema di schede simile a google news

Creare un sistema di schede simile alle news di Google
A giugno Google ha introdotto una nuova interfaccia per la visualizzazione delle news.
Il sistema fa uso dell’interfaccia stile material design e una nuovo modo di condivisione.
Nel complesso il metodo è molto semplice e con poche righe di codice è possibile fare tutto:

Prima lo script per chiudere la scheda:

function removeThis(field)
{
$(field).parent().hide("slow");
$("#fondo").hide();

E poi lo script per condividere:
function condividi (titolo,linka) {
$("#fondo").show(500);
$("#sharefin").show(501);
$("#titolo").text(titolo);
$("#link").text(linka);
$(".gplus").attr('href', 'https://plus.google.com/share?url='+linka)
$(".facebook").attr('href', 'http://www.facebook.com/sharer.php?u='+linka+'&title='+titolo)
$(".whatsapp").attr('href', 'whatsapp://send?text='+linka+' '+titolo)
}

Nel file CSS creiamo le nostre schede in stile material design ed il bottone di chiusura che chiamerà la funzione removeThis() sul click (onclick="removeThis(this);">x</a>) :

.card {
width:90%;
max-width:900px;
text-align:justify;
min-height:90px;
padding-right: 10px;
padding-left: 10px;
padding-bottom:0.5em;

background: #fff;
border-radius: 2px;
display: inline-block;
margin-bottom:0.3rem;
margin-top: 0.3rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.close {
color: #777;
font: 18px/100% arial, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
position:relative;
float:right;
right:5px;
}

Quando premo sul tasto per chiudere la scheda la funzione removeThis() prende il DOM dell’elemento invocato e chiude l’elemento genitore.
La funzione condividi apre prima due div (uno che copre la pagina con un opacità 0.4) e uno che mostra il link e i bottoni di share
Vengono passati i parametri del link e del titolo alle rispettive icone: Creare un sistema di schede simile alle news di Google
A giugno Google ha introdotto una nuova interfaccia per la visualizzazione delle news.
Il sistema fa uso dell’interfaccia stile material design e una nuovo modo di condivisione.
Nel complesso il metodo è molto semplice e con poche righe di codice è possibile fare tutto:

Prima lo script per chiudere la scheda:

function removeThis(field)
{
$(field).parent().hide("slow");
$("#fondo").hide();

Nel file CSS creiamo le nostre schede in stile material design ed il bottone di chiusura che chiamerà la funzione removeThis() sul click (onclick="removeThis(this);">x</a>) :

.card {
width:90%;
max-width:900px;
text-align:justify;
min-height:90px;
padding-right: 10px;
padding-left: 10px;
padding-bottom:0.5em;

.close {
color: #777;
font: 18px/100% arial, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
position:relative;
float:right;
right:5px;
}

---- Script completo ---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Schede simili a google news</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">

body {
color:#000;
background-color: #FFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align:center;
}

/* material schede */
.card {
width:90%;
max-width:900px;
text-align:justify;
min-height:90px;
padding-right: 10px;
padding-left: 10px;
padding-bottom:0.5em;

background: #fff;
border-radius: 2px;
display: inline-block;
margin-bottom:0.3rem;
margin-top: 0.3rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

/* fine material schede */

/* Close Button */

.close {
color: #777;
font: 18px/100% arial, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
position:relative;
float:right;
right:5px;
}
/* fine Close Button */

/* condividi */
#fondo {
width:100%;
height:100%;
min-height:100%;
position:fixed;
background-color:#FFF;
z-index:9998;
opacity:0.4;
display:none;

}
#sharefin {
width:300px;
height:150px;
position:fixed;
z-index:9999;
top:50%;
margin-top:-150px;
margin-left:-150px;
left:50%;
background-color:#FFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
display:none;
text-align:left;
}

.share {
font-size:20px;
color:#BFBFBF;
float:right;
margin-right:20px;
cursor:pointer;
}
#link {
border:none;
border-bottom:#004A95 1px solid;
}
#titolo {
font-size:18px;
font-weight:700;
}

</style>
</head>

<body>

</div>

<div id="sharefin">
<a href="#" class="close" onclick="removeThis(this);">x</a><br/>
<div id="titolo">Titolo</div><br/>
<div id="link">LINK</div><br/>

</div>

<div class="card">
<h1> Sistema di schede simile a google news </h1>
<h2> By <a href="filoweb.it">Filoweb.it</a></h2>
</div>

<div class="card">
<a href="#" class="close" onclick="removeThis(this);">x</a><br/>
<h3 class="titolocard"> Scheda1 </h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br/>
<i class="fa fa-share-alt share" aria-hidden="true" onclick="condividi('Scheda1','http://www.filoweb.it')" ></i>

</div>

<div class="card">
<a href="#" class="close" onclick="removeThis(this);">x</a><br/>
<h3 class="titolocard"> Scheda2 </h3>
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.<br/>
<i class="fa fa-share-alt share" aria-hidden="true" onclick="condividi('Scheda2','http://filoweb.it/tutorials/')" ></i>

</div>

<div class="card">
<a href="#" class="close" onclick="removeThis(this);">x</a><br/>
<h3 class="titolocard"> Scheda3 </h3>
Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
<br/>
<i class="fa fa-share-alt share" aria-hidden="true" onclick="condividi('Scheda3','http://www.filoweb.it/galleria2015/')" ></i>

</div>

<div class="card">
<a href="#" class="close" onclick="removeThis(this);">x</a><br/>
<h3 class="titolocard"> Scheda4 </h3>
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
<br/>
<i class="fa fa-share-alt share" aria-hidden="true" onclick="condividi('Scheda4','http://www.filoweb.it/luoghi/')" ></i>
</div>

<div class="card">
<a href="#" class="close" onclick="removeThis(this);">x</a><br/>
<h3 class="titolocard"> Scheda 5 </h3>
Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc<br/>
<i class="fa fa-share-alt share" aria-hidden="true" onclick="condividi('Scheda5','http://www.filoweb.it/ricette/')" ></i>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
function removeThis(field)
{
$(field).parent().hide("slow");
$("#fondo").hide();
}
</script>

</body>
</html>