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ć.
2 odpowiedzi na “jQuery: Media Center …”
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 😉
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.