간단한 SELECT tag 플러그인입니다.

예전부터 디자이너분께서 뭐 때문이진 모르겠지만 꼭 select tag를 저런식으로 사용하고 싶다고

항상 고집을 피우시는 바람에 간단히 만들어 사용하고 있다가 자료 정리겸 간단한 플러그인 형태로

만들어 봤습니다. (혹시 저같이 디자이너분께 괴롭힘 당하고 있으신 분들이 계실까봐....)



요즘엔 워낙 좋은 jquery plugin도 많고 bootstrap에도 좋은기능이 많이 제공되고 있어 그냥 혼자

쓸까 했는데 그래도 누군가는 필요하실거 같아 올려놓습니다.

허접한 소스니까 너무 태클을 심하게 넣지는 말아주셨으면 합니다.


<?php
include_once G5_PLUGIN_PATH.'/select_box/select_box.php';
?>
<span class="select-box">
<select name="" id="select-tag">
<option value="">선택</option>
<option value="1">옵션1</option>
<option value="2">옵션2</option>
<option value="3">옵션3</option>
<option value="4">옵션4</option>
<option value="5">옵션5</option>
</select>
</span>

<script type="text/javascript">
$(function(){
$(".select-box").select_box();
});
</script>

우선 적용하고자 하는 페이지에서 select_box Plugin을 include 합니다.

그리고 HTML code는 적용하고자 하는 select태그를 div, p, span등의 태그로 감싸줍니다.

아무태그나 상관없으면 class 또는 id를 선언해 주시고 자바스크립트에

$("선언한 class 또는 id 명").select_box();

javascript 코드를 넣어주시면 적용 됩니다.



옵션 항목은 아래와 같습니다.


width : "", // SELECT BOX 넓이, default : 기본태그 사이즈 +15px(스크롤 사용시 +30px)
maxWidth : "", // SELECT BOX 최대 넓이
minWidth : "", // SELECT BOX 최소 넓이
height : "", // SELECT BOX 높이, default : 27px
maxScroll : "", // 스크롤 되는 높이, default : 240px
useBorderbox : false, // border-box 사용여부
onchange:function(){}, // SELECT BOX change event 발생시 호출 함수
onload:function(){} // SELECT BOX 적용완료됐을시 호출 함수


옵션사용방법은 링크를 통해 들어와보시면 좀더 자세한 설명이 되어 있으니 참고하시기 바랍니다.