Programing/jQuery
jquery image combobox 이미지 콤보박스 image select box
리커니
2018. 10. 2. 12:39
반응형
jquery image combobox 이미지 콤보박스 image select box
위와 같이 이미지가 포함된 콤보박스를 구현해 보도록 하겠습니다.
사용하는 라이브러리는 ms-Dropdown 입니다.
아래 Link에서 다운받으실 수 있습니다.
Link : https://github.com/marghoobsuleman/ms-Dropdown
구현 방법은 간단합니다.
사용할 페이지에 다운받은 파일 중 jquery.dd.min.js 파일과 css파일을 추가합니다.
|
1
2 |
<link rel="stylesheet" href="${ctx }/resource/css/dd.css" />
<script type="text/javascript" src="${ctx}/resource/js/jquery.dd.min.js"></script> |
cs |
필수! 해당 라이브러리는 jQuery가 필요합니다.
일반 셀렉트 박스와 비슷하지만,
data-image 경로에 있는 이미지가 셀렉트 박스 내에 표출됩니다.
|
1
2
3
4
5 |
<select id="msComboTest">
<option value="" data-image="${ctx}/resource/images/lcs_null.gif" data-title="NULL"</option>
<option value="0" data-image="${ctx}/resource/images/lcs_blank.gif" data-title="BLANK">BLANK</option>
<option value="1" data-image="${ctx}/resource/images/lcs_o.gif" data-title="GREEN↓">GREEN↓</option>
</select> |
cs |
요기만 추가해 주면 끝!
|
1
2
3 |
$(function(){
$('#msComboTest').msDropDown();
}); |
cs |
이제 실행을 하면 아래와 같이 셀렉트 박스가 표출 되는 것을 확인 하실 수 있습니다.
물론 동적으로 생성하는 것도 가능하며,
동적으로 해당 셀렉트 박스의 값을 바꾸기 위해서는 아래와 같이 사용합니다.
|
1 |
$('#msComboTest').msDropDown().data("dd").set("selectedIndex", 0); |
cs |
인덱스로 해당 값을 초기화 하실 수 있습니다.
반응형