못생긴 select box를 꾸며주는 라이브러리 selectric 사용 법
◆ selectric
select박스를 꾸며주는 라이브러리다.
▶ 라이브러리 다운로드
http://selectric.js.org/index.html 해당 홈페이지에서 기본적인 사용방법과 다양한 활용법에 대해 익힐 수 있다. 기본적으로 selectric을 사용하기 위해서는 아래 css, js 두 개의 파일이 필요하다.
-
- css
- Demos -> 오른쪽 상단 맘에 드는 테마 선택 후 Download Css 클릭 ( selectric.css )
-
- js
- Download(ZIP)다운로드 후 /src/jquery.selectric.js
▶ 사용
-
- jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>-
- js
<script src="jquery.selectric.js"></script>-
- css
<link rel="stylesheet" href="selectric.css">-
- Using
<select>
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
</select>
<script>
$(function() {
$('select').selectric();
});
</script>