Ostatnimi czasy autor ma tak mało czasu że znalezienie wolnej chwili na napisanie kolejnego tekstu graniczy z cudem.
W tym odcinku zajmiemy się stworzeniem rzeczy banalnej, aczkolwiek czasami bardzo przydatnej.
Zwykły popup z ładnym przewijaniem zawartości.
<div class="popup"> <div class="bg"></div> <div class="container"> <input type="button" class="close" value="x" /> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero arcu, vulputate sit amet mattis sit amet, ultrices in erat. Aenean suscipit arcu ac lorem lacinia ut scelerisque turpis commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas non justo vitae risus ornare convallis. Phasellus tristique ultricies leo, vitae posuere quam sollicitudin ut. Praesent eget neque sit amet augue bibendum accumsan. Morbi sed fringilla sem. In quam lectus, placerat in laoreet in, ullamcorper vel lacus. Nunc pellentesque suscipit sollicitudin. Aenean sollicitudin metus eget lectus rutrum luctus. Aliquam erat volutpat. Integer nulla erat, auctor vitae blandit ac, vestibulum in turpis. Mauris nec velit enim, vitae elementum risus. Aliquam nisi lectus, interdum a viverra ut, tristique at risus. Aliquam sit amet risus sed ante consequat bibendum. In bibendum, libero sit amet hendrerit commodo, ligula metus lobortis elit, vitae vulputate nibh lacus condimentum felis. Nullam a dolor ut diam ultrices malesuada. Fusce lacus nibh, facilisis sed semper quis, ornare id mauris. Etiam metus odio, commodo sed malesuada a, elementum nec velit. In luctus tellus ut felis elementum auctor. Donec condimentum, justo blandit accumsan vehicula, magna mauris ultricies erat, in vulputate tortor nisl et massa. Nunc ut nunc vel lorem viverra interdum quis ac lectus. Sed porta rhoncus pharetra. Sed tortor mi, ultrices in tincidunt et, mollis ac augue. Etiam id nulla vehicula libero iaculis condimentum in at ligula. Morbi porta arcu quis sem condimentum scelerisque. Ut at eros lacus, id viverra tellus. Integer sed tempus eros. Duis sed mi eget urna laoreet auctor a sed velit. </div> </div> </div>
Jak zauważyliście nasz popup składa się z 2 części - tła oraz z containera który posiada swój content i przycisk zamykający. Oddzielenie tła od containera jest konieczne, gdyż dla tła chcemy nadać przezroczysty kolor, a nie chcemy tego robić dla containera.
Zacznijmy stylować nasz popup.
Popup musi się znajdować nad resztą elementów strony, dlatego musimy mu ustawić wysoki z-index. Chcemy też, by
popup zajmował całą powierzchnię ekranu i zawsze pozostawał w centralnej jego części.
Tło popupa zajmować będzie przykrywać cały ekran, będzie nieco przezroczyste i będzie pod containerem (czyli posiadać będzie mniejszy z-index):
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: none; /* domyślnie nie pokazujemy popupa */
}
.popup .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: #000;
opacity: 0.7;
}
.popup .container {
width: 400px;
height: 300px;
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
margin-top: -150px; /* minus połowa wysokości */
margin-left: -200px; /* minus połowa szerokości */
background: #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 50px #000;
-webkit-box-shadow: 0 0 50px #000;
box-shadow: 0 0 50px #000;
}
.popup .close {
width: 13px;
height: 13px;
display: block;
border: 0;
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
text-indent: -999em;
overflow: hidden;
background: url(../close.png) no-repeat;
}
.popup .content {
margin: 15px 25px 15px 15px;
width: 360px;
height: 270px;
font: 12px 'Segoe UI', Arial, sans-serif;
color: #444;
overflow: auto;
}
I tyle wystarczy by nasz popup jakoś wyglądał. Oczywiście najlepiej użyć Firebuga tak by wyłapać poszczególne
elementy naszego popupa po stylowaniu.
A jeszcze lepszym pomysłem jest skorzystanie z dodatku do Firefoxa o nazwie
X-fire, który tworzy połączenie między zmianami CSS w firebugu a naszym kodem w edytorze :)
Cała idea tworzenia popupa polega na stworzeniu warstwy z pozycjonowaniem fixed, która jest ustawiona na cały ekran, oraz ma wysoki z-index. Container popupa ma pozycjonowanie absolutne (nie ma znaczenia czy ma fixed, czy absolute, ponieważ jego rodzic i tak ma fixed), które ustawia go na środku ekranu. Dodatkowo korygujemy tą pozycję ujemnymi marginesami. Ot - cała sztuczka :)
Napiszmy teraz bardzo krótki skrypt, który pokaże nam naszego popupa, oraz obsłuży jego zamykanie.
$('.link').click(function(e) {
//jeżeli popup nie jest widoczny to go pokaż
if (!$('.popup:visible').length) {
$('.popup').fadeIn();
}
e.preventDefault();
return false;
});
//zdarzenie zamknięcia podpinamy pod przycisk close i pod tło popupa
$('.popup .close, .popup .bg').click(function() {
$(this).parents('.popup').fadeOut();
});
W tym momencie mamy stworzonego kompletnego popupa. Jak widzicie jest to bajecznie proste i wcale nie wymaga korzystania z super wypaśnych pluginów które najczęściej poza tą prostą czynnością obładowane są zbędnymi bajerami.
Jak wspomniałem na początku dla naszego popupa stworzymy ładnie stylowane przewijanie.
Aby to zrobić musimy skorzystać z pluginu. Bardzo fajnym pluginem tworzącym skrolowanie jest:
http://jscrollpane.kelvinluck.com/.
Ściągamy pliki: jquery.jscrollpane.css, jquery.mousewheel.js i jquery.jscrollpane.min.js i podpinamy do naszej strony.
Wystarczy teraz wywołać ten plugin przy pokazywaniu naszego popupa. Przerabiamy więc nieco nasz wcześniejszy kod.
<div class="popup"> <div class="bg"></div> <div class="container"> <input type="button" class="close" value="x" /> <div class="content"> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero arcu, vulputate sit amet mattis sit amet, ultrices in erat. Aenean suscipit arcu ac lorem lacinia ut scelerisque turpis commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas non justo vitae risus ornare convallis. Phasellus tristique ultricies leo, vitae posuere quam sollicitudin ut. Praesent eget neque sit amet augue bibendum accumsan. Morbi sed fringilla sem. In quam lectus, placerat in laoreet in, ullamcorper vel lacus. Nunc pellentesque suscipit sollicitudin. Aenean sollicitudin metus eget lectus rutrum luctus. Aliquam erat volutpat. Integer nulla erat, auctor vitae blandit ac, vestibulum in turpis. Mauris nec velit enim, vitae elementum risus. Aliquam nisi lectus, interdum a viverra ut, tristique at risus. Aliquam sit amet risus sed ante consequat bibendum. In bibendum, libero sit amet hendrerit commodo, ligula metus lobortis elit, vitae vulputate nibh lacus condimentum felis. Nullam a dolor ut diam ultrices malesuada. Fusce lacus nibh, facilisis sed semper quis, ornare id mauris. Etiam metus odio, commodo sed malesuada a, elementum nec velit. In luctus tellus ut felis elementum auctor. Donec condimentum, justo blandit accumsan vehicula, magna mauris ultricies erat, in vulputate tortor nisl et massa. Nunc ut nunc vel lorem viverra interdum quis ac lectus. Sed porta rhoncus pharetra. Sed tortor mi, ultrices in tincidunt et, mollis ac augue. Etiam id nulla vehicula libero iaculis condimentum in at ligula. Morbi porta arcu quis sem condimentum scelerisque. Ut at eros lacus, id viverra tellus. Integer sed tempus eros. Duis sed mi eget urna laoreet auctor a sed velit. </div> </div> </div> </div>
Niestety nie wiem czemu w tym przypadku musiałem dodać ten dodatkowy div. W normalnej sytuacji nie jest to wymagane, niestety tutaj normalnie nie chciało działać :)
Do przerobienia jest też nasz kod JS, w którym dodajemy wywołanie pluginu:
$('.link').click(function(e) {
//jeżeli popup nie jest widoczny to go pokaż
if (!$('.popup:visible').length) {
$('.popup').fadeIn();
//nakazujemy pluginowi ustawienie sztywnych wymiarów suwaka i pokazanie strzałek
$('.popup .content').jScrollPane(
{
verticalDragMinHeight: 29,
verticalDragMaxHeight: 29,
horizontalDragMinWidth: 16,
horizontalDragMaxWidth: 16
}
);
}
e.preventDefault();
return false;
});
Zauważ, że plugin podpinamy PO odpaleniu pokazywania popupa (czyli po wywołaniu fadeIn).
Czemu tak? Wina leży po stronie logiki CSS :)
Otóż wszystkie elementy, które mają ustawione "display : none" mają swoje wymiary wyzerowane (co jest niby logiczne).
Tak więc nasz plugin nie jest w stanie poprawnie wyliczyć wielkości scrolowanego diva itp.
Jako ciekawostkę dodam, że większość pluginów zamieniających wygląd inputów typu FILE zwyczajnie się krzaczy gdy zastosujemy je na ukryte inputy.
Dlatego warto pamiętać by takie pluginy odpalać dopiero po pokazaniu danego elementu :)
I w zasadzie tutaj powinniśmy zakończyć naszą zabawę, gdyby autor tego pluginu nie zawalił sprawy w CSS!
Pierwsza sprawa to nie umieszczenie stylowania dla .jspArrowUp i .jspArrowUp czyli indywidualnych styli
dla naszych strzałeczek. Musimy je sami dodać. Dodatkowo musimy pozbyć się zbędnego stylowania z tego pliku - np głupich backgroundów dla paska przewijania i strzałeczek.
Nie jest to trudne gdy korzystamy z firebuga. Kilka szybkich szlifów i nasz popup jest gotowy.
Resztę stylowania i odpowiednie dopracowywanie wyglądu pozostawiam wam.