요즘 자바스크립트 기반의 라이브러리를 검색 및 활용해야 하는 일이 많네요.

jQuery Selectric은 간단하고 편리한 Select를 제공하는 라이브러리입니다. 


기본정보는 다음과 같습니다. 



일단 라이선스는 MIT 이니깐요. 상용버전에서 사용하셔도 되고, 관련해서 소스코드 공개할 의무는 없습니다.

다만 MIT 라이선스여도, 사용했다면 웹 페이지 어딘가에 해당 라이브러리의 이름 및 라이선스 전문을 명시해야 합니다. 


사용 방법은 jQuery Selectric 홈페이지를 참고하시면 아주 쉽습니다.

jQuery 기반의 인기있는 라이브러리들은 


1. 간단하고

2. 꼭 필요한 이벤트 핸들러가 구현되어 있고

3. 이쁨


것 같아요. 


소개하는 포스팅이지만 간단한 예제를 통해서 확인해보도록 하겠습니다. 

<!doctype html>

<html lang="en">

  <head>

    <script src='jquery/jquery-2.1.3.min.js'></script>

    <script src='selectric/jquery.selectric.min.js'></script>

    <link rel="stylesheet" href='selectric/selectric.css'>

  </head>


  <body>

    <select id="smartphone">

      <option id="a1">Android</option>

      <option id="a2">iOS</option>

      <option id="a3">windows phone</option>

    </select> 

                

    <script>

      $('#smartphone').selectric();

    </script>

  </body>

</html>

실행결과


매우 이쁘네요!! 이벤트 핸들러는 홈페이지에 설명되어 있습니다. 

필요한 이벤트를 등록하셔서 사용하시면 되겠습니다 !!! 


참고로 데모 URL에 들어가시면 CSS를 커스터마이징 해서 다운로드하는 것도 가능합니다. :-)

+ Recent posts