Archiwa kategorii: Tabele

Zoomooz.js – skrypt do powiększania poszczególnych części serwisu – jQuery

zoomooz jquery

Ciekawy skrypt, który pozwala tworzyć strony internetowe zbudowane z poszczególnych klocków. Skrypt nie tylko układa równo klocki, ale również pozwala powiększać poszczególne części. W poszczególnych częściach jest możliwość umieszczenia odnośników, zdjęć lub innych obiektów. Skrypt można wykorzystać do zaprezentowania na przykład kolekcji zdjęć, gdzie wymagane jest powiększenie. Ciekawą właściwością skryptu jest to że obrócone klocki, przy powiększaniu obracają całą stronę aby pokazać ją równo.

Framework: jQuery
Demo: http://janne.aukia.com/zoomooz/
Licencja: MIT, GPL

fcbkListSelection – lista z możliwością zaznacznia

fcbkListSelection

fcbkListSelection to skrypt z możliwością zaznaczania wielu pól jednocześnie. Właściwie lista przypomina bardziej tabelę i jest podobna to tej na portalu społecznościowym Facebook, gdzie jest mozliwośc zaznaczania przyjaciół. Skrypt zwraca dane tak jak zwykłe formularze w postaci tablicy.

Framework: jQuery
Demo: http://www.emposha.com/demo/fcbklistselection/
Link: https://github.com/emposha/fcbkListSelection
Licencja: MIT

List.js – lista i tabela z opcjami sortowania, filtrowania, edytowania i dodawania w jQuery

list.js jquery

List.js to bardzo ciekawy skrypt tabeli. Możemy tworzyć listy, których wynik może być filtrowany przez określone kryteria. Skrypt daje również możliwość tworzenia tabeli z możliwością sortowania, wyszukiwania, edytowania i dodawania rekordów. Od razu pisze że skrypt źle sortuje polskie znaki, więc w przypadku wykorzystywania go w jakiś projektach trzeba go zmodyfikować.

Framework: jQuery
Demo: http://listjs.com/examples.html
Licencja: MIT

Isotope – rewelacyjny plugin do sortowania w jQuery

isotope jquery

Isotope to plugin o imponujących możliwościach sortowania elementów. Możemy grupować elementy dowolnie utworzonymi kategoriami, ograniczać wyświetlanie do wskazanych kategorii, oraz zmieniać sposób wyświetlania elementów. Wszystkie te zmiany w sortowaniu, są wykonywane przez animacje. Wszystkie elementy mieszają się, aby każdy mógł wskoczyć w odpowiednie miejsce. Elementy które mają zostać ukryte powoli znikają, a dodawane elementy pojawiają się i wstukają w odpowiednie miejsce. Efekty animacji lepiej samemu zobaczyć, aby lepiej zrozumieć o co chodzi. Skrypt jest darmowy do nie komercyjnego użytku. Aby zakupić komercyjną wersje wymagany jest kontakt z autorem skryptu.

Na stronie głównej skryptu, elementy niebieskie to dokumentacja, żółte to przykłady zastosowania, z różowych elementów możemy ściągnąć skrypt.

isotope jquery

Framework: jQuery
Link: http://isotope.metafizzy.co/
Demo: http://isotope.metafizzy.co/demos/elements-partial.html
Download: http://meta.metafizzy.co/files/isotope-site.zip
Licencja: Inna

Paginacja z użyciem Ajax i PHP

super_paging Ajax PHP

Prosta i łatwo w użyciu paginacja stron. Do dzielenia na strony skrypt wykorzystuje PHP a do wczytywania informacji z poszczególnych stron jest wykorzystywana technologia AJAX. Poszczególne rekordy są odczytywane z bazy danych.

Aby zainstalować przykład trzeba otworzyć baze danych „records” w niej tabele równierz „records” i dodać trzy pola pierwsze „id”-integer (klucz główny), „message” – varchar i pole „image” też varchar. W polu imege dajemy linki do obrazków a w polu message tekst. Trzeba również pamiętać o prawidłowym haśle do bazy danych bo skrypt nie wyświetla żadnych komunikatów o błędzie.

super_paging Ajax PHP

Wymagania: PHP, MySql, jQuery
Demo: http://demos.99points.info/super_paging/
Link: http://www.99points.info/2011/01/ajax-pagination-using-jquery-and-php-with-animation/
Licencja: Darmowa

jQuery One Page Navigation – animowane etykiety w jQuery

jQuery One Page Navigation Plugin

Prosty skrypt do umieszczania na stronie przesuwanych etykiet. Etykiety to pojęcie, które odnosi się do tworzenia kodu HTML i oznacza odnośnik, który kieruje nas w pewną cześć tej samej strony. Jest to bardzo dobre rozwiązanie w sytuacji gdy mamy bardzo dużo informacji na stronie, podzielone na grupy, tematy lub akapity. Etykiety najczęściej używa się przy pisaniu FAQ, gdzie na początku jest spis treści a pod nim kilometry informacji :). Klikając na punkt w spisie, etykiety przenoszą nas w odpowiednie miejsce na stronie.

To tyle o samych etykietach, więcej informacji o tym możecie znaleźć na stronce [link]. Jeżeli chodzi o skrypt to zasada działania jest tak sama, z tą różnica że wybierają poszczególne pozycje w spisie skrypt w płynny animowany sposób przesuwa się po dokumencie.

jQuery One Page Navigation Plugin

Framework: jQuery
Demo: http://trevordavis.net/play/jquery-one-page-nav/
Download: http://github.com/davist11/jQuery-One-Page-Nav
Licencja: Darmowa

Quicksand – animowane sortowanie elementów w jQuery

quicksand jquery ajax

Quicksand to rewelacyjny skrypt napisany na frameworku jQuery.  Dzięki niemu w efektowny sposób można posortować elementy na stronie, lub pogrupować je według kategorii. Najciekawszy jest jednak sposób w jaki sortują się elementy, otóż przy sortowaniu przestawiają się kolejnością, a przy grupowaniu, niepasujące elementy znikają a pasujące układają się po kolei. Elementy możemy również sortować, wczytując je wcześniej metodą Ajax.

quicksand jquery ajax

Framework: jQuery
Demo: http://razorjack.net/quicksand/index.html
Licencja: MIT, GPL

EditableGrid – zaawansowana tabela w JavaScript

EditableGrid

EditableGrid to biblioteka JavaScript przekształcająca tabele w zaawansowaną tabele z możliwością edycji. Biblioteka udostępniana jest na zasadach licencji GPL. Oto główne funkcje tabeli:

  • Możliwość sortowania po kolumnach (nie sortuje polskich znaków)
  • Tabele można zbudować za pomocą znaczników <table>, lub wczytać specjalny plik XML.
  • Kolumny mogą mieć nadawane typy (string, integer, date, boolean, email, itp)
  • Można tworzyć listę wyboru dla danego pola.
  • Tabela sprawdza poprawność edytowanych rekordów
  • Skrypt PHP generujący xml-a

EditableGrid

Demo: http://www.webismymind.be/editablegrid/
Licencja: GPL