Modal Windowed Login UI.

오늘은 XE에 사용하려고 모달 윈도우 처리된 로그인 UIO(User Interface Object)를 하나 만들었습니다. jQuery를 이용해서 스크립트도 직접 작성해 봤는데 잘 한건지 한 번 봐주시면 좋겠네요. 

미리 알려드립니다만 저는 주로 인터렉션을 프로토타이핑 해서 보여줄 목적으로 자바스크립트를 작성하기 때문에 제 블로그에서 보여드리는 예제 코드가 모두 XE에 반영되는 것은 아닙니다.

예제를 새 창으로 보기

HTML

  • ‘LOG-IN’ 링크에 accesskey 속성을 사용. ‘Alt+L’ 또는 ‘Alt+Shift+L’ 키를 사용하면 링크에 직접 접근.
  • 논리적인 키보드 접근 순서. 로그인 레이어를 열거나 닫더라도 포커스는 초기화 되지 않고 문맥에 알맞게 순서를 유지.

CSS

  • 화면 전체를 덮는 반투명 레이어.
  • 로그인 상자를 화면의 정 중앙에 배치.
  • 서밋 버튼을 텍스트로 처리해서 텍스트를 교체할 수 있음.

Javascript

  • ‘LOG-IN’ 링크를 클릭해서 모달 윈도우 처리된 레이어 띄우기.
  • 인풋에 포커스가 들어가거나 빠질 때 ‘레이블’ 텍스트를 숨기거나 보여주기.
  • ‘로그인 유지’ 항목에 체크하면 경고문 보여주기.
  • ‘ID/PW’를 입력하지 않았을 때 상황에 맞는 알럿 띄우기.
  • ‘Open ID’ 링크를 클릭하면 오픈 아이디 화면으로 전환하기.
  • ‘ESC’키를 누르거나 ‘여백’ 또는 ‘X’ 버튼을 클릭하면 창 닫기.

P.S.

저는 얼마 전부터 텍스타일에서 글을 쓰고 있습니다. 여러분이 만약 이 글을 제 워드프레스에서 보셨다면 배달된 글을 보고 계신 겁니다. 텍스타일에서 작성한 글은 워드프레스, 미투데이, 트위터 등으로 자동으로 배달 된답니다. 번거롭게 퍼다 나르고 다닐 일이 없어서 좋네요. 텍스타일 한 번 사용해 보세요. 즐거운 글쓰기 경험도 해 볼겸 해서 말이죠. ^^

이 밖에 더 많은 예제들이 OUIF 페이지에 링크되어 있습니다.

분류: CSS,XE,웹 기획,웹 디자인,웹 접근성,웹 표준,자바스크립트 | 2010년 3월 4일, 23:47 | 정찬명 | 댓글: 9개 |
트랙백URI - http://naradesign.net/wp/2010/03/04/1199/trackback/

9개의 댓글이 있습니다.

  1. 입명이 님의 말:

    jQuery 스크립트가 전부 이벤트 관련이네요. 저도 잘은 모르지만 이벤트 버블링이나 그런 이벤트 처리가 추가 되어야지 않을까요?

    혹시 말씀드리지만 저도 초봅니다. -.-;;

  2. 정찬명 님의 말:

    입명이님 안녕하세요? 좋은 아침 입니다.
    정확하게 무엇 때문에 어떤 처리를 해야 한다는 것인지 잘 이해를 하지 못해서 자바스크립트를 담당하고 있는 다른 동료들한테도 물어보았는데요. 어떤 의미로 이런 이야기를 하셨는지 잘 모르겠다고 하시더라구요. 조금 더 자세하게 설명해 주실 수 있을까요?

  3. 이흥섭 님의 말:

    > ‘ID/PW’를 입력하지 않았을 때 상황에 맞는 알럿 띄우기.

    이 경우 ID 입력칸에 “ID”라고 적게 되면 다시 포커스 잡았을 때 내용이 사라지네요. 전 <label>을 입력칸 위에 띄워서 이 문제를 해결하고 있는데요, MooTools의 OverText가 같은 방식으로 구현되어있으니 참고해보세요~

  4. 정찬명 님의 말:

    @이흥섭
    아하~ 그런 방법이 있었구나. 생각도 못했는데. 정말 좋다. 바로 반영 해야겠어. 고마워! ^^

  5. 이흥섭 님의 말:

    <label>에 z-index: 1이요!

  6. 엘카 님의 말:

    이..이거슨 적절한 예제군요!

  7. 정찬명 님의 말:

    @흥섭
    고마워. label 텍스트가 투명한 input 뒤에서 보이도록 처리했단다. input 대신 label에 포커스가 맺히거나 클릭되면 안되니까.

  8. 입명이 님의 말:

    죄송합니다. 답변이 늦었어요. 초보란거 있지 마시고요. -.-;; 링크로 답변 달게요.

    http://www.openjs.com/articles/prevent_default_action/

  9. 정찬명 님의 말:

    입명이님 링크 감사합니다.
    이벤트 버블링과 관련하여 아래와 같은 솔루션을 제시하고 있는데 제가 아직 개념은 잘 모르겠습니다.
    월요일날 출근해서 옆에 있는 사람 괴롭혀야겠어요. ㅎㅎㅎ.

    function stopEvent(e) {
    	if(!e) var e = window.event;
    
    	//e.cancelBubble is supported by IE - this will kill the bubbling process.
    	e.cancelBubble = true;
    	e.returnValue = false;
    
    	//e.stopPropagation works only in Firefox.
    	if (e.stopPropagation) {
    		e.stopPropagation();
    		e.preventDefault();
    	}
    	return false;
    }

댓글 남기기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님