웹솔루션개발 25년 노하우! 해피CGI의 모든것

이렇게 생긴 selectbox 를 이렇게 예쁘게 만들 수 있습니다. 사용법도 해당 사이트에 안내가 잘 되어있습니다. 각 js 와 css 를 include 해주고 사용하시면 됩니다. 더 디테일한 커스텀도 가능합니다. 사용해 보시기 바랍니다.

기본 선택상자(셀렉트박스) 를 조금 더 이용하기 편한 UI로 변경해주는 jquery 플러그인입니다. 다운로드 받은 파일의 압축을 해제한뒤, demo/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 위와 같은 기본 선택상자를 오른쪽의 그림 처럼 선택가능한 옵션들을 펼쳐서 화면에 보여주고, 이미 선택한 옵션을 표시해주고, 선택 가능한 옵션들 에서 검색어가 포함된 옵션을 검색할수 있습니다. 여러개의 옵션을 선택할 수 있는 선택상자에서도 사용할 수 있습니다. 사용법은 아래와 같습니다.

선택하고자 하는 여러개의 옵션을 셀렉트박스를 이용해서 선택할 수 있는 jquery 플러그인입니다. 다운로드 받은 파일의 압축을 해제한 뒤 example/index.html 파일을 웹브라우저로 열어보면 예제를 확인할 수 있습니다. 주요 기능은 아래와 같습니다. - 선택할 수 있는 최대 옵션 수를 지정할 수 있습니다. - 각 옵션에 대해 이미지를 할당할 수 있습니다. - 검색 상자를 기준으로 옵션을 필터링할 수 있습니다. - 선택한 옵션을 태그/토큰으로 표시합니다. 예제 파일을 웹브라우저로 열어보면, 아래의 그림과 같은 화면이 표시가 됩니다. Select 라는 부분을 클릭해보면, 선택 가능한 옵션들이 화면에 표시가 됩니다. 옵션의 제목들 앞에, 옵션에 해당하는 이미지를 표시하도록 할 수 있습니다. 몇몇개의 ..

셀렉트박스를 디자인요소로 보여주는 폼관련 디자인 소스입니다. - 상단에 폼관련 디자인 css를 호출합니다. - 디자인관련 소스를 넣어줍니다. - 마지막으로 폼관련 js와 스크립트를 넣어줍니다. 압축파일내에 index.html 파일에서 코드를 확인하시면 됩니다. 자세한 사용옵션들은 링크를 통해서 확인하실 수 있습니다~~

디자인이 쉽지않았던 셀렉트박스에 wSelect jQuery Plugin을 이용해 아이콘을 추가할 수 있습니다, 데모화면 사이트에 접속하여 상단에 보여지는 Download 링크를 클릭합니다. 링크 클릭시 페이지가 이동되게 되며, 리스트들 중 가장 상위에 있는 파일을 다운받으시면 됩니다. 다운한 zip파일의 압축을 풀면 구현에 필요한 css파일, js파일, 그리고 아이콘이미지등을 확인하실 수 있습니다.