그누보드 폼 요소 디자인 개선을 위한 jQuery 플러그인 선택 및 적용 방법

• 목록
• 스크랩

그누보드 폼 요소 디자인 개선을 위한 jQuery 플러그인 선택 및 적용 방법

투박한 그누보드 기본 selectbox와 checkbox 디자인을 깔끔하게 개선할 수 있는 jQuery 플러그인 종류와 실제 적용 및 충돌 방지 방법을 확인합니다.

그누보드 폼 요소 디자인 개선을 위한 jQuery 플러그인 모음

기본 HTML 폼 요소의 투박한 디자인을 커스텀하기 위해 그누보드 및 웹 프로젝트에서 활용할 수 있는 jQuery 플러그인 목록은 다음과 같습니다.

• Jquery.sumoselect: 다중 선택(multi-selected) 기능이 필요할 때 드롭다운 메뉴를 개선하는 데 활용할 수 있는 플러그인입니다.
• jQuery Nice Select: 셀렉트박스를 ul, li 구조 등으로 변환하여 디자인을 꾸밀 수 있게 돕는 플러그인입니다.
• SelectBoxIt: 셀렉트박스 요소를 커스텀 디자인으로 변환해 주는 플러그인입니다.
• pretty checkbox: 체크박스 요소를 보기 좋게 꾸밀 수 있는 라이브러리입니다.
• icheck-material: 머티리얼 디자인 스타일의 체크박스를 구현할 수 있는 플러그인입니다.
• Bootstrap Multiselect: 일반 셀렉트박스 내부에 체크박스를 넣어 다중 선택과 검색을 지원하는 플러그인입니다.

각 플러그인은 오픈소스 형태로 제공되며, 프로젝트 환경과 요구하는 폼 스타일(셀렉트박스, 다중 선택, 체크박스 등)에 맞춰 선택하여 적용할 수 있습니다.

그누보드 환경에서 셀렉트박스 플러그인 적용 및 초기화 방법

그누보드 또는 웹 프로젝트에서 셀렉트박스(Selectbox) 디자인을 개선하기 위해 jQuery 플러그인을 연동하고 초기화하려면, 라이브러리 파일 로드 후 대상 셀렉트 요소에 초기화 함수를 호출해야 합니다. 예를 들어 jQuery nice-select 플러그인을 사용할 때의 적용 절차는 다음과 같습니다.

1. 스크립트 및 스타일 파일 로드

페이지의 헤더나 대상 스킨 파일에 플러그인의 CSS와 JS 파일을 포함합니다. 예시로 CDN을 사용하는 경우 아래와 같이 불러올 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>

게시판 등의 특정 환경에서만 적용하려면 PHP 조건문으로 감싸서 로드할 수 있습니다.

<?php if( $bo_table=='bbs') {?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>
<?php }?>

2. HTML 마크업 작성

꾸미고자 하는 기본 <select> 요소에 식별자(id 또는 name 등)를 지정합니다.

<select id="selectBox" class="nice-select">
 <option value="option1">옵션 1</option>
 <option value="option2">옵션 2</option>
</select>

3. 플러그인 초기화 실행

문서가 로드된 시점에 jQuery를 이용해 선택자에 플러그인 함수를 연결하여 활성화합니다.

<script>
$(document).ready(function() {
 $('#selectBox').niceSelect();
});
</script>

특정 네임 속성을 가진 셀렉트박스를 지정할 수도 있습니다.

<script>
$(document).ready(function(){
 $("select[name='wr_3']").niceSelect();
});
</script>

특정 페이지 및 요소 스크립트 적용 제외 방법

전역 스크립트로 인해 특정 폼 요소가 깨지거나 원하지 않는 곳에 플러그인이 적용되는 문제를 방지하려면, 특정 셀렉트 요소에 대해 플러그인 효과를 해제하는 방법을 사용할 수 있습니다.

1. 적용 해제 방법

• jQuery Nice Select 플러그인을 특정 ID나 클래스에 적용하지 않거나 초기화를 해제하려면 destroy 메서드를 사용할 수 있습니다.
• 개별 사례에서 $("#ca_number").niceSelect('destroy'); 코드를 적용하여 특정 요소의 플러그인 동작을 해제한 사례가 확인됩니다.

플러그인 적용 후 동적 값 변경 및 스크롤 처리 방법

1. option 값이 변경되거나 추가될 때

• niceSelect 플러그인을 사용할 때 select option이 추가되거나 변경되는 경우, 변경 이벤트가 끝난 다음에 아래 코드를 추가하여 반영해야 합니다.

   $('select').niceSelect('update');

2. 스크롤을 커스텀할 때

• niceSelect 사용 후 optionbox에 스크롤을 추가하려면 .nice-select.list에 높이 제한을 줍니다.

  .nice-select.list {
   height: 200px;
   }

  - 이때 `nicescroll`을 함께 사용했다면 스크롤이 정상적으로 작동하도록 관련 설정을 같이 추가해 주어야 합니다.
  
  ## 폼 요소 디자인 개선 플러그인 선택 및 적용 가이드
  
  - **상황**: 그누보드 또는 웹 프로젝트의 투박한 기본 HTML 폼 요소(셀렉트박스, 체크박스 등)를 커스텀 디자인으로 변경하고자 함.
  - **선택 기준**:
   - 다중 선택 및 드롭다운 개선: `Jquery.sumoselect`, `jQuery Nice Select`, `SelectBoxIt`
   - 체크박스 및 라디오 버튼 디자인 개선: `pretty checkbox`, `icheck-material`
  - **다음 행동**:
   1. **파일 로드**: 테마/스킨의 head/tail 파일에 플러그인 CSS/JS를 로드합니다. (특정 게시판 등에서만 사용 시 `if($bo_table == '게시판ID')`와 같은 PHP 조건문 활용)
   2. **요소 지정**: 꾸미고자 하는 HTML 요소에 고유 ID나 클래스를 부여합니다.
   3. **초기화**: `$(document).ready` 내에서 플러그인 함수(예: `$('#id').niceSelect();`)를 호출하여 적용합니다.
  
  ## 실전 FAQ
  
  ### Q. 특정 페이지나 요소에서 플러그인 충돌이 발생할 때 어떻게 하나요?
  - **막히는 점**: 전역 로드된 스크립트가 원치 않는 요소까지 변형시켜 디자인이 깨지는 경우.
  - **대안**: 특정 요소만 플러그인 효과를 제거하려면 `destroy` 메서드(예: `$('#ca_number').niceSelect('destroy');`)를 사용하세요. 특정 게시판에서만 로드하고 싶다면 `if($bo_table == '게시판ID')`와 같은 PHP 조건문을 활용해 스크립트 로드 범위를 제어할 수 있습니다.
  
  ### Q. 동적으로 option이 추가/변경될 때 디자인이 갱신되지 않아요.
  - **대안**: `niceSelect` 사용 시 `$('select').niceSelect('update');`를 호출하여 변경 사항을 반영하세요. 스크롤이 필요한 경우 `.nice-select.list`에 CSS 높이를 지정하고, `nicescroll`을 함께 사용 중이라면 해당 플러그인의 갱신 함수도 함께 호출해야 합니다.
  
  ---
  
  ## 참고자료
  
  ### 기타 참고자료
  
  - [gnustudy.com — SelectBox,checkbox, radio buttons 제이쿼리 플러그인 모음 - 웹개발정보](https://gnustudy.com/bbs/board.php?bo_table=sitelink&wr_id=31)
  - [cofs.tistory.com — jquery / selectBox plugins / 플러그인 모음](https://cofs.tistory.com/33)
  - [sir.kr — 특정부분 스크립트 적용안하기 - SIR - 개발자 커뮤니티](https://sir.kr/questions/412540)
  - [bad-liar.tistory.com — javascript jQuery.sumoselect](https://bad-liar.tistory.com/160)
  - [moo-you.tistory.com — jQuery nice-select 다운 및 select 꾸미기](https://moo-you.tistory.com/1001)
  - [soa-memo.tistory.com — JQUERY select를 예쁘게 바꿔주는 플러그인 niceSelect 사용법2](https://soa-memo.tistory.com/29)
  - [dabok407.tistory.com — Multi Select Box (SumoSelect)](https://dabok407.tistory.com/82)

  함께 보면 좋은 글

  • 그누보드5 소셜 로그인 플러그인 설치 및 설정 방법
  • 그누보드5 게시판 입력 폼에 jQuery UI Datepicker 달력 적용하기