웹에서 텍스트박스를 보면 스타일을 적용하여 이쁘게 꾸밀수 있다.
그러나 셀렉트박스는 스타일이 적용이 되지 않는다.
그러나... 셀렉트박스 역시 일반 스타일이 아닌 HTC를 사용하여 스타일을 적용할 수 있다.
예제 화면
스타일 정의
자바스크립트 예제
태그 작성법
* class에 스타일에 정의한 selecBox를 넣어준다.
* 사용자 옵션 (정의하지 않으면 기본값으로 사용됨)
- setDisplayCount : 옵션 항목 창에 출력될 항목의 갯수를 지정 (기본값 : 10)
- setImage : 드롭다운 항목이 나오도록 클릭하는 화살표 이미지 지정 (기본값 : arrow_image.gif)
- setColor : 셀렉트 박스에서 사용되는 색상 지정
사용법 : "비활성 글씨색,비활성 바탕색,활성 글씨색,활성 바탕색,비활성 테두리색,활성 테두리색"
만약 1개의 색상만 넣으면 비활성 글씨색만 지정하게 된다.
작성 : 상현넘™ [SHBLITZ.NET]
그러나 셀렉트박스는 스타일이 적용이 되지 않는다.
그러나... 셀렉트박스 역시 일반 스타일이 아닌 HTC를 사용하여 스타일을 적용할 수 있다.
예제 화면
관련자료 다운로드 :
selectbox.zip스타일 정의
<style type="text/css">
.selectBox { behavior:url('./selectbox.htc'); }
</style>
.selectBox { behavior:url('./selectbox.htc'); }
</style>
자바스크립트 예제
<script language="javascript" type="text/javascript">
function ItemAdd(objname, textname, valuename)
{
var obj = document.getElementById(objname);
obj.add(new Option(document.getElementById(textname).value,document.getElementById(valuename).value));
obj.reInitializeSelectBox();
}
function ItemAdd(objname, textname, valuename)
{
var obj = document.getElementById(objname);
obj.add(new Option(document.getElementById(textname).value,document.getElementById(valuename).value));
obj.reInitializeSelectBox();
}
function ItemChange(obj)
{
alert(obj.options[obj.selectedIndex].value);
}
</script>
{
alert(obj.options[obj.selectedIndex].value);
}
</script>
태그 작성법
* class에 스타일에 정의한 selecBox를 넣어준다.
* 사용자 옵션 (정의하지 않으면 기본값으로 사용됨)
- setDisplayCount : 옵션 항목 창에 출력될 항목의 갯수를 지정 (기본값 : 10)
- setImage : 드롭다운 항목이 나오도록 클릭하는 화살표 이미지 지정 (기본값 : arrow_image.gif)
- setColor : 셀렉트 박스에서 사용되는 색상 지정
사용법 : "비활성 글씨색,비활성 바탕색,활성 글씨색,활성 바탕색,비활성 테두리색,활성 테두리색"
만약 1개의 색상만 넣으면 비활성 글씨색만 지정하게 된다.
<select class="selectBox" id="mySelect" onchange="ItemChange(this);" setDisplayCount="5" setImage="./arrow_image2.gif" setColor="#ff0000,#ffffff,#ffffff,#ff0000,#666666,#ff0000">
<option value="01">테스트..01..</option>
<option value="02">테스트..02..</option>
<option value="03">테스트..03..</option>
<option value="04">테스트..04..</option>
<option value="05">테스트..05..</option>
<option value="06">테스트..06..</option>
<option value="07">테스트..07..</option>
</select>
<option value="01">테스트..01..</option>
<option value="02">테스트..02..</option>
<option value="03">테스트..03..</option>
<option value="04">테스트..04..</option>
<option value="05">테스트..05..</option>
<option value="06">테스트..06..</option>
<option value="07">테스트..07..</option>
</select>
작성 : 상현넘™ [SHBLITZ.NET]
댓글을 달아 주세요