Polski Blog TemplateMonster

Tutorial: Pojawiające Się Okienko Udostępniania Media Społecznych Z jQuery

Katarzyna Pawłowska

Media społeczne to wielka sprawa dla prawie każdej firmy. Przy odpowiednim brandingu można włączyć konto mediów społecznościowych do ogromnych aktywów rynkowych. Dlatego duże firmy takie jak Facebook mogą przyciągnąć tak wielu inwestorów - bo ludzie chcą podłączyć i udostępniać informacje cyfrowo. Ale stary wbudowany przycisk udostępniania mediów społecznościowych - to przyszłość, dlatego dziś pokażę jak jego trochę aktualizować.

W tym tutorialu chciałabym pokazać, jak stworzyć pojawiające się okienko z widżetami media społecznych. Okienko jest wyświetlane za pośrednictwem jQuery i może posiadać dowolną liczbę widżetów z Twitter, Facebook, Instagram, YouTube itp. Obejrzyj moje demo, aby zobaczyć ostateczny projekt w akcji.


Demo – Pobrać kod źródłowy

Pierwsze kroki

Najpierw utwórz nowy dokument HTML i zrób foldery dla plików CSS i JS. Mój arkusz stylów ma nazwę styles.css ale możesz wybrać dowolną nazwę pliku. Również pobierz lokalną kopię jQuery i włącz ją w nagłówku.

<!doctype html>

1
2
3

 
 
  <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>

Wewnątrz body strony rzeczy są trochę przemieszane. Mam jeden zewnętrzny pojemnik z ID #wrapper centrowaniem całej zawartości. Potem stworzyłam ogólny pojemnik na lonki mediów społecznych z wykorzystaniem klasy .social-linki. Każdy link to ikonka social media z darmowego zestawu ikon Metro Uinvert

Ponieważ lonki ikon są umieszczone obok siebie, umieściłam je do pojemnika .clearfix. Jest to bardzo ważne, aby zapewnić że dalsza treść strony jest prawidłowo rozliczona.

Okienko Udostępniania Media Społecznych

1

<!-- @end #wrapper -->

Spójrz na każdą pojedynczą sekcję i zauważysz dwie klasy na każdym pojemniku. Na przykład pierwszy widget Twitter ma klasę .glyph i .twitter. Klasa glifów ustanawia ogólne domyślne dla każdego odnośnika takiego jak padding i odstępy. Klasa wtórna służy do nałożenia szczegółowego tla na link ikony.

Pojemnik .glyph ma dwa oddzielne elementy. Pierwszy jest pojawiający się div, który jest początkowo ukryty. Drugi używa klasy .bubble i znajduje się obok anchor linku bez tekstu.

Jeszcze jedno na co trzeba zwrócić uwagę - dodanie klasy .wide w okienko Facebook. Jest trochę dłuższy od "Lubię to!", stworzyłam dwie różne klasy pojawiającego się okienka - jedne regularnej wielkości i druge, nieco szersze. Jeśli chcesz zwiększyć rozmiar zawsze można stworzyć własne rozszerzone pojawiające się okienko.

Projektowanie w CSS

Przechodząc do CSS wytłumaczę jak strona jest zorganizowana i jak są rozmieszczone elementy. Wszystkie zdjęcia są zapisywane w folderze "css", ponieważ każde z nich jest używany jako tło CSS. To sprawia, że zarządzanie zasobami jest dużo łatwiejsze w dłuższej perspektywie.

Aby rozpocząć skorzystam resetu CSS szablonu Eric Meyer. Dla tla body strony używam Cream Dust tile z Subtle Patterns.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

 /** page structure **/
#wrapper {
 display: block;
max-width: 700px;
min-width: 350px;
margin: 0 auto;
padding: 20px 0;
}
 
 
/** social links **/
.social-links {
display: block;
width: 250px;
padding-top: 100px;
margin: 0 auto;
}

Owinięcie zewnętrzne powinno być oczywiste, jako ogólny pojemnik. Pojemnik wewnętrzny .social-links zawiera linki ikon i centrowanie ich na stronie.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

 .glyph {
display: block;
position: relative;
float: left;
width: auto;
height: auto;
margin-right: 2px;
padding: 3px 6px;
height: 35px;
width: 52px;
}
.glyph.active {
background: url('bubble-sm.png');
background-position: -9px 40px;
}
 
.glyph .bubble {
display: none;
width: 140px;
height: 89px;
position: absolute;
margin: 0;
text-align: center;
background: url('bubble-sm.png');
padding: 20px 20px;
bottom: 35px;
left: -9px;
cursor: pointer;
}
.glyph .bubble.wide {
width: 160px;
left: -6px;
background: url('bubble-wide.png');
}

Co do klasy .glyph. Używam pozycjonowanie względne, bo glify potrzebują odpowiedniego odstępu i wewnętrzne pojawiające się okienko jest umieszczone absolutnie. Takie rowiązanie jest najprostsze.

Jeśli poglądasz na klasę .bubble zauważysz że używam zdjęcie tła dla efektu cienia. Podziełilam zdjęcie na dwie części tak, że gdy spotykają się link ikony i pojawiające się okienko stwarzają jednolite tlo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

.glyph a {
display: block;
position: relative;
height: 33px;
width: 40px;
}
 
.glyph.twitter a {
background: url('twitter-grey@2x.png');
background-repeat: no-repeat;
background-size: 33px 28px;
top: -4px;
left: -1px;
}
.glyph.twitter.active a {
background: url('twitter@2x.png');
background-repeat: no-repeat;
background-size: 33px 28px;
}
.glyph.twitter .bubble {
padding-top: 28px;
padding-left: 24px;
}
 
 
.glyph.facebook a {
background: url('facebook-grey@2x.png');
background-repeat: no-repeat;
background-size: 33px 28px;
top: -4px;
left: -1px;
}
.glyph.facebook.active a {
background: url('facebook@2x.png');
background-repeat: no-repeat;
background-size: 33px 28px;
}
.glyph.facebook .bubble {
padding-top: 30px;
}
 
 
.glyph.dribbble a {
background: url('dribbble-grey@2x.png');
background-repeat: no-repeat;
background-size: 33px 28px;
top: -4px;
left: -1px;
}
.glyph.dribbble.active a {
background: url('dribbble@2x.png');
background-repeat: no-repeat;
background-size: 33px 28px;
}
.glyph.dribbble a.dbfollow {
width: 85px;
height: 36px;
background: url('db-follow-grey@2x.png');
background-repeat: no-repeat;
background-size: 84px 35px;
}
.glyph.dribbble a.dbfollow:hover {
background: url('db-follow@2x.png');
background-repeat: no-repeat;
background-size: 84px 35px;
}
.glyph.dribbble .bubble {
padding-top: 30px;
padding-left: 30px;
}

Wreszcie dochodzimy do stylu ikony, który jest tworzony przy użyciu konkretnych klas. Każdy styl ikony ma dwa różne efekty: oryginalne ikony i ikony z efektem najechaniem kursora. Efekt najechania tylko dodaje ikonie koloru, ale nadal ona znajduje się w tym samym miejscu.

Również używam @2x retina zdjęcia aby każda ikona dobrze wyglądala i na Retina MacBookach, i na urządzeniach Hi-DPI.

Animowanie w jQuery

Wracając do pliku HTML Dodałam mały blok języka JavaScript w dolnej części dokumentu. Wszystko jest napisane w jQuery i używa .on() funkcję modułu obsługi zdarzeń.

1
2
3
4
5
6
7
8
9

 $(function(){
$('.glyph').on('mouseover', function(e){
$(this).addClass('active');
$(this).find('.bubble').css('display','block');
}).on('mouseleave', function(e){
$(this).find('.bubble').css('display','none');
$(this).removeClass('active');
});
});

Tworząc selektor z klasy .glyph mogę uruchomić funkcję na każdej z ikon. Z jQuery faktycznie mogę polączyć dwie funkcje razem - na najechaniu myszą i gdy kursor pozostawia ikonę.

Więc, gdy użytkownik nakieruje na ikonę działa klasa .active. To powinno zastąpić szare tlo ikony całkowicie kolorową wersją. Następnie za pomocą metody .find() wybierajam pierwszą z klasy .bubble i stosuje dispaly: blok do elementu.

Gdy mysz użytkownika pozostawia ikonę lub pojawiające się okienko wtedy obie z tych akcji są odwrócone. Tak klasa .active jest usunięta i okienko ponownie jest ukryte. Efekt można zrobić za pomocą czystego CSS3, ale nie będzie wspierany w starszych wersjach przeglądarek. Bardzo podoba mi się rozwiązanie jQuery i działa idealnie.

Podsumowanie

Efekt pojawiającego się okienka jest bardzo przyjemny i działa świetnie na stronach prawie każdego rodzaju — zaczynając od portfolio do stron dużych korporacji. Glównym zadaniem tego efektu jest zaoszczędzenie miejsca na ekranie, oraz jest to o wiele więcej niż tylko link do swojego profilu społecznego. Jeśli użytkownik chce kliknąć ikonę połączenia może sprawdzić Twój profil - ale w tym przypadku użytkownik również otrzymuje możliwość dzielenia treścia. Zapraszam pobrać kopię mojego kodu źródłowego i zobaczyć, czy można go dopasować do przyszłych web design projektów.

Ten artykuł został przetłumaczony z angielskiego.Oryginał można znaleźć tutaj: Hidden Social Media Sharing Popup Bubbles with jQuery Tutorial

Czytaj również:

Jak szybko dodać skrypt jQuery do WordPressa

43 Wtyczki jQuery do prezentacji treści w Karuzeli

Tworzenie przycisku "Powrót do góry" za pomocą CSS i jQuery