
W dzisiejszym artykule zabraliśmy różne interesujące biblioteki JavaScript, z którymi mieliśmy styczność. Wiele z nich może uatrakcyjnić nasze projekty, inne to narzędzia typowo wspierające pracę z kodem.
Interesujące biblioteki JavaScript
Tinycon
Zarządzanie ikonką favicon z poziomu JavaScript. Dzięki tej bibliotece możemy manipulować ikoną wyświetlaną na pasku tytułowym zakładki. Możemy np. dodać animację lub dodać bardziej przydatne informacje pobrane via AJAX (np. liczba nowych zdarzeń), gdy użytkownik przegląda zawartość na innych kartach przeglądarki.
Projekt dostępny na GitHub:
https://github.com/tommoor/tinycon
Zmień swoją stronę w wirtualną książkę – Turn.js
Dzięki tej lekkiej bibliotece JavaScript, możemy w dość przyjemny sposób przekształcić treść naszej strony / prezentacji w wirtualną książkę. Podstrony będą wyświetlane jako kolejne strony „książki”. Całość animowana.
Przykład użycia:
HTML
<div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page 3 </div> <div> Page 4 </div> <div class="hard"></div> <div class="hard"></div> </div>
JavaScript
$("#flipbook").turn({ width: 400, height: 300, autoCenter: true });
Dodajemy okładkę i zawartość. Poniżej przykład działania.
Strona projektu:
Walidacja formularzy z JavaScript i HTML5 – biblioteka Parsley JS
Możliwości walidacji formularzy w HTML5 są interesujące. Dodajmy do tego jeszcze bibliotekę Parsley JS – potężne narzędzie do implementacji rozbudowanej walidacji formularzy. Umożliwia tworzenie custom validators.
Strona projektu:
CSS bez przejmowania się prefiksami przeglądarek
Kolejnym narzędziem jest „-prefix-free”, które wyciąga programistę z „piekła” prefiksów CSS dla różnych przeglądarek. Teraz możemy bardziej skupić się na efekcie końcowym.
Strona projektu:
http://leaverou.github.io/prefixfree/
jQuery Autosize i pole textarea adaptujące się do ilości tekstu
Mamy tutaj bardzo ładny plugin jQuery, dzięki któremu możemy uczynić pole textarea dynamicznym, zwiększającym swoją wysokość automatycznie w miarę wypisywania tekstu przez użytkownika. A animacją lub bez.
Strona projektu:
http://www.jacklmoore.com/autosize/
Timeline JS
Stwórzmy sobie własny Timeline w prosty sposób:
http://timeline.knightlab.com/
Gantt plugin
Planowanie projektu? A może wykres Gantt’a?
Mamy tutaj bardzo dobry plugin, umożliwiający tworzenie interaktywnych wykresów Gantta.
Strona projektu:
http://taitems.github.io/jQuery.Gantt/
Sly – jQuery Directional Scrolling Plugin
Ładne, animowane slajdy na naszą stronę. Dużo możliwości konfiguracyjnych.
Strona projektu:
OK, pora na coś extra.
jQuery Face Detection Plugin
Wykrywanie twarzy na zdjęciach z poziomu JavaScript? Żaden problem dzięki tej bibliotece. Skrypt zwraca współrzędne wykrytych twarzy.
Strona projektu:
http://facedetection.jaysalvat.com/
Templating – szablony w JavaScript
Jak widać to nie tylko domena PHP, również w JavaScript można pracować z szablonami stron lub ich fragmentów:
– Handlebars.js
Przykład:
<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div>
var context = {title: "My New Post", body: "Content..."} var html = template(context);
WWW:
– Hogan.js – JavaScript templating from Twitter
WWW:
http://twitter.github.io/hogan.js/
http://www.javascriptoo.com/hogan-js
Podsumowanie
To wszystko w dzisiejszym zbiorze interesujących bibliotek JavaScript. Pracując dalej z HTML5, JS i frameworkami, z pewnością natkniemy się na kolejne, godne uwagi rozwiązania.
Dziękuję.