Archiwa kategorii: Formularze

Aloha-editor – kontekstowy edytor, prawie jak Word 2007

aloha editor

Word 2007 był dużym zaskoczeniem, przynajmniej dla mnie. Zupełnie nowy wygląd, skierowany w 100% na użyteczność i intuicyjność. Z początku nie doceniałem tego wkładu jaki włożył Microsoft. Kiedy szybko okazało się, że nowy interfejs jest bardziej intuicyjny i pomocny, a moje niezadowolenie wynikało z czystego przestawienia się, doceniłem nowego Worda. Nic dziwnego że znalazły się skrypty, które w swym wyglądem i funkcjonalności a na stronach WWW, chcą dorównać temu najsłynniejszemu edytorowi. Widziałem już w necie taki skrypt rozbudowanego edytora, lecz miałem kłopoty z jego zainstalowaniem wiec go nie opisywałem. Dziś przedstawiam wam podobny. Pasek narzędzi z najważniejszymi funkcjami do edytowania tekstu. Pasek sam pojawia się i przesuwa nad tekstem, wiec zawsze jest pod ręką i możemy go szybko użyć. Pomimo tego można go przesunąć i przyczepić w innym miejscu. Szkoda że nie ma w nim funkcji pokazywania zmiany przed kliknięciem, tak jak to jest w programie Word 2007. Edytor nie jest rozbudowany, ale jeżeli aplikacja nie wymaga rozbudowanego edytora, skrypt może spełnić świetnie zadanie.

aloha editor

Link: http://aloha-editor.com/index.html
Licencja: AGPL

ZURB – szybka edycja pola z wykorzystaniem jQuery i Ajax

ZURB szybka edycja pola dzięki jQuery

Dwa posty temu pisałem już o takim komponencie, jednak dzisiejsze moje odkrycie sprawiło że wrócę do tematu. Realizuje właśnie projekt w którym będę potrzebował podobnego rozwiązania, tak więc skupiłem na nim więcej uwagi. Wracają do tematu to plugin umożliwia działania ułatwiające edycje w obrębie znaczników <textarea> w formularzach. Możemy miedzy innymi zapisywać tekst w polu metodą Ajax klikając przycisk, tworzyć historię zmian w pola, ustalać maksymalna ilość znaków, automatyczne zapisywanie lub wprowadzić wymuszenie wpisania wymaganego tekstu. Wszystkie te przykłady są zaprezentowane na tronie ze skryptem.

ZURB szybka edycja pola dzięki jQuery

Wymagania: jQuery
Link: http://www.zurb.com/playground/jquery-text-change-custom-event
Licencja: Darmowa

Jeditable szybka edycja pola dzięki jQuery

jeditable

Na portalach społecznościowych takich jak grono.net lub facebook.com widziałem pola do edytowania informacji w swoim profilu. Co mnie zaciekawiło to pomysł w jaki działało zapisywanie informacji. Otóż klikając na pole podświetlało się innym kolorem, informując użytkownika, że znajduje się w trybie edycji. Użytkownikowi albo pojawiał się przycisk „zapisz” tuż pod edytowanym polem lub po prostu kiedy kliknął poza okienko pola, automatycznie się zapisywało. W niektórych przypadkach może być to szybszy sposób zapisu pól formularza a dzięki wykorzystaniu AJAX nie trzeba przeładowywać całej strony. Oto jeden ze skryptów, który dział na takiej zasadzie.

jeditable

Wymagania: jQuery
Link: http://www.appelsiini.net/projects/jeditable
Demo: http://www.appelsiini.net/projects/jeditable/default.html
Demo2: http://www.appelsiini.net/projects/jeditable/custom.html
Licencja: Darmowa

iPhone Toggle Switches – checkbox w jQuery

checkbox_iphone

Jeszcze nie skończyła się fascynacja iPhonem, a już ludzie marzą o iPadzie. Jestem już na tyle stary, żeby wiedzieć, że moda zawsze się zmienia, a ludzie zawsze zachowują się jak jakby była to ostatnia nowość w ich życiu. Dziś się o to zabijają, jutro zapominają że w ogóle coś takiego było i fascynują się czymś innym. No ale to temat na inna bajkę i na inny blog, a ja sam ulegam przecież modzie. Dziś zajmiemy się iPhonem i jego „Wielkim Bratem” iPadem :). Jak wszyscy wiemy sukces produktów Apple leży w super fajnym dotykowym ekranie i pieczołowicie zaprojektowanym dotykowym designie, nie wspominając już o marketingu. Dziś króluje Apple i trzeba sobie ukroić kawałek tego wielkiego tortu dla siebie. W internecie jest wiele grafik, ikon tekstów, książek o najróżniejszych rzeczach związanych z czołowymi produktami Apple. Dziś prezentuje komponent który może zastąpić standardowe checkbox w wyjęte wprost z telefonu iPhone. Skoda że nie ma innych kontrolek w stylu iPhone.

checkbox_iphone

Wymagania: jQuery
Licencja: Darmowa
Link: http://jqr.github.com/2009/08/05/iphone-toggle-switches.html

TextboxList – autouzupełnianie w MooTools

TextboxList

Auto uzupełnianie to wciąż nowy sposób poprawienia komfortu użytkownika w wypełnianiu formularzy oraz zapewnia systemowi lepszej walidacji. Komponent na stronie  devthought.com znacznie ułatwia wdrożenie auto uzupełniania na własnej stronie. W komponencie zawarte są przykłady napisane w PHP ułatwiające dostosowanie kodu do własnych potrzeb. Komponent jest dostępny za darmo do użytku niekomercyjnego. Za wersje komercyjną trzeba zapłacić jednorazowo 20$. Moja uwagę na stronie z komponentem  zwróciło logo strony. Chmurki na niebie które można przesuwać i które jak mi się zdaje reagują na pogodę. Dla mnie fajniejszy bajer od auto uzupełniania :)

TextboxList

Po cholere ten Adolf???

Wymagania: MooTools
Linki: http://devthought.com/projects/mootools/textboxlist/
Licencja: darmowa, komercyjna 20$

Walidacja formularzy w jQuery

formValid

Programowanie formularzy oraz poprawna ich walidacja (sprawdzanie poprawności) zawsze zajmuje sporo czasu. Z pomocą przychodzi nam ten komponent, który w ciekawy sposób zapewnia nam walidacje formularzy oraz wyświetlanie błędów. Zaokrąglone i prześwitujące dymki informacyjne nie tylko prezentują się stylowo na stronach, ale także eliminują problem z „rozjeżdżaniem” się formularza. Walidator zapewnia nam sprawdzanie poprawności takich danych wejściowych jak: hasła, długość znaków, adres mail, data czy zaznaczenie combobox. Walidatory w technologi AJAX mają jeszcze jedna niewątpliwa zaletę. Procedury wysyłania formularza do serwera znajdują się w kodzie pliku javaScript zamiast w html co powoduje, że programy spamerskie mają utrudnione zadanie z wysyłaniem spamu. Dzięki temu możemy zamieścić formularz bez zamieszczania na nim Captcha (wpisywania kodu przed wysłaniem formularza).

formValid

formValid

Wymagania: jQuery Framework
Demo: http://www.position-relative.net/creation/formValidator/
licencja: MIT License