niedziela, Sierpień 23rd, 2009

jQuery: Media Center …

jquerycenterZainspirowany 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.

Be Sociable, Share!

Kategorie: jquery / projekty
Możesz śledzić komentarze do tego wpisu poprzez kanał RSS 2.0. Możesz również napisać własny komentarz, lub umieścić odnośnik do tego wpisu, na swojej stronie.

3 komentarze/y

Sierpień 23, 2009

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 ;)


Sierpień 23, 2009
admin

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.


Sierpień 23, 2009
Magda

Dziękuję za dedykację. Czuję się zaszczycona „Miszczu” ;)


  • *

    Spam Protection by WP-SpamFree