코드는 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의 높이가 특정높이 이상일경우
특정높이로 고정하고, 세로 스크롤바가 생기게 하는것입니다.
그리고 가로스크롤바는 생기지 않게 하는거죠.
위 첨부이미지를 보시면 아시겠지만, 사이트의 주소표시부분은 가차없이 짤리고 끝납니다.
라이센스는 맘것쓰시고, 출처만 밝혀주세요.
