Szeroko pojęty programista, który nie lubi się ograniczać do jednej technologii. Perfekcjonista, fan absurdalnego poczucia humoru, dla ludzi północy - góral. Uwielbia włóczykijstwo w kierunku ciekawych miejsc, spędzanie czasu z bliskimi mu osobnikami, kino, muzykę filmową, jazdę na rowerze oraz obcowanie z naturą, szczególnie górami. Lokalny patriota zakochany w Beskidach.
jQuery: Media Center …
Zainspirowany Windows Media Center, postanowiłem stworzyć coś podobnego w jQuery. Co z tego wyszło ?
Przechwytywanie klawiszy
Najważniejszą kwestią było przechwycenie klawiszy, używanych przez użytkowników. Aby to zrobić, wystarczyło podpiąć jQuery i napisać kilka prostych lini kodu:
$(function(){
$('html').keyup(function(e) {
alert(e.keyCode);
});
});
Który, pozwolił, klikając na interesujące nas klawisze na poznanie kodu tych klawiszy.
Na przykład, dla następującego kodu:
$('html').keyup(function(e) {
if(e.keyCode == 13) {
alert("Klawisz: Enter");
}
});
Wyświetli się komunikat „Klawisz: Enter”, po naciśnięciu Entera. Należy pamiętać, o nieużywaniu klawiszy, które na stałe są skrótami samej przeglądarki (np. Backspace – powrót do poprzedniej strony).
To jedyne ograniczenie, jakie pojawia się w tym przypadku.
Marginesy
Następną kwestią, było obliczanie odpowiednich marginesów, ponieważ obrazki znajdują się w boxie z overflowem, konieczne było ustawianie odpowiedniego marginesu bocznego, na bazie szerokości obrazków. Trochę matematyki, niewiele filozofii.
Demo
Jak wygląda projekt na żywo, można zobaczyć w wersji demo (działa poprawnie pod najnowszymi wersjami: Internet Explorer / Chrome / Safari / FireFox /Opera ).
Zdaje sobie sprawę, że coś jeszcze można by dodać do tego projektu, zależało mi jednak na podstawowych funkcjonalnościach i w moim przekonaniu, zadanie to udało mi się zrealizować.
Z dedykacją dla Magdy.
Podobne wpisy
3 komentarze/y
Takie było właśnie zamierzenie.
Z tego i poprzednich wpisów, można dowiedzieć się wszystkiego jak zrobić, tego typu projekcik, a w ramach ćwiczeń, jeśli ktoś chce, może to zrobić samemu.
Dziękuję za dedykację. Czuję się zaszczycona „Miszczu” 
Przykład bardzo ciekawy i fajnie wyszedł. Podstawowe funkcjonalności jak sam zaznaczyłeś działają i to jest najważniejsze. Zawsze ktoś kto miałby aspiracje na rozbudowę to może z tym powalczyć.
No i w sumie mogłeś zaprezentować i troszkę opisać resztę kodu – wiadomo można sobie podejrzeć czy też na podstawie opisu lub dema dojść do tego albo wręcz jako ćwiczenie spróbować to sobie zrobić samemu