Notice
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- book_club
- json-server 서버설치
- 자바스크립트 변수 차이점
- 카카오 Maps
- 의미있는태그
- js Array 내장함수
- 카카오 Maps API
- 변수선언방법
- node.js이메일보내기
- niceselect사용법
- 노마드코더
- node.js 로그관리
- node메일보내기
- 텍스트서식태그
- 텍스트입력 라이브러리
- Array 내장함수
- 노개북
- vue Maps API
- vue 카카오 Maps API
- 개발자북클럽
- json-server 사용하기
- iCalendar
- 이미지에 링크여러개걸기
- book-club-it-dictionary
- jqueryplugin
- 모바일 사용자를 위해 올바른 HTML input type
- plugin
- 이미지에 링크여러개
- select플러그인
- 이미지에 다중링크걸기
Archives
- Today
- Total
ㅇㅅㅇ
[JQUERY] select를 예쁘게 바꿔주는 플러그인 niceSelect 사용법1 본문
코딩을 하다보면 select를 수정하게 될 때가 있는데 css로 수정할 수 없는 영역이 있어 플러그인 niceSelect의 힘을 빌리게 되었다.
사용법
1. 아래의 링크에서 소스파일을 다운받는다
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' 카테고리의 다른 글
[JQUERY] 스크롤바를 커스텀해주는 plugin mCustomScrollbar (0) | 2022.04.29 |
---|---|
[JQUERY] select를 예쁘게 바꿔주는 플러그인 niceSelect 사용법2 (0) | 2022.04.28 |
[JQUERY] 음원재생, 일시정지, 정지 버튼 만들기 (1) | 2021.04.30 |
[JQUERY] 스크롤 모션 - 가로스크롤 처음과 끝을 감지하기 (0) | 2021.01.11 |
[JQUERY] IE에서도 이미지 흑백처리하기 CSS + Grayscale.js (0) | 2021.01.05 |
Comments