Ajax와 CSS로 구현한 SelectBox 브라우져별 구동모습
[다운받기]
첨부파일은 zip으로 압축되어있는데 그 구성은
- Ajax_SelectBox.html :: 웹에서 보여질 html 파일
- List.html :: Ajax로 불러올 List가 있는 html 파일
- Css.css :: CSS 파일
- Js.js :: Javascript 파일
- Bg_SelectBox.gif :: 셀렉트박스 이미지
- Bg_SelectBox_On.gif :: 셀렉트박스 선택시 이미지
- Blt_New.gif :: New 뷸렛 이미지
구동원리는 간단한데, 마우스가
이미지에 Over 했을시, 그때 List.html 파일을 로드하고, Click 했을시 불러온 List.html을 보여주게 됩니다.
이렇게 구분지음으로, 쓸대없는 DB Connect을 줄이는(혹은 데이터 로드를 줄이는) 효과를 볼 수 있습니다. (물런, 예제에서는 DB Connect하지 않습니다.)
소스는 간결하고 쉽게 짜여져 있으므로 별다른 설명을 필요 없을 듯 하여 주요함수만 간략히 어떤일을 하는지만 설명하겠습니다.
- RoadMyFav()
- 위에 설명한 이미지에 onmouseover시 일어나는 일을 하는 함수입니다.
- Ajax 객체를 생성하고, List.html 에 접근해서 데이터를 가지고 옵니다.
- ShowMyFav()
- 이미지를 click했을시 실행되는 함수입니다.
- RoadMyFav()함수로 얻어온 List.html의 내용을 출력해주는 역활을 합니다.
- OverClub(List)
- 리스트에 onmouseover/out 이벤트시 구동되는 함수로, CSS를 이용해서 유저에게 현재 어떤 리스트에 마우스가 올라와있는지 보여주는 함수입니다.
에게, 이게뭐야~하실거에요.
그리고 이것만의 특이한 점은 리스트가 뿌려지는 div의 높이가 특정높이 이상일경우
특정높이로 고정하고, 세로 스크롤바가 생기게 하는것입니다.
그리고 가로스크롤바는 생기지 않게 하는거죠.
위 첨부이미지를 보시면 아시겠지만, 사이트의 주소표시부분은 가차없이 짤리고 끝납니다.
라이센스는 맘것쓰시고, 출처만 밝혀주세요.
'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글
| CSS Selector에 대해 알아봅시다~ [초급편] (6) | 2007/02/07 |
|---|---|
| font-size: em을 처음쓰시는 분들을 위한 간단한 팁 (12) | 2007/02/06 |
| EditPlus v2.30 눈에 확띄는 업데이트 8가지 (4) | 2007/01/26 |
| FireFox 2.x 에서 Alt+S 즉, AccessKey가 안되는것 수정하기 (0) | 2007/01/22 |
| 사용하는 FireFox Plug-in (0) | 2007/01/22 |
| Ajax로 Select Box 비스무리하게 구현하기 (0) | 2006/12/28 |
댓글을 달아 주세요