야후 사용자 인터페이스 블로그 (YUIBlog)

확인란 그룹 동작 : YUI 3 갤러리

체크 박스와 라디오 버튼은 잘 항목의 작은 세트에서 선택하는 패턴을 알려져 있습니다. 전자 후자는 정확히 하나의 선택을 필요로하는 동안, 항목 (아무도를 포함하지 않음)의 하위 집합을 선택할 수 있습니다.

하지만 당신은 다른 행동을해야하는 경우? 확인란 그룹 모듈 에서 YUI 3 갤러리 일반적인 세 가지 케이스와 다른 구축을위한 기반을 구현합니다. 기본적으로 그들 구축하는 데 이상적인 토대하게 어떤 제한을 적용하지 때문에 모듈 체크 박스를 기반으로합니다.

모듈에서 제공하는 첫 번째 동작은 Y.AtLeastOneCheckboxGroup . 이것은 하나 이상의 항목이 선택되어야 실시하고 있습니다. 하나 이상의 선택은 허용하지만, 모든 항목의 선택을 해제한 것은 예방이다. 이것은에서 설명한 알고리즘 "수은의 방울"을 사용하여 구현된 인터페이스에 옷 당신은 마지막 항목을 취소하려고 때마다 선택이 커서 아래에서 밖으로 슬라이드를 :. 당신과 함께 재생할 수 있습니다 여기 .

두 번째 예제 ( Y.AtMostOneCheckboxGroup ) 아무 선택을 허용하지 않았지만, 하나 이상의 선택이 허용되지 않습니다. 다음은 현재의 항목을 취소하는 것은 불가능합니다 때문에이에 대한 라디오 버튼을 사용할 수 있습니다. 이것은 두 번째 예제에서 증명 이 페이지 .

마지막 예제 ( Y.SelectAllCheckboxGroup )는 추가 확인란을 사용하여 동작 "모두 선택"구현합니다. "모두 선택"확인란을 선택하면 다른 모든 항목을 선택합니다. 그것을 해제하면 다른 모든 항목을 deselects. 항목을 선택하거나 선택을 취소하면 "모두 선택"확인란의 상태를 업데이 트합니다. 당신의 세 번째 예제와 함께 연주하여 그것을 시도할 수 있습니다 이 페이지 .

possiblities은 무한합니다. : 당신은 모든 위의 예제에서 사용하는 기본 클래스 확장하여 신속하게 사용자 지정 동작을 만들 수 Y.CheckboxGroup . 이것은 모든 관료 담당하므로 할 일은 실행됩니다 enforceConstraints() . 기능 관리 확인란을 방금 변경되었습니다 확인란의 색인 목록과 함께 호출됩니다. 그런 다음 검사하고 사용자 정의 제약을 적용할 수있는 모든 확인란의 상태를 업데이트할 수 있습니다.

대부분의 경우, 필요한 모든 확인란 자체 예입니다 Y.AtLeastOneCheckboxGroup 와 Y.AtMostOneCheckboxGroup . 기본 클래스부터 들어, 귀하의 생성자가 통과 수 Y.CheckboxGroup 당신을 위해 목록을 관리합니다. 당신은 추가적인 컨트롤, 예를 들어, 필요한 경우에는 Y.SelectAllCheckboxGroup 귀하의 생성자는 이러한 컨트롤에 대한 참조를 요구해야하고, 안으로 자신의 상태에 액세스할 수 있도록 당신이 그들을 저장해야합니다 enforceConstraints() .

확인란을 그룹 모듈을 사용하려면 페이지에 다음 스크립트를 포함 :

 <스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&gallery-2009.12.08-22/build/gallery-checkboxgroups/ 갤러리 - checkboxgroups - min.js "> </ SCRIPT>

제공된 행동 설치 - 및 - 잊지 모두 같습니다

 YUI (). 사용 ( '갤러리 - checkboxgroups'기능 (Y)
 {
	 / / CSS 클래스 '내 -에 - 최소 한 확인란 - 그룹'모든 확인란을 행동을 첨부
	 새로운 Y. AtLeastOneCheckboxGroup ( '내 -에 - 최소 한 확인란 - 그룹입니다.');

	 / / CSS 클래스 '내 -에 최고의 한 확인란 - 그룹'모든 확인란을 행동을 첨부
	 새로운 Y. AtMostOneCheckboxGroup ( '내 -에 최고의 한 확인란 - 그룹입니다.');

	 / / CSS 클래스 "내 - 선택 - 모두 체크 상자 - 그룹 '모든 확인란을 행동을 첨부
	 / / ID "내 - 선택 - 모두 체크 상자"로 확인란에 의해 제어
	 새로운 Y. SelectAllCheckboxGroup ( '# 내 - 선택 - 전체 - 확인란', '내 - 선택 - 모든 확인란의 선택 - 그룹입니다.');
 });

마지막으로 참고 : 이상적으로, 사용자 지정 동작과 체크 박스가 다르게 스타일되어야하므로 사용자가 그들은 그저 평범한 확인란을하지 않는 몇 가지 표시가 있습니다. 예를 들어, 옷은을 위해 다이아몬드를 사용하여 제시 Y.AtLeastOneCheckboxGroup . 실제로, 그러나, 당신은 또한 사용자들이 귀하의 컨트롤 항목을 선택에 사용되는 것을 알 수 있도록해야합니다. 그러니 너무 똑똑하지, 영리 해!

: 대화 찾기 bloglines | 테크노을

공유하고 확장 : del.icio.us와 스크랩 | 디그 그것! | 레딧!