Archiwa tagu: jQuery

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

carouFredSel – galeria (karuzela) zdjęć w jQuery

jquery caroufredsel

CarouFredSel to skrypt galerii, którego rodzaj popularnie nosi nazwę karuzeli. Umożliwia on wyświetlanie dowolnej ilości zdjęć (choć nie tylko zdjęć) i przesuwanie ich  automatycznie, lub też przy użyciu myszy lub strzałek klawiatury. Obiekty można przewijać w pionie i w poziomie. Do galerii można dodawać strzałki nawigacji, paginację albo przycisk „play/stop” oraz kilka innych opcji konfiguracji. Skrypt nie ma możliwości wyświetlania konkretnego zdjęcia z pośród wielu i wyświetlania go w większym rozmiarze, ale wtyczkę można łączyć z inną wtyczka np z LightBox-em.

jquery caroufredsel

Wymagania: jQuery
Link: http://caroufredsel.frebsite.nl/
Licencja: MIT

Agile Uploader – uploader plików

Agile Uploader

Przy pomocy uploadera możemy w prosty i przyjazny sposób wysłać pliki na serwer. Dzięki zastosowaniu technologi Ajax unikamy ponownego wczytywania całej strony. Agile Uploader ma wiele możliwości:

  • Możliwość dołączania wielu plików
  • Wyświetlanie się miniaturki po załadowaniu pliku (nie dział w IE)
  • Możliwość podmiany przycisków
  • Zmiana rozmiaru obrazka przed wysłaniem go na serwer
  • Możliwość przesyłania dodatkowych informacji wraz z plikiem
  • Możliwość tworzenia dodatkowych metod
  • Działa dobrze na wszystkich przeglądarkach

Agile Uploader

Wymagania: jQuery
Demo: http://www.shift8creative.com/projects/agile-uploader/index.html
Licencja: Darmowa

ToolTips – okno pomocy w jQuery

jQuery Tooltip Plugin

Skrypt okna pomocy (ToolTips) napisany w jQuery. Obsługuje znaczniki HTML i CSS w dymkach. Do wyboru mamy kilka ramek,  a niektóre możemy modyfikować za pomocą stylów CSS. Skrypt okna pomocy reaguje na przesuwanie za ekran co powoduje że zawsze jest widoczny w całości.

jQuery Tooltip Plugin

Wymagania: jQuery
Demo: http://jquery.bassistance.de/tooltip/demo/
Link: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
Licencja: MIT, GPL

Glimmer – narzędzie do tworzenia animacji jQuery

glimmer

Glimmer to prosta aplikacja do tworzenia animacji w jQuery. Nie jest edytorem, ale wizardem jQuery. Dzięki temu krok po kroku stworzymy animację. Do wyboru mamy możliwość wygenerowania szybkiej animacji „zmienianych zdjęć,” rozbudowanego menu , „dymka pomocy” (tooltip). Jednak najciekawszym wizardem jest (Custom). Daje on możliwość generowania najróżniejszych animacji na przygotowanym wcześniej pliku HTML.

Na początku wczytujemy poprawnie sformatowany plik HTML, a następnie wskazujemy źródło zdarzenia, typ zdarzenia oraz cele. Źródłem zdarzenia może być dowolny obiekt HTML znajdujący się w dokumencie. Element można wybrać po tagu (np div), klasie (.klasa_nazwa) lub po id (#id_nazwa). Jako zdarzenie można wybrać wszystkie przewidziane przez jQuery zdarzenia, np click, mouseover, blur, scroll, itp. Następnie określamy cel, wybieramy rodzaj animacji oraz jej parametry. Np dla animacji powiększania elementu należy wybrać wartość początkową oraz końcową. Edytor Glimmer daje możliwość  stworzenia skomplikowanych animacji, bez napisania ani jednego wiersza w JavaScript.

glimmer

Link: http://code.msdn.microsoft.com/glimmer
Licencja: Darmowa

Stary dobry lightBox na frameworku jQuery

lightbox jquery

Pamiętacie skrypt galerii lightBox na frameworku prototype? Na pewno tak, ponieważ był tak popularny, że bardzo dużo stron internetowych go używa. Nawet ja nie opisywałem go na blogu (chociaż może powinienem?). Co jednak zrobić, kiedy chcemy koniecznie mieć skrypt glalerii LightBox a mamy inny skrypt napisany w jQuery? To proste, zainstalować lightBox napisany w jQuery! Skrypt wygląda i dział tak samo. Unikniemy w ten sposób konfliktu frameworka jQuery i Prototype a nasza strona szybciej będzie się wczytywać.

lightbox jquery

Wymagania: jQuery
Link: http://leandrovieira.com/projects/jquery/lightbox/
Licencja: CC

ezMark – zmień nudny formularz dzięki jQuery

ezmark jquery css

Jeżeli znudziły się Tobie standardowe kontrolki formularza, ten skrypt w prosty sposób może to zmienić. Dzięki jQuery, możemy nadać nowy wygląd kontrolkom formularza radio i selecte. Działa to w ten sposób ze sama kontrolka jest niewidoczna a jej tło wypełnia obrazek ramki i zaznaczenia. W ten sposób podmieniając obrazek możemy zmienić wygląd kontrolek nie bawiąc się w style CSS, które nie zawsze działają dobrze w kontrolkach na wszystkich przeglądarkach.

ezmark jquery css

Wymagania: jQuery
Demo: http://www.itsalif.info/content/demo-ezmark-jquery-plugin/
Licencja: MIT