Ajax로 Select Box 비스무리하게 구현하기

코드는 UTF-8로 했는데, 깨진다는 분이 계셔서, ANSI, euc-kr 로 인코딩 했습니다.

[다운받기]
첨부파일은 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 뷸렛 이미지

총 6개의 파일로, HTML 파일 2개, CSS/JS 각각 1개, 이미지파일 3개입니다.

구동원리는 간단한데, 마우스가


이미지에 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를 이용해서 유저에게 현재 어떤 리스트에 마우스가 올라와있는지 보여주는 함수입니다.

주요 함수는 위와같이 3가지인데, 소스보시면

에게, 이게뭐야~

하실거에요.

그리고 이것만의 특이한 점은 리스트가 뿌려지는 div의 높이가 특정높이 이상일경우
특정높이로 고정하고, 세로 스크롤바가 생기게 하는것입니다.
그리고 가로스크롤바는 생기지 않게 하는거죠.
위 첨부이미지를 보시면 아시겠지만, 사이트의 주소표시부분은 가차없이 짤리고 끝납니다.

라이센스는 맘것쓰시고, 출처만 밝혀주세요.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중