니켈라오 » acc_calendar: 자바스크립트 접근성 달력 (불필요하지만 유용함)

» acc_calendar: 자바스크립트로 만든 접근성 높은 달력 (불필요하지만 유용한) Niquelao 어떻게 나왔다고요? 2007년 7월 7일 Rumoroso 작성 —> 접근성과 자바스크립트? acc_calendar: 자바스크립트로 만든 접근성 높은 달력 (불필요하지만 유용한) 2008년 6월 1일 업데이트, Rumoroso 작성 날짜를 입력해야 하는 폼 필드에서 사용자 경험을 개선하고 동시에 데이터 형식에 대한 제어를 강화하기 위해 자바스크립트로 달력을 포함시킬 수 있습니다. 알아요, 금기시되는 단어라는 걸. 하지만 신중하게 제어하면서 만든다면 표준과 접근성 측면에서 부정적인 영향을 미칠 이유는 없습니다. 목표 처음에 두 가지 주요 목표를 설정했는데, 사실 목표라기보다는 만들 때의 작업 지침이었습니다: 접근성이 있고 비침투적일 것. 당연히 자바스크립트 지원이 없으면 달력을 펼치는 옵션이 제공되지 않지만, 지원이 있다면… 생성된 콘텐츠를 접근성 있고 사용 가능하게 만들지 않을 이유가 있을까요? 구현하고 사용하기 쉬울 것. 웹 페이지에 구현하려는 프로그래머가 추가 코드를 입력할 필요가 없도록 하는 방법을 찾았습니다.

CSS에서 다양한 유형의 선택자(요소, id, 클래스 등)를 사용하여 문서의 여러 부분에 스타일을 연결하듯이, 동작을 연결하는 데에도 같은 것을 사용하지 않을 이유가 있을까요? 또한 부차적인 목표로는 최적화, 일반화, 국제화… 등이 있습니다. (현실적으로 말하면, 연애와 돈벌기 목표는 제거해야 했습니다.) 문서에 포함하기 무엇보다도 먼저, 스크립트는 전체 예제를 다운로드하여 직접 얻을 수 있다는 점을 알려드립니다. 문서에 달력을 포함하는 것은 head에 해당 script 요소를 포함하는 것만큼 간단합니다: 달력은 “fecha” 클래스가 포함된 모든 텍스트 필드에 로드됩니다(문서 언어가 스페인어인 경우). 날짜 형식은 스크립트 첫 줄에 입력합니다. 예를 들어 날짜가 일/월/년 순서를 따르고, 일이 한 자리일 때 앞에 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 “이 되며, 이는 첫 번째 필드 앞에 위치합니다. 업데이트 (2007년 7월 7일) 부

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.