Web, jQuery : DropKick.js : 드롭 다운을 만드는 방법 : 예제, 구현

Web, jQuery : DropKick.js : 드롭 다운을 만드는 방법 : 예제, 구현

 

오늘의 튜토리얼에서는 jQuery 플러그인을 사용하여 셀렉트 박스의 스타일을 div 및 아이템 리스트를 사용하도록 스타일을 변경합니다.

셀렉트 박스를 div 및 아이템 리스트로 변환하는 이유는 원하는 방식으로 스타일을 쉽게 지정할 수 있기 때문입니다. 일반 셀렉트 박스를 사용하면 맨 위에 선택한 옵션의 스타일을 지정할 수 있지만 셀렉트 박스의 드롭 다운 옵션을 쉽게 스타일 지정할 수는 없습니다. 이들이 아이템 리스트인 경우 선택한 항목에 CSS 클래스를 적용하고 스타일을 변경할 수 있습니다.

 

 

DropKick.js

맞춤 드롭 다운을 만드는 것은 일반적으로 많은 추가 설정 시간이 필요한 지루한 프로세스입니다. 키보드 탐색과 같은 기본 드롭 다운에 편의성이 없는 경우가 종종 있습니다. DropKick은 지루함을 제거하여 좋아보이도록 집중할 수 있습니다. DropKick도 정상적으로 저하되므로 Javascript가 꺼져 있으면 원래 셀렉트 박스만 유지됩니다.

DropKick.js를 사용하려면 먼저 GitHub에서 필요한 파일을 다운로드해야합니다. 파일을 프로젝트로 복사하고 DropKick CSS 파일과 DropKick JS 파일을 포함 시키면됩니다.

 

<!-- Include DropKick.css -->
<link rel="stylesheet" href="./css/dropkick.css">

<!-- Include DropKick.js -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="./js/jquery.dropkick-1.0.0.js"></script>

 

 

이제 새로운 셀렉트 박스를 만들고 DropKick을 이 새로운 셀렉트 박스에 할당하기만 하면 됩니다.

<select name="country" class="default" tabindex="2">
      <option value="">Try Me!</option>
      <option value="AU">Australia</option>
      <option value="CA">Canada</option>
      <option value="DE">Germany</option>
      <option value="JP">Japan</option>
      <option value="GB">United Kingdom</option>
      <option value="US">United States</option>
</select>

 

다음 Javascript 방법을 사용하여 이 선택 상자에 DropKick을 할당하십시오.

$(document).ready(function(){
    $('.default').dropkick();
});

 

 

대부분의 경우 셀렉트 박스를 사용할 때 선택 및 옵션을 수행할 때 발생하는 문제가 있습니다. jQuery에서는 변경 이벤트를 선택 상자에 할당하여 쉽게 수행 할 수 있습니다.

$('select').change();

 

드롭킥 선택 상자에 변경 이벤트를 추가하려면 다음 코드를 사용하십시오.

$('.change').dropkick({
  change: function (value, label) {
    alert('You picked: ' + label + ':' + value);
  }
});

 

 

각자 스타일 추가하기

자신 만의 테마를 만들려면 다음 코드를 사용하여 DropKick에 테마를 할당해야 합니다.

$('.custom_theme').dropkick({
        theme: 'mytheme',
        change: function (value, label) {
          $(this).dropkick('theme', value);
        }
      });

 

이제 아래 CSS를 복사하고 스타일을 변경하여 새 드롭 다운 모양을 활용해봅니다.

/**
 * Your theme name here
 *
 * Say something about the theme
 *
 * Give yourself some credit here
 *
 */

/* Container */
.dk_mytheme .dk_container {}
  .dk_mytheme a {}

/* Toggle */
.dk_mytheme .dk_toggle {}
  .dk_mytheme .dk_toggle:hover {}

/* Focus State */
.dk_mytheme.dk_focus,
.dk_mytheme:focus {}
  .dk_mytheme.dk_focus .dk_toggle {}

/* Open State */
.dk_mytheme.dk_open {}
  .dk_mytheme.dk_open .dk_toggle {}

/* Options Menu */
.dk_mytheme .dk_options {}
  .dk_mytheme .dk_options a {}
  .dk_mytheme .dk_options a:hover,
  .dk_mytheme .dk_option_current a {}

/* Inner options */
.dk_mytheme .dk_options_inner {}

/* Set a width property here */
.dk_mytheme .dk_options_inner,
.dk_mytheme.dk_touch .dk_options {}