FILOWEB.IT:
Tutorials e script

 
Home Menu Gallery Roberto Contatti
 

Sistema di schede simile a google news

Per vedere lo script in azione premi qua

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();

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


---- 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 id="fondo">

</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/>

<a href="https://plus.google.com/share?url=http://filoweb.it/galleria2015/index.aspx" target="_blank" class="gplus"><img src="../gplus.png" alt="G+" width="30" height="30" /></a>
&nbsp;
<a href="http://www.facebook.com/sharer.php?u=http://filoweb.it/galleria2015/index.aspx&title=Sito personale di Filippo Brunelli: Galleria fotografica" class="facebook" target="_blank">
<img src="../fb.png" alt="FB" width="30" height="30" /></a>
&nbsp;
<a href="http://twitter.com/share?url=http://filoweb.it/galleria2015/index.aspx&title=Sito personale di Filippo Brunelli: Galleria fotografica" target="_blank" class="twitter">
<img src="../twitter.png" alt="TW" width="30" height="30" /></a>
&nbsp;
<a href="whatsapp://send?text=Ti suggerisco di leggere questo dal sito www.Filoweb.it http://www.filoweb.it/galleria2015/index.aspx" class="whatsapp" ><img src="../WhatsApp-128.png" alt="whatsapp" width="30" height="30" /></a>

</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>

<!-- qua lo script -->
<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>

<script type="text/javascript">
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)
}
</script>
<!-- fine script -->

</body>
</html>

Contenuti


↑ Top ↑

G+ FB TW whatsapp RSS FEED

LISTA TUTORIALS

Iframe ad altezza variabile
Sistema di schede simile a google news
CREARE UN LIGHTBOX RESPONSITIVE PERSONALIZZATO
ANIMAZIONI CON JQUERY
CREARE UN SISTEMA SOLARE CON 3 PIANETI

filoweb.it è il sito personale di Filippo Brunelli
(c) 2017 Filippo Brunelli
Le immagini ed i testi contenuti nel sito sono di proprietà di Filippo Brunelli salvo diversamente indicato.
L'uso delle immagini e del testo è gratuito per uso personale ed è subbordinato alla citazione della fonte.