[JQUERY] select를 예쁘게 바꿔주는 플러그인 niceSelect 사용법1

코딩을 하다보면 select를 수정하게 될 때가 있는데 css로 수정할 수 없는 영역이 있어 플러그인 niceSelect의 힘을 빌리게 되었다.

사용법

1. 아래의 링크에서 소스파일을 다운받는다

jQuery Nice Select

 

2. 필요한 소스를 폴더에 복사하고 파일에 소스를 추가한다.

(js파일은 복사하지 않고 cdn에서 가져와 아래처럼 사용해도 된다.)

<!-- css -->
<link rel="stylesheet" href="nice-select.css">

<!-- js -->
<script src="jquery.js"></script>
<!--플러그인 소스 택1-->
<!--플러그인을 폴더에 복사한 경우-->
<script src="jquery.nice-select.js"></script>
<!-- cdn으로 가져오는 경우 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>

 

3. 사용하고자 하는 페이지에 아래 소스를 추가한다.

아래처럼 select를 하게 되면 해당하는 페이지(?) 전체의 select가 변경된다.

특정 select만 변경하고 싶은 경우, 해당 class또는 id로 하면 된다.

<script>
    $(document).ready(function(){
        // selectbox styling
        $('select').niceSelect();
    });
</script>

 

+ 기본 사용법 외 옵션 등은 소스를 다운받을 수 있는 사이트에서 확인하자

 

+ niceSelect에서 option부분이 스크롤도 디자인이 필요하다 싶어 수정도 했었는데 이 부분에 대한 방법은 아래 링크에서 

[JQUERY] select를 예쁘게 바꿔주는 플러그인 niceSelect 사용법2