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

스티븐 우즈 'TimePicker 모듈 : YUI 3 갤러리

나는 야후 이곳 내부 제품 일하는 것이 특정 형식으로 입력 시간을 하루에 필요한 사용자. 나는보다는 강제 사용자가 정확하게 그것이 단지 시간 입력을위한 UI 위젯을 제공하기 쉬울 것이 올바른 형식을 입력하는 것을 결정했다. 난 항상 좋아했습니다 jQuery timepicker을 , 그것은 입력 시간에 간단하고 빠른 방법과 완벽하게 내 유스 케이스를 충족합니다. 물론, 우리가 사용했던 YUI 3 , 그래서 YUI 3 위젯을 다시하기로 결정했습니다. (이 빠르고 용이합니다 YUI 세 위젯 재단 .) 그게 YUI 작업을 다른 사람에게 도움이 될 줄 알았는데, 그래서 자신의 프로젝트에 사용하기 위해 지역 사회 오른쪽으로 돌려 주기로 결정.

당신은 YUI 3의 기본을 잘 알고있는 경우 선택기를 사용하면 당신을 위해 아주 간단합니다. (참조 라이브 버전을 여기).

자신의 프로젝트에서 선택기를 사용하려면 스크립트를 다음과 같습니다

	 <스크립트 유형 = "텍스트 / 자바 스크립트"

그런 다음 인스턴스와 위젯을 렌더링 :

 YUI (). 사용 ( '갤러리 - timepicker'기능 (Y) {
	 / / timepicker에 구성 개체를 패스
        var에 따는 = 새로운 Y.Saw.Timepicker (
            {
			    / / timepicker를 포함 요소
                contentBox : 'div.foo' 

			    / 초기 시간
                시간 : {
                    시간 : 0,
                    분 : 0
                }
                문자열 : {
                    오전 : 'AM',
                    오후 : 'PM'
                    분리기 : ':'
                }
                지연 : mouseover에 상자를 선택하기 전에 5 / / 지연
            }
        );
       picker.render ();
 });

모든 YUI 세 위젯 같은 timepicker 생성자는 위젯의 초기 화면을 제어하는​​ 구성 개체를 걸립니다. 위젯을 조작하는 것은 다음 위젯 방식을 통해 이루어집니다 render , hide 및 show . render 방법은 실제 DOM 요소가 만들어집니다 곳입니다. hide 및 show 클래스 추가 및 제거하기만하면 yui-timepicker-hidden 경계 상자 요소에 있습니다. 이 클래스 (및 도구에 대한 추가 CSS 클래스)가 제대로 동작하는 위젯에서 구현되어야합니다. 단순화하기 위해 여기서 내가 실행 예제에서 사용하고있는 스타일입니다

	 / * YUI 재설정이 * /을 가정
	 . YUI - timepicker {
         디스플레이 : 블록;
         여백 : 5px;
         왼쪽 : 0;
         위치 : 상대적;
         배경 : 투명;
     }

     / 위젯에 대한 * 표준이 경우에는 단지 화면에서 숨겨진 하나를 밀고 * /
     . YUI - timepicker - 숨김 {
         왼쪽 : - 9999em;
         위치 : 절대;
     }

     . YUI - timepicker {
         색상 : # 000;
         글꼴 가족 : verdana;
         텍스트 정렬 : 왼쪽;
     }

 / * 따는 사람은 실제로이 명령을 나열합니다 * /
     . YUI - timepicker 안녕, {
         디스플레이 : 블록;
         위치 : 상대적;
         왼쪽 : 0;
         . 왼쪽 : 5px;
         여백 : 0px;
         여백 : 0px;
         높이 : 24px;
         텍스트 정렬 : 왼쪽;
         - 웹킷 - 전환 : 왼쪽 0.1의 용이성에;
     }

     . YUI - timepicker 리 {
         목록 스타일 : 없음;
         디스플레이 : 블록;
         플로트 : 왼쪽;
         위치 : 상대적;
         왼쪽 : 0;
         오버플로 : 숨겨진;
         폭 : 19px;
         패딩 : 1px;
         마진 : 0 2px 0 0;
         테두리 : # 999 고체 1px;
         텍스트 정렬 : 센터;
     }

     . YUI - timepicker 리 {
         - moz - 국경 - 반경 : 2px;
         - 웹킷 - 국경 - 반경 : 2px;
     }

	 / * * / 선택된 시간을 강조
     . YUI - timepicker li.yui - timepicker 활성 {
         배경 : # 000;
         색상 : # fff;
         - moz - 상자 - 그림자 : 2px 2px 2px # CCC;
         - 웹킷 박스 - 그림자 : 2px 2px 2px # CCC;
     }

난 그냥 스타일 웹킷 애니메이션을 사용, 알아서 프로젝트에 이러한 스타일을 사용자 정의하십시오. 대부분의 목적을 위해 당신은 처음 따는을 숨기려하는 것이 좋습니다. 호출 hide 방법 것은 추가 yui-timepicker-hidden 위젯의 경계 상자에 스타일을. 저는 아이디로 요소를 클릭 있도록 내 래퍼 요소에 클릭 핸들러를 추가했습니다 time 위젯이 표시 / 사라집니다 :

	  picker.hide ();
      Y.get ( '# 기본').에서 ( '다음', 기능 (E) {
          var에 대상 = e.target;
          경우 (target.test ( '# 시간')) {
              () picker.toggle;
          }
      });

따는 사람이 실제로 유용하게하기 위해 나는들을 것이다

timeset

선택한 시간에 대한 정보와 개체를 반환 이벤트, 그 객체의 "s24hour"회원이 핸들러에 전달 사용하는거야. 그것은 24 시간 형식으로 시간의 문자열 표현의. (도 가능합니다이 hour , minute , ampm 과 s12hour ) :

	 picker.subscribe ( 'timeset'기능 (E) {
         / / timeset는 시간 * 설정하면 화재가 사용자 지정 이벤트입니다 *
         / / 이것을 사용하는 대신 timeChange보다
         Y.get ( '# 시간') 설정 ( '값', e.s24hour).;
     });

 / / 선택기를 숨기기 "셀 클릭"에 처리기를 추가할 때 휴대폰 사용자가 클릭
     picker.subscribe ( 'cellclick'기능 (E) {
        this.hide ();
     } 따는);

그것에있다 그게 다야! 즐길 수 있습니다.

: 대화 찾기 bloglines | 테크노를

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!