Miesięczne archiwum: Maj 2010

Sparklines – mini wykresy w jQuery

sparklines

To jest komponent za pomocą którego możemy wygenerować mini wykresy. Mogą być przydatne gdy chcemy pokazać wiele wykresów na jednej stronie. Małe wykresy mogą posłużyć ogólnej informacji, natomiast ze względu na rozmiar nie dostarczają precyzyjnej informacji. Jednak w niektórych przypadkach dokładna informacja nie jest potrzebna. Komponent generuje kilkanaście wykresów, jeden z nich potrafi generować wykres w czasie rzeczywistym.

sparklines

Wymagania: jQuery
Link: http://omnipotent.net/jquery.sparkline/
Licencja: BSD

DataTables – prezentacja danych w tabeli z użyciem jQuery

datatables

DataTables to komponent na frameworku jQuery. Dzięki niemy w bardzo prosty sposób możemy prezentować dane w tabeli. Komponent DataTables daje wiele opcji, dzięki którym można dostosować skrypt do potrzeb własnej strony. Na stronie skryptu można znaleźć wiele przykładów użycia rożnych funkcji takich jak; wczytywanie danych metodą Ajax, paginacja zmiennej długości, sortowanie, filtrowanie kolumn, edytowanie pól w tabeli oraz wiele innych.

datatables

Wymagania: jQuery
Link: http://www.sprymedia.co.uk/article/DataTables+1.4
Licencja: GPL, BSD

Fonty od Google :)

The Google Font Directory

Jeżeli znudziła Ci się czcionka na twojej stronie możesz użyć The Google Font Directory w celu wzbogacenia swojej strony o czcionkę, która normalnie nie jest interpretowana przez przeglądarki. Instalacja czcionek na stronie jest banalnie prosta. Wystarczy dodać CSS w sekcji <head> lub @import w pliku CSS. Następnie należy umieścić odpowiedni styl z nazwą czcionki. Aby polskie znaki wyświetlały się prawidłowo należy zaznaczyć opcje Latin Extended.

The Google Font Directory

Licencja: SIL Open Font License (OFL)
Link: https://fonts.google.com/

AddThis – Łatwe udostępnianie strony

AddThis

AddThis to łatwy w instalacji skrypt, który umożliwia udostępnianie naszej strony w innych serwisach. Udostępnić stronę można praktycznie wszędzie. Poprzez drukowanie, wysyłanie mailem, zapisywanie w zakładkach przez wszystkie portale społecznościowe, agregatory treści oraz portale z zakładkami. Modyfikacje jakie możemy dokonać w skrypcie są bardzo duże. Możemy wybrać na jaki rodzaj strony zamierzamy wkleić skrypt. Do wyboru mamy zwykłą stronę lub WordPress, Blogger, MySpace i parę innych. Możemy następnie wybrać jak mają wyglądać przyciski. Możne to być jeden przycisk po wciśnięciu którego będzie pojawiało się okno ze wszystkimi serwisami. Mogą to być również poszczególne ikony z serwisami, które można dowolnie komponować. To nie koniec możliwości  ponieważ możemy tworzyć tablice z linkami do portali, mamy do wyboru dziesiątki ikon, na koniec mamy możliwość wyboru języka z pośród 50 dostępnych. Serwis udostępnia też statystyki można sprawdzić jakie portale są popularne w danym kraju. Polecam.

AddThis

Link: http://www.addthis.com/

Równej wysokości pola bez względu na zawartość

CSS równej wysokości

Może ten post będzie trochę inny od reszty. Nie zaprezentuje tu żadnego komponentu, ale pewien sposób użycia CSS. Często gdy projektowałem strony WWW, pojawiał się problem gdy strona była zbudowana z samych znaczników <div>. Otóż kiedy było tworzone lewa i prawa część strony (na przykład menu i środek strony ), obie części nie były równej wysokości. Kiedy przybywało lub ubywało treści z któreś ze stron, również pojawiał się problem. Oczywiście problem można rozwiązać używając znaczników <table> ale jak się chce szpanować na wielkiego znawce XHTML to wypadało by nie używać <table> :). Sprawdzałem osobiście kompatybilność z przeglądarkami FF, IE8, Opera, Chrome oraz Safari.

CSS równej wysokości

Link: http://vivee.info/2008/01/10/kolumny-rownej-wysokosci-za-pomoca-css/

SmoothGallery – galeria obrazków w MooTools

smoothgallery

Galeria obrazków wykorzystująca framework MooTools. Komponent posiada szereg funkcji takich jak pokaz slajdów, kilka sposobów przejścia między zdjęciami, opisy zdjęć. Duża zaletą komponentu jest to  że można poukładać zdjęcia w grupy. Następną zaletą galerii jest to, że dołączony jest do niej plik PHP, który umożliwia zmieszanie zdjęć. Komponent z tego co się doczytałem umożliwia również wyświetlanie zdjęć z portalu Flickr, ale nie zdążyłem tego przetestować.

smoothgallery

Wymagania: MooTools
Link: http://smoothgallery.jondesign.net/
Licencja: GPL

Redips.net – tabela chwyć i upuść w Ajax

redips

Prosty sposób na wykorzystanie tabeli i Ajax do przeciągania zawartości między poszczególnymi komórkami tabeli.  Na stronie można znaleźć 4 przykłady zastosowań komponentu. Jeden z przykładów przedstawia zapisywanie aktualnego ułożenia zawartości komórek tabeli.

redips

Link: http://www.redips.net/javascript/drag-and-drop-table-content/
Link: http://www.redips.net/javascript/drag-and-drop-example-2/
Link: http://www.redips.net/javascript/drag-and-drop-example-3/
Link: http://www.redips.net/javascript/drag-and-drop-example-4/
Licencja: Darmowa

TableSorter – tabelka z sortowaniem w jQuery

table-sorter

Jeżeli potrzebujesz tabeli z możliwością posortowania wyników ten komponent będzie do tego odpowiedni. Korzystając z frameworka jQuery tworzy w nagłówkach tabeli strzałki do sortowania. Niepotrzebne jest tym samym kodowanie takiej funkcjonalności. Komponent umożliwia nie tylko sortowanie ale też dodawanie do tabeli innych rekordów korzystając z technologi AJAX.

table-sorter

Wymagania: jQuery
Link: http://tablesorter.com
Licencja: MIT lub GPL