Hovercard gaya Facebook menggunakan jQuery dan CSS
Minggu, 23 November 2014
Facebook UI memiliki banyak komponen yang diadaptasi di seluruh dunia oleh jutaan pengguna. Salah satu fiturnya adalah Hovercard. Ini ditampilkan ketika pengguna mengarahkan nama halaman / orang / grup. Di sini, fitur itu diimplementasikan menggunakan jQuery dan CSS.
Saya telah menerapkan ini sebagai respons statis. Tidak ada respons sisi server yang terlibat.
Elemen yang Diperlukan
jQuery - perpustakaan JavaScript
Tooltipster jQuery Plugin - Tooltipster adalah plugin jQuery yang bagus yang harus Anda checkout. Anda juga dapat mengimplementasikan fitur ini sendiri tanpa menggunakan perpustakaan, tetapi mengikuti KERING (hanya untuk mengimplementasikan ini) adalah apa yang membuat saya menggunakan ini. Ada juga plugin jQuery lain yang dapat digunakan untuk mengimplementasikan fitur UI ini.
Kode HTML
<div class="hovercard">
<div>
<div class="display-pic">
<div class="cover-photo">
<div class="display-pic-gradient"></div><img src=
"dp.jpg"></div>
<div class="profile-pic">
<div class="pic"><img src="avatar.jpg" title=
"Profile Image"></div>
<div class="details">
<ul class="details-list">
<li class="details-list-item">
<p><span class="glyph glyph-home"></span>
<span>Also Lives in <a href="#">Chennai</a>
<a href="#">TamilNadu</a></span></p>
</li>
<li class="details-list-item">
<p><span class="glyph glyph-work"></span>
<span>Founder at <a href=
"#">CodeDodle</a></span></p>
</li>
</ul>
</div>
</div>
</div>
<div class="display-pic-gradient"></div>
<div class="title-container">
<a class="title" href="#" title="Visit Page">Tamil Selvan</a>
<p class="other-info">2 followers</p>
</div>
<div class="info">
<div class="info-inner">
<div class="interactions">
<a class="btn" href="#">Add Friend</a> <a class="btn"
href="#">Follow</a>
</div>
</div>
</div>
</div>
</div>
Hanya beberapa elemen html dasar yang disusun untuk membuat kartu hover.
Kode JavaScript
$(function() {
$('#my-tooltip').tooltipster({
interactive: true,
content: 'Loading...',
contentCloning: false,
contentAsHTML: true,
animation: 'fade',
functionBefore: function(origin, continueTooltip) {
// we'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data.
continueTooltip();
origin.tooltipster('content', '<div class="hovercard"> <div> <div class="display-pic"> <div class="cover-photo"> <div class="display-pic-gradient"></div><img src="dp.jpg"> </div><div class="profile-pic"> <div class="pic"> <img src="avatar.jpg" title="Profile Image"> </div><div class="details"> <ul class="details-list"> <li class="details-list-item"> <p> <span class="glyph glyph-home"></span> <span> Also Lives in <a href="#">Chennai</a> <a href="#">TamilNadu</a></span> </p></li><li class="details-list-item"> <p> <span class="glyph glyph-work"></span> <span> Founder at <a href="#">CodeDodle</a></span> </p></li></ul> </div></div></div><div class="display-pic-gradient"></div><div class="title-container"> <a class="title" href="#" title="Visit Page">Tamil Selvan</a> <p class="other-info">2 followers</p></div><div class="info"> <div class="info-inner"> <div class="interactions"> <a href="#" class="btn">Add Friend</a> <a href="#" class="btn">Follow</a> </div></div></div></div></div>');
}
});
});
Kunjungi situs web tooltipster untuk melihat API Tooltipster yang disediakan. Berikut ini adalah API penting yang digunakan untuk mengimplementasikan fitur ini,
interactive- Ini diatur agar tidak bersembunyi ketika kursor ada di kartu hover.content- Konten awal yang akan ditampilkan sebelum memuat data. Dalam hal ini data di-hardcode, sehingga responsnya akan spontan.contentAsHTML- Cuaca untuk memperlakukan konten sebagai HTML atau hanya teks biasa. Dalam kasus kami, konten yang dikirimkan adalah HTML.functionBefore- Fungsi panggilan balik yang akan digunakan untuk mengambil data dari server. Ini hanya teks yang di-hardcode.
Kode CSS
/**
* Author : Tamil Selvan K
* Website : http://codedodle.com
*/
a {
color: #3B5998;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.hovercard {
width: 370px;
height: 239px;
border: 0;
position: relative;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 10px rgba(0, 0, 0, .35);
-webkit-border-radius: 2px;
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 10px rgba(0, 0, 0, .35);
}
/** Cover picture styles */
.display-pic {
height: 137px;
background-color: #0080CC;
position: relative;
}
.display-pic-gradient {
height: 97px;
position: absolute;
top: 43;
width: 100%;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(38,38,38,0.40) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(38,38,38,0.40))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(38,38,38,0.40) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(38,38,38,0.40) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(38,38,38,0.40) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(38,38,38,0.40) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#8c262626',GradientType=0 ); /* IE6-9 */
}
.cover-photo {
height: 140px;
overflow: hidden;
}
.profile-pic {
position: absolute;
width: 350px;
height: 100px;
left: 10px;
top: 85px;
z-index: 1;
}
.pic {
border: 1px solid rgba(0, 0, 0, .3);
width: 100px;
height: 100px;
border-radius: 3px;
padding: 3px;
background-color: white;
}
.title-container {
margin: -40px 0 0 140px;
position: absolute;
}
.title-container a {
color: #ffffff;
font-size: 12px;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-weight: bold;
font-size: 14px;
text-decoration: underline;
}
.other-info {
color: #fff;
font-size: 12px;
margin: 0;
}
/** Hover card info and interaction */
.info {
height: 37px;
width: 100%;
background-color: #f2f2f2;
border: 1px solid #ccc;
border-bottom: none;
border-left: none;
border-right: none;
position: absolute;
top: 200px;
}
.info-inner {
padding: 9px;
margin-left: 120px;
}
.info-inner a {
text-decoration: none;
}
.interactions {
float: right;
}
/** Person/Page info styles */
.details {
margin-top: -60px;
margin-left: 90px;
font-size: 11px;
}
.details-list {
list-style-type: none;
color: #333;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}
.details-list-sub-item {
color: #9197a3;
}
/** Hovercard utils */
.glyph {
background-repeat: no-repeat;
background-image: url('spirit.png');
background-size: auto;
display: inline-block;
height: 16px;
width: 16px;
}
.glyph-home {
background-position-y: 0px;
}
.glyph-edu {
background-position-y: -15px;
}
.glyph-loc {
background-position-y: -34px;
}
.glyph-work {
background-position-y: -50px;
}
.btn {
background: #f6f7f8;
border: 1px solid #c6c7ca;
color: #747474;
font-size: 12px;
font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-weight: bold;
padding: 6px 8px;
text-align: center;
text-decoration: initial;
vertical-align: middle;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-sizing: content-box;
-webkit-font-smoothing: antialiased;
}
/* for demo */
#global-container {
width: 800px;
height: 400px;
margin: 30px auto;
background-color: #E0E8FF;
border: 1px solid lightgrey;
border-radius: 3px;
padding: 10px;
text-align: center;
}
Kode CSS di atas memberi gaya komponen hovercard. Ini mengimplementasikan beberapa gaya CSS dasar dan Image Sprite .
Dalam posting mendatang, ini akan diimplementasikan dengan data nyata dari sisi server.
Posted by , Published at Maret 31, 2019 and have
0
komentar
