Niquelao » acc_calendar: Dostępny kalendarz w JavaScript (niekonieczny, ale przydatny)

» acc_calendar: dostępny kalendarz w JavaScript (niepotrzebny, ale przydatny) Niquelao Jak mówisz, że wyszło? 7 lipca 2007 przez Rumoroso —> Dostępność i JavaScript? acc_calendar: dostępny kalendarz w JavaScript (niepotrzebny, ale przydatny) Zaktualizowano 1 czerwca 2008 , przez Rumoroso W polach formularza, w których należy wprowadzić datę, aby poprawić komfort użytkowania i jednocześnie zwiększyć kontrolę nad formatem danych, można dodać kalendarz za pomocą JavaScript.

Wiem, to zaklęte słowo , ale jeśli zrobi się to ostrożnie i z rozwagą, nie musi mieć negatywnych skutków dla standardów i dostępności. Cele Na początku ustaliłem dwa główne cele, które bardziej niż celami były wytycznymi podczas tworzenia: Aby był dostępny i nieinwazyjny. Oczywiście, przy braku obsługi JavaScript nie oferuje się opcji rozwijania kalendarza, ale jeśli jest obsługa… dlaczego nie sprawić, by generowana treść była dostępna i użyteczna? Aby był łatwy do wdrożenia i używania.

Szukałem sposobu, aby programiści, którzy chcą go wdrożyć na swoich stronach internetowych, nie musieli wprowadzać dodatkowego kodu. Tak jak w CSS używa się różnych typów selektorów (elementów, id, klas itp.) do przypisywania stylów do różnych części dokumentów, dlaczego nie użyć tego samego do przypisywania zachowań? Dodatkowo, jako cele drugorzędne są: optymalizacja, generalizacja, internacjonalizacja… (będąc realistą, musiałem usunąć cele randkowania i zarabiania pieniędzy.) Włączanie do naszych dokumentów Przede wszystkim należy wskazać, że skrypt można pobrać bezpośrednio, ściągając pełny przykład .

Włączenie kalendarza do dokumentu jest tak proste, jak dodanie odpowiedniego elementu script w head : Kalendarz załaduje się dla każdego pola tekstowego, które ma dołączoną klasę „ fecha “ (jeśli językiem dokumentu jest hiszpański). Format daty wprowadza się w pierwszej linii skryptu. Tak więc, jeśli na przykład chcemy, aby data była w kolejności dzień/miesiąc/rok, bez zera przed dniem, gdy składa się z jednej cyfry, i z zerem w miesiącu, gdy jest to konieczne, a format roku miał 4 cyfry: var formato = ‘d/mm/yyyy’; Jak już wspomniano, aby wyświetlić kalendarz obok pola tekstowego, musi ono mieć klasę „fecha”, jeśli zadeklarowanym językiem dokumentu jest hiszpański („date”, jeśli angielski itd.).

Te nazwy klas można modyfikować, dodawać nowe dla innych języków itp. bezpośrednio w skrypcie. Ponadto wszystkie możliwe parametry wprowadza się jako klasy. Pełna lista jest następująca: Załaduj kalendarz (wymagane): fecha Daty wcześniejsze niż dziś: prev Daty późniejsze niż dziś: post Zakres lat: rangX (gdzie X to liczba lat) Nie uwzględnia się dnia bieżącego: todnact Zastosuj filtr dla dostępnych dat: disp A co jeśli ładuję inputy dynamicznie przez AJAX?

Skrypt ma tę właściwość, że jeśli w dowolnym momencie zostaną wprowadzone nowe pola tekstowe asynchronicznie przez AJAX, wystarczy po tym załadowaniu wywołać funkcję cargaLinks(), aby do inputów zostały przypisane linki do otwierania kalendarza Pierwszy przykład Data przyszła, w formacie d/mm/yyyy , z tego roku ( class=“fecha post” ) Data przyszła, w formacie d/mm/yyyy, z tego roku bez uwzględnienia dnia dzisiejszego ( class=“fecha post todnact” ) Data urodzenia, w formacie d/mm/yyyy, do 100 lat ( class=“fecha prev rang100” ) data z najbliższych 20 lat, w formacie d/mm/yyyy, bez uwzględnienia dnia dzisiejszego ( class=“fecha post rang20 todnact” ) Data z ostatnich 15 lat, w formacie d/mm/yyyy ( class=“fecha prev rang15” ) Data 10 lat wstecz i do przodu, w formacie d/mm/yyyy ( class=“fecha rang10” ) Nowa poprawa (kwiecień 2007) Czasami możemy chcieć, aby data była wprowadzana w trzech polach tekstowych, po jednym dla każdego składnika.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Dodano możliwość zrobienia tego. W tym celu nadal będziemy kontrolować wszystko za pomocą klas przypisanych do input . Aby tworzyły grupę, trzy pola tekstowe muszą dodać kod, który je jako taką identyfikuje.

To, co wydaje się nieco dziwne, nie jest takie dziwne. W rzeczywistości trzeba dodać do słowa fecha, którego używamy jako klasy w tych trzech, literę lub cyfrę. Tak więc, na przykład, możemy zastosować do wszystkich trzech klasę „fechaA” i natychmiast, oprócz przypisania linku do otwierania kalendarza, zaczną zachowywać się jak grupa. Poniżej znajdują się dwa przykłady, które wyraźnie to pokazują.

Każde z pól musi mieć klasę w zależności od przypisanego mu składnika: Dla pola dnia klasa „ day “ Dla pola miesiąca klasa „ month “ Dla pola roku klasa „ year “ Istnieje pełna swoboda w kolejności, w jakiej są umieszczane, umieszczając klasy do konfiguracji kalendarza (liczba lat, poprzednie, późniejsze itp.) w pierwszym z używanych pól. W poniższym przykładzie można zobaczyć, jak to zrobić: Drugi przykład Data z najbliższych 10 lat w formacie dzień, miesiąc, rok: Dzień / Miesiąc / Rok Ważną kwestią jest zawsze informowanie użytkownika, które pole jest do czego.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

W przykładzie informuje się w tekście poprzedzającym, a dodatkowo etykiety inputów to zawierają. Data z ostatnich 15 lat w formacie rok, miesiąc, dzień: Rok / Miesiąc / Dzień Ważną kwestią jest zawsze informowanie użytkownika, które pole jest do czego.

W przykładzie informuje się w tekście poprzedzającym, a dodatkowo etykiety inputów to zawierają. Aktualizacja (kwiecień 2007) Skrypt został poprawiony, aby ograniczyć style stosowane z jego poziomu.

Teraz generowany link ma obraz jako treść (wcześniej był ładowany z arkusza stylów). Link jest generowany natychmiast po input (poza label, jeśli jest w nim zawarty) i ma następujące znaczniki: W przypadku, gdy jest to link do ładowania daty w trzech polach tekstowych, klasa linku zmienia się na „ enl_cal_group , a sam link znajduje się przed pierwszym z nich. Aktualizacja (7 lipca 2007) Od

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.