NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


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 | XEUI 페이지에 링크되어 있습니다.

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

26개의 댓글이 있습니다.

  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;
    }
  10. 황성진 댓글:

    안녕하세요 ^^
    잘 보고 있습니다.

  11. 오현 댓글:

    정찬명님 오랫만에 글 남깁니다.
    딱히 이곳에 글 남겨야 할 내용은 아닌데 마침 정찬명님이 xe 자유게시판에 글 올리신것도 있어서 이 부분에 대해 고민해 주셨으면 하는 생각에 글 적습니다.

    어제 정찬명님이 올리신 최적화와 속도의 문제에 대한 글을 보면서 오래전 부터 xe를 보며 생각한 부분인데….

    js가 360kb가 넘는 상황에서 꼭 header 부분에 배치되어야 할 js가 아니라면 html 말미에 배치시키는 방식으로 하면서 최적화를 끄는게 사용자 측에서는 체감속도가 훨 빠르지 않을까 하는 생각 때문입니다.

    이 부분에 대해 제가 전문지식이 없어 일반적인 상식 선에서 나온 생각이며…

    가능하시다면 이 부분에 대한 테스트를 해 주셨으면 합니다.

  12. 정찬명 댓글:

    @오현
    JS를 body 아래쪽에 두면 확실히 체감 속도가 높아집니다. 오래전부터 할일 목록에 포함되어 있었지만 아직 적용되지 않았습니다. 머지않아 개선이 될 것으로 보입니다. ^^

  13. 구희준 댓글:

    안녕하세요. 오늘 처음 방문드립니다.
    저희 센터에서 정찬명님의 XE게시판을 사용하고 있는 것 같습니다.
    (제가 한 것이 아니라 퇴사한 직원이 작업한 것 같습니다.)
    그런데 퇴사한 직원과 연락이 안되는데 새로 가입한 회원들에게 권한을 부여할 수 없어 로그인이 안됩니다.
    관리자페이지가 별도로 있는지 그것도 모르겠구요.
    관리자 아이디랑 패스를 분실했을때 어떻게 처리해야 할지 알려주시면 감사하겠습니다.

    로그인화면은 위에 작업해주신 것처럼 뜨는데 어떻게 해야될지 모르겠습니다. 제가 이쪽분야를 전혀 몰라서 수정할 수가 없네요.
    혹시 이글을 보신다면 검토해보시고 연락이나 답신 부탁드립니다.
    잘 사용하고 있으면서 개발자에 대해서는 전혀 모르고 있었네요.
    감사합니다.

    구희준 grinboy앳naver.com

    게시판 주소
    http://cleantech.re.kr/renewal_CECT/xe/cect_board1

  14. 정찬명 댓글:

    @구희준
    만약 제가 퇴사한 직원분의 계정정보를 알 수 있게 된다면 XE는 보안이 허술한 것입니다. 따라서 그것은 알 수가 없습니다. 퇴사한 직원분을 찾으셔야 할 것 같습니다.

  15. 진모씨 댓글:

    이 문제로 고민하다가 테이블로 덮어주고 배경이미지나 배경 투명도 지정 후 세로정렬 가운데 가로정렬 가운데 하고 있는데 좋은 방법인가요?

  16. 정찬명 댓글:

    @진모씨
    배치를 위한 테이블을 사용한 것이라면 좋은 방법이 아닐것 같아요. ^^

  17. 진모씨 댓글:

    @정찬명
    그렇다면 스크립트로 onresize 이벤트를 하는것이 최선인가요?

  18. 정찬명 댓글:

    @진모씨
    onresize가 왜 필요하죠?

  19. 진모씨 댓글:

    @정찬명 세로 가운데 정렬 관련 문제였는데, 브라우저별 핵을 쓰는 것이 스크립트보다 나을까요?

  20. 정찬명 댓글:

    @진모씨
    네, 저 같은 경우는 IE6용 언더바 핵 ‘_’을 사용했습니다.

  21. 고나 댓글:

    감사합니다 ^^
    j쿼리 모달 튜토리얼 받아서 적용하다가 ㅜㅜ
    찬명님 ui가 훨씬 간단하고 깔끔해서 적용했습니다 !!
    스크립트 깊게 잘 몰라서요 ㅠㅠ
    그런데,,,,
    ID, 크롬, 사파리는 잘 나오는데요.
    파폭하고 오페라에서는 배경부터 중간에 잘려서 나와서요.
    z-index 값때문인가 싶어서 최고로 올려놨는데도, ㅠ 보이질 않아요
    링크가 걸린 값도 z-index는 높게 잡았는데,
    왜구럴까요…… 흐엉 ㅠㅠ
    이렇게 말씀드려도 확인 안하시면 답변 못주시겠지만 ^^ ㅋㅋㅋㅋ
    예제 올려두신거 허락도 없이 사용했습니다. ㅜ 용서해주세요 –

  22. 승승 댓글:

    궁금한게 있는데 input type=”password”에 label을 다니 전 땡떙떙떙으로 나오던데 어떻게 하면 텍스트가 그대로 나오지요?;;

  23. 정찬명 댓글:

    @승승
    아마도 label이 아니라 value 속성에 작성하신 것은 아닌지요? value 값으로 작성하면 그렇습니다. vlaue를 레이블 목적으로 사용하면 적법하지 않고 보조기기가 자동으로 감지하지 않는 경우에 접근성이 떨어질 수 있습니다.

  24. 승승 댓글:

    음.. 질문을 다시드릴게요. label을 어떤 방식으로 input 위로 올린거죠? absolute값이 있는게 아닌데 ㅜㅜ

  25. 정찬명 댓글:

    @승승
    레이블은 인풋 위에 있는게 아니라 아래쪽에 있고 투명한 인풋 배경 아래로 비치는거예요. 레이블 포지션은 자바스크립트 지원 환경에서는 absolute가 됩니다. 스크립트에 해당 코드가 있습니다.

  26. 승승 댓글:

    @정찬명가 아하 감사합니다. 이해했습니다^^;

댓글 쓰기

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

필수 아님

필수 아님