Podczas tworzenia stron internetowych nawet jako programiści backendu nie uciekniemy od spraw frontendowych, a więc HTMLa, CSSa oraz JavaScriptu. Dlatego w dzisiejszym Linkdumpie po raz kolejny podejmujemy kwestię tego języka skryptowego. Fotografia: Andrew Dupont, CC-BY-SA. Linkdump: Mistrz JavaScriptus. 1. Simple JavaScript Inheritance with Backbone. Wprowadzenie do biblioteki Backbone.JS. 2. Announcing pushJS: Send javascript to any [...]

Seria “ciekawe pluginy jQuery” kolejny raz wzbogaciła się o interesujący eksponat. Tym razem jest to plugin służący do tworzenia animowanych podpisów. Niby nic, ale efekt końcowy robi wrażenie. Demo, download oraz opis znajdziecie pod adresem http://buildinternet.com/project/mosaic/.

W październiku zeszłego roku, ekipa odpowiedzialna za jQuery powiadomiła o zaakceptowaniu trzech pluginów autorstwa Microsoftu i możliwości dodania jednego z nich do jądra biblioteki. Pluginy te miały pojawić się wraz z wydaną trzy miesiące temu nową wersją jQuery, oznaczoną numerem 1.5. Mimo, iż na horyzoncie widać już wersję 1.6, pluginy nadal nie trafiły do biblioteki i raczej się w niej nie znajdą.

Okazało się bowiem, iż na przestrzeni wielu miesięcy, jeśli nie lat, oficjalne pluginy jQuery były traktowane po macoszemu, przez co nie powstała grupa za nie odpowiedzialna. Ludzie związani z jQuery postanowili to zmienić i rozdzielili oficjalne pluginy pomiędzy zespoły wchodzące w skład “team jQuery”, powodując tym samym jeszcze większy bałagan w pluginach i uzasadnione obawy o ich przyszłość. Plugin jquery-tmpl, autorstwa Microsoftu, trafił do ekipy odpowiedzialnej za jQuery UI, podobnie jak Globalization i bgiframe. Ludzie z jQuery Core Dev Team będą zajmować się pluginami Color, Easing oraz Mousewheel, a Microsoftowi pozostanie Data Link. Czyżby na nieskazitelnym monumencie jQuery pojawiła się pierwsza rysa? Wygląda na to, że zabrakło pomysłów na oficjalne pluginy, a te co już są próbuje się gdzieś upchnąć.

Nie znam biblioteki, która bardziej podbiłaby serca programistów stron internetowych niż jQuery właśnie. Wielu ją polubiło od pierwszej linijki kodu, wielu nienawidzi, chociaż nie zna. Nie zmienia to jednak faktu, że projekt rozpoczęty przez Johna Resiga okazał się być strzałem w dziesiątkę, rozwiązującym setki problemów związanych z różnicami w implementacji silników JavaScriptu w przeglądarkach internetowych. [...]

Seria rewelacyjne pluginy jQuery wzbogaciła się o kolejny nabytek – jRumble, plugin, który wstrząśnie naszą stroną. Zasada działania pluginu jest prosta – w reakcji na zdarzenie, wskazany element na stronie zacznie się trząść. Jak bardzo i z jakim dodatkowym efektem określamy przy pomocy kilku prostych parametrów.

Na stronie projektu znajdziecie demo, link do pobrania oraz dokumentację. Miłej zabawy.

We wszystkich swoich projektach WWW mających mieć wodotryski zapewne używacie jakichś bibliotek Javascriptowych. Ja używam jQuery. Do wywołania efektu powiększającego się obrazka na przyciemnionym tle przyjął się powszechnie skrypt Lightbox. Korzysta niestety z bibliotek Prototype i Scriptaculous. W efekcie stworzenie kilku prostych efektów + efekt lightbox generował potrzebę pobrania przez użytkownika trzech sporych bibliotek ze skryptami JS.

Dzisiaj chciałem zareklamować skrypt, który używa wyłącznie jQuery przy tworzeniu lightboksa. Zwie się jQuery lightBox plugin. Sama instrukcja użycia jest dosyć prosta i nie będę o niej pisał. Zamiast tego napiszę jak zrobić żeby nie trzeba było otaczać obrazków linkami, chociażby po to, że nie chcemy oficjalnie chwalić się adresami url do dużych obrazków. Opis do ramki weźmiemy z atrybutu alt="", czyli ostatecznie nie musimy dokonywać żadnych zmian w kodzie HTML strony.

Standardowe przygotowanie kodu HTML wygląda tak: <a href="duzy_obrazek.jpg" rel="lightbox" title="Tytuł obrazka" ><img src="maly_obrazek.jpg"></a<. Wyżej wymienioną przeze mnie bibliotekę da się w miarę łatwo zmusić do współpracy z samymi elementami <img>, a samo wywołanie lightboksa może robić się automagicznie na podstawie rodzica <div> otaczającego obrazki. Potrzeba tylko kilku przeróbek kodu biblioteki.

Bierzemy na warsztat plik jquery.lightbox-0.5.js. Interesują nas okolice 77 linijki kodu (lub 15 w wersji zminiaturyzowanej pliku), a dokładniej trzy miejsca zaczynające się od objClicked.getAttribute('href'). Zamieniamy je na objClicked.getAttribute('src').replace("small", "big"), czyli fragment oryginalnego linka do zdjęcia w locie zamieniany jest z small na big. Jeżeli chcemy żeby opis fotek brany był z atrybutu alt="", to musimy dodatkowo zamienić w dwóch miejscach objClicked.getAttribute('title') na objClicked.getAttribute('alt').

Zakładamy oczywiście, że pliki z małymi obrazkami trzymamy w katalogu images/small/obrazek.jpg, a duże obrazki z taką samą nazwą jak małe mamy w katalogu images/big/obrazek.jpg.

Taką bibliotekę trzeba jeszcze wystartować, czyli podać jej jakie obrazki powinny być powiększane. W sekcji <head> dodajemy sobie taki skrypt:

$(document).ready(function() {
    $('div.ramkanazdjecia > img').lightBox();
});

Cała zawartość „obrazkowa” <div class="ramkanazdjecia"> stanie się lightboksowa.

jStat to kolejna interesująca biblioteka stworzona na bazie jQuery. Dzięki niej możemy wykonywać obliczenia statystyczne bez konieczności korzystania z takich narzędzi jak na przykład MATLAB. Ile jest w tym prawdy niestety nie wiem, ponieważ statystyką ostatni raz zajmowałem się na studiach.

Do poprawnego działa jStat wymaga jQuery, jQuery UI oraz flot. To ostatnie to plugin do jQuery pozwalający na generowanie wykresów. Biblioteka poprawnie działa na wszystkich nowoczesnych przeglądarkach oraz IE7 i IE8, dzięki czemu bez obaw możemy z niej korzystać w naszych projektach.

Bibliotekę znajdziecie pod adresem http://www.jstat.org/