acc_calendar: 자바스크립트로 만드는 접근성 높은 달력 (필수는 아니지만 유용함)

acc_calendar: 자바스크립트로 만든 접근성 높은 달력 (불필요하지만 유용함) | Niquelao Niquelao 어떻게 나왔다고요? 콘텐츠로 건너뛰기 Home Contrast Checker HeadingsMap Easyvalidator 소개… acc_calendar: 자바스크립트로 만든 접근성 높은 달력 (불필요하지만 유용함) 접근성과 자바스크립트? acc_calendar: 자바스크립트로 만든 접근성 높은 달력 (불필요하지만 유용함) 2008년 6월 1일 업데이트 , 작성자 Rumoroso 날짜를 입력해야 하는 폼 필드에서 사용자 경험을 개선하고 동시에 데이터 형식에 대한 제어를 강화하기 위해 자바스크립트로 달력을 포함할 수 있습니다. 알아요, 금기시되는 단어라는 걸 , 하지만 신중하게 제어하면서 만들면 표준과 접근성 측면에서 부정적인 영향을 미칠 이유가 없습니다. 목표 원칙적으로 두 가지 주요 목표를 설정했는데, 이는 목표라기보다 달력을 만들 때의 작업 지침이었습니다: 접근성 있고 방해되지 않아야 한다. 당연히 자바스크립트를 지원하지 않는 환경에서는 달력을 펼치는 옵션이 제공되지 않지만, 지원된다면… 왜 생성된 콘텐츠를 접근성 있고 사용 가능하게 만들지 않겠습니까? 구현하고 사용하기 쉬워야 한다. 웹 페이지에 달력을 구현하려는 프로그래머가 추가 코드를 입력할 필요가 없도록 하는 방법을 찾았습니다. CSS에서 요소, id, 클래스 등 다양한 유형의 선택자를 사용하여 문서의 여러 부분에 스타일을 연결하듯이, 동작을 연결하는 데에도 같은 방식을 사용하면 어떨까요? 또한 부차적인 목표로는 최적화, 일반화, 국제화 등이 있습니다… (현실적으로 말하자면, 연애하기와 돈 벌기 목표는 제거해야 했습니다.) 문서에 포함하기 우선 스크립트는 완전한 예제 를 다운로드하여 직접 얻을 수 있다는 점을 알려드립니다. 문서에 달력을 포함하는 것은 head 에 해당 script 요소를 포함하는 것만큼 간단합니다: 달력은 “ fecha “ 클래스가 포함된 모든 텍스트 필드에 대해 로드됩니다 (문서 언어가 스페인어인 경우). 날짜 형식은 스크립트의 첫 번째 줄에 입력합니다. 예를 들어 날짜가 일/월/년 순서를 따르고, 일이 한 자리일 때 앞에 0을 붙이지 않으며, 월에는 필요할 때 0을 붙이고, 연도 형식은 4자리로 하려면: var formato = ‘d/mm/yyyy’; 이미 언급했듯이, 텍스트 필드 옆에 달력을 표시하려면 문서에 선언된 언어가 스페인어인 경우 해당 필드에 “fecha” 클래스가 있어야 합니다 (영어인 경우 “date” 등). 이러한 클래스 이름은 스크립트에서 직접 수정하거나 다른 언어용으로 새로 추가할 수 있습니다. 또한 모든 가능한 매개변수는 클래스로 입력합니다. 전체 목록은 다음과 같습니다: 달력 로드 (필수): fecha 오늘 이전 날짜: prev 오늘 이후 날짜: post 연도 범위: rangX (X는 연도 수) 오늘 날짜 제외: todnact 사용 가능한 날짜에 필터 적용: disp AJAX로 input을 동적으로 로드하면 어떻게 되나요? 이 스크립트는 AJAX로 새로운 텍스트 필드가 비동기적으로 도입될 때마다, 해당 로드 후 cargaLinks() 함수를 호출하기만 하면 input에 달력 열기 링크가 연결되는 기능이 있습니다 첫 번째 예제 올해의 미래 날짜, d/mm/yyyy 형식 ( class=“fecha post” ) 올해의 미래 날짜, d/mm/yyyy 형식, 오늘 제외 ( class=“fecha post todnact” ) 생년월일, d/mm/yyyy 형식, 최대 100년 ( class=“fecha prev rang100” ) 향후 20년의 날짜, d/mm/yyyy 형식, 오늘 제외 ( class=“fecha post rang20 todnact” ) 지난 15년의 날짜, d/mm/yyyy 형식 ( class=“fecha prev rang15” ) 10년 전후의 날짜, d/mm/yyyy 형식 ( class=“fecha rang10” ) 새로운 개선 사항 (2007년 4월) 때로는 날짜를 세 개의 텍스트 필드에 입력하고 싶을 수 있습니다. 각 필드에 날짜를 구성하는 각 데이터를 하나씩 넣는 방식입니다. 이를 가능하게 하는 기능을 추가했습니다. 이를 위해서도 input 에 할당된 클래스를 사용하여 모든 것을 제어합니다. 그룹을 구성하려면 세 개의 텍스트 필드에 이를 식별하는 코드를 추가해야 합니다. 이상해 보이지만 그렇게 이상한 것은 아닙니다. 실제로 해야 할 일은 세 필드에 클래스로 사용하는 fecha 라는 단어에 문자나 숫자를 추가하는 것입니다. 예를 들어 세 필드 모두에 “fechaA” 클래스를 적용하면 즉시 달력 열기 링크가 연결될 뿐만 아니라 그룹으로 동작하게 됩니다. 이를 명확히 보여주는 두 가지 예제가 아래에 있습니다. 각 필드는 연결된 데이터에 따라 클래스를 가져야 합니다: 일 필드에는 “ day “ 클래스 월 필드에는 “ month “ 클래스 연도 필드에는 “ year “ 클래스 순서는 완전히 자유롭게 정할 수 있으며, 달력 설정 클래스(연도 수, 이전, 이후 등)는 사용하는 첫 번째 필드에 배치합니다. 다음 예제에서 이를 어떻게 하는지 확인할 수 있습니다: 두 번째 예제 향후 10년의 날짜, 일, 월, 년 형식: 일 / 월 / 년 중요한 고려 사항은 항상 사용자에게 각 필드가 무엇인지 알려주는 것입니다. 예제에서는 앞의 텍스트로 알려주며, input의 레이블에도 포함되어 있습니다. 지난 15년의 날짜, 년, 월, 일 형식: 년 / 월 / 일 중요한 고려 사항은 항상 사용자에게 각 필드가 무엇인지 알려주는 것입니다. 예제에서는 앞의 텍스트로 알려주며, input의 레이블에도 포함되어 있습니다. 업데이트 (2007년 4월) 스크립트에서 적용되는 스타일을 줄이기 위해 스크립트를 수정했습니다. 이제 생성된 링크는 이미지를 콘텐츠로 가집니다 (이전에는 스타일시트에서 로드했습니다). 링크는 input 바로 뒤에 생성되며 (label 안에 포함된 경우 label 밖에), 다음과 같은 마크업을 가집니다: 세 개의 텍스트 필드에 날짜를 로드하는 링크인 경우, 링크의 클래스는 “ enl_cal_group 이 되고, 이는 앞에 위치합니다

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.