/***********************************************
제작 : 최영규 (2003. 4. 18)
문의 : http://hooriza.com/
파일 : HoorizaSelectbox.js
설명 : 모양을 바꿀수 있는 셀렉트 박스
무단 이동, 재배포를 금합니다
***********************************************/
/*
사용법 :
1) 본 자바스크립트 파일을 문서에 포함시킨다
예)
2) body 태그의 onload, onresize 속성에 다음과 같은 내용을 넣어준다
예)
3) SELECT 태그는 반드시 FORM 태그로 감싸있어야 한다
예)
4) 바뀐 모양의 새로운 셀렉트 박스가 생길곳에 식으로 DIV 태그를 넣어준다
예)
5) 원래의 셀렉트 박스에 uselayer="레이어이름" 식으로 사용할 레이어 이름을 넣어준다
예)
속성 설명 :
이 자바스크립트로 만들어지는 셀렉트 박스의 모양은 기본적으로 XP 스타일의 모양을 가지며, 새로운 형태의
사용자 정의 스타일을 가지도록 하는것은 SELECT 태그에 특수한 속성을 줌으로써 가능하다. 속성은 대소문자
를 구별하지 않는다.
width : 셀렉트 박스의 가로크기를 설정
height : 셀렉트 박스를 클릭했을때 드롭다운되는 아이템 리스트 박스의 세로크기를 설정
rollupimage : 셀렉트 박스가 Roll up 되었을때의 일반적인 버튼 이미지
rollupoverimage : 셀렉트 박스가 Roll up 되었고 마우스를 올렸을때 버튼 이미지
rolluppushimage : 셀렉트 박스가 Roll up 되었고 버튼을 눌렀을때 이미지
dropdownimage : 셀렉트 박스가 Drop down 되었을때의 일반적인 버튼 이미지
dropdownoverimage : 셀렉트 박스가 Drop down 되었고 마우스를 올렸을때 버튼 이미지
dropdownpushimage : 셀렉트 박스가 Drop down 되었고 버튼을 눌렀을때 이미지
boxstyle : 셀렉트 박스의 스타일
boxclass : 셀렉트 박스의 스타일을 담고 있는 CSS 클래스 지정
liststyle : 아이템 리스트 박스의 스타일
listclass : 아이템 리스트 박스의 스타일을 담고 있는 CSS 클래스 지정
itemstyle : 아이템의 스타일
itemclass : 아이템의 스타일을 담고 있는 CSS 클래스 지정
fontstyle : 폰트의 스타일
fontclass : 폰트의 스타일을 담고 있는 CSS 클래스 지정
buttonstyle : 버튼의 스타일
buttonclass : 버튼의 스타일을 담고 있는 CSS 클래스 지정
color : 아이템의 글자색
bgcolor : 아이템의 배경색
selcolor : 아이템이 선택되었을때 글자색
selbgcolor : 아이템이 선택되었을때 배경색
이전 버젼에 비해 바뀐 내용 :
1) itemstyle 과 itemclass 속성이 각각 itemstyle, fontstyle 과 itemclass, fontclass 속성으로 나뉘었습니다.
사용에 구분을 해주셔야 합니다.
2) 스크립트를 사용하는데에 필요한 그림파일 spacer.gif 가 추가되었습니다.
3) 리스트가 열려있을때 다른 곳을 클릭하면 리스트가 닫힙니다.
4) 셀렉트박스에 포커스를 줄 수 있게 되었고 포커스가 주어진 상태에서 위, 아래방향키로 항목을 선택할 수 있습니다.
*/
var sbarray = new Array;
var defaultitemstyle = "padding:3 3 1 3px; cursor:default;";
var defaultfontstyle = "font-family:굴림; font-size:12px;";
var defaultchooseboxstyle = "border:1px solid #7F9DB9; border-width:0 1 1 1;";
var defaultselectedboxstyle = "border:1 solid #7F9DB9; padding:1px;";
function loadSelectBox()
{
for (var i = 0; i < document.forms.length; i++)
{
var theform = document.forms[i];
for (var j = 0; j < document.forms[i].length; j++)
{
var control = document.forms[i][j];
if (control.type == "select-one" && control.getAttribute("USELAYER") && control.getAttribute("NAME"))
{
control.style.visibility = "hidden";
control.style.display = "none";
addSelectBox(control.getAttribute("USELAYER"), "document.forms["+i+"]."+control.getAttribute("NAME"));
}
}
}
for (var i = 0; i < sbarray.length; i++)
loadObject(i);
}
function moveSelectBox()
{
for (var i = 0; i < sbarray.length; i++)
moveObject(i);
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function document.onclick()
{
var eventobj = window.event.srcElement;
if (!eventobj.getAttribute("hooriza")) // 다른곳을 클릭했을때
{
closeSelectBoxes();
}
}
function addSelectBox(sboxtext, sseltext)
{
sbarray[sbarray.length] = new Array(sboxtext, sseltext);
}
function initProperties()
{
var properties = new Array;
properties["itemstyle"] = "";
properties["fontstyle"] = "";
properties["boxstyle"] = "";
properties["buttonstyle"] = "";
properties["liststyle"] = "";
properties["itemclass"] = "";
properties["itemfontclass"] = "";
properties["boxclass"] = "";
properties["buttonclass"] = "";
properties["listclass"] = "";
properties["rollimg"] = "/admin/images/xproll.gif";
properties["rolloverimg"] = "/admin/images/xproll_.gif";
properties["rollpushimg"] = "/admin/images/xproll__.gif";
properties["dropimg"] = "/admin/images/xpdrop.gif";
properties["dropoverimg"] = "/admin/images/xpdrop_.gif";
properties["droppushimg"] = "/admin/images/xpdrop__.gif";
properties["fgcolor"] = "windowtext";
properties["bgcolor"] = "window";
properties["fgselcolor"] = "highlighttext";
properties["bgselcolor"] = "highlight";
return properties;
}
function getProperties(objindex)
{
var properties = initProperties();
properties["sboxtext"] = sbarray[objindex][0];
properties["sseltext"] = sbarray[objindex][1];
eval("var ssel = "+properties["sseltext"]+";");
properties["itemstyle"] = (ssel.getAttribute("ITEMSTYLE") ? ssel.getAttribute("ITEMSTYLE") : properties["itemstyle"]);
properties["fontstyle"] = (ssel.getAttribute("FONTSTYLE") ? ssel.getAttribute("FONTSTYLE") : properties["fontstyle"]);
properties["boxstyle"] = (ssel.getAttribute("BOXSTYLE") ? ssel.getAttribute("BOXSTYLE") : properties["boxstyle"]);
properties["buttonstyle"] = (ssel.getAttribute("BUTTONSTYLE") ? ssel.getAttribute("BUTTONSTYLE") : properties["buttonstyle"]);
properties["liststyle"] = (ssel.getAttribute("LISTSTYLE") ? ssel.getAttribute("LISTSTYLE") : properties["liststyle"]);
properties["itemclass"] = (ssel.getAttribute("ITEMCLASS") ? ssel.getAttribute("ITEMCLASS") : properties["itemclass"]);
properties["itemfontclass"] = (ssel.getAttribute("ITEMFONTCLASS") ? ssel.getAttribute("ITEMFONTCLASS") : properties["itemfontclass"]);
properties["boxclass"] = (ssel.getAttribute("BOXCLASS") ? ssel.getAttribute("BOXCLASS") : properties["boxclass"]);
properties["buttonclass"] = (ssel.getAttribute("BUTTONCLASS") ? ssel.getAttribute("BUTTONCLASS") : properties["buttonclass"]);
properties["listclass"] = (ssel.getAttribute("LISTCLASS") ? ssel.getAttribute("LISTCLASS") : properties["listclass"]);
if (ssel.getAttribute("ROLLUPIMAGE"))
{
properties["rollimg"] = ssel.getAttribute("ROLLUPIMAGE");
properties["rolloverimg"] = ssel.getAttribute("ROLLUPIMAGE");
properties["rollpushimg"] = ssel.getAttribute("ROLLUPIMAGE");
}
if (ssel.getAttribute("ROLLUPOVERIMAGE"))
{
properties["rolloverimg"] = ssel.getAttribute("ROLLUPOVERIMAGE");
properties["rollpushimg"] = ssel.getAttribute("ROLLUPOVERIMAGE");
}
properties["rollpushimg"] = (ssel.getAttribute("ROLLUPPUSHIMAGE") ? ssel.getAttribute("ROLLUPPUSHIMAGE") : properties["rollpushimg"]);
if (ssel.getAttribute("DROPDOWNIMAGE"))
{
properties["dropimg"] = ssel.getAttribute("DROPDOWNIMAGE");
properties["dropoverimg"] = ssel.getAttribute("DROPDOWNIMAGE");
properties["droppushimg"] = ssel.getAttribute("DROPDOWNIMAGE");
}
if (ssel.getAttribute("DROPDOWNOVERIMAGE"))
{
properties["dropoverimg"] = ssel.getAttribute("DROPDOWNOVERIMAGE");
properties["droppushimg"] = ssel.getAttribute("DROPDOWNOVERIMAGE");
}
properties["droppushimg"] = (ssel.getAttribute("DROPDOWNPUSHIMAGE") ? ssel.getAttribute("DROPDOWNPUSHIMAGE") : properties["droppushimg"]);
properties["fgcolor"] = (ssel.getAttribute("COLOR") ? ssel.getAttribute("COLOR") : properties["fgcolor"]);
properties["bgcolor"] = (ssel.getAttribute("BGCOLOR") ? ssel.getAttribute("BGCOLOR") : properties["bgcolor"]);
properties["fgselcolor"] = (ssel.getAttribute("SELCOLOR") ? ssel.getAttribute("SELCOLOR") : properties["fgselcolor"]);
properties["bgselcolor"] = (ssel.getAttribute("SELBGCOLOR") ? ssel.getAttribute("SELBGCOLOR") : properties["bgselcolor"]);
return properties;
}
function loadObject(objindex)
{
var sboxdata = "";
var property = getProperties(objindex);
eval("var ssel = "+property["sseltext"]+";");
eval("var sbox = "+property["sboxtext"]+";");
var sbwidth = (ssel.width ? parseInt(ssel.width) : 0);
var selectedindex = (ssel.selectedIndex < 0 ? 0 : ssel.selectedIndex);
var innertext = ssel.options[selectedindex].text;
var sselname = ssel.getAttribute("name");
sboxdata += "
";
sboxdata += "
";
sboxdata += "
";
sboxdata += "
";
sboxdata += "
";
sboxdata += "
";
sboxdata += "
";
sboxdata += "
";
sboxdata += "";
sboxdata += "
";
sbox.innerHTML = sboxdata;
setCaption(objindex, innertext);
setItems(objindex);
}
function moveObject(objindex)
{
var property = getProperties(objindex);
eval("var sboxlayer = "+property["sboxtext"]+"_layer;");
if (sboxlayer.style.visibility == "visible")
{
sboxlayer.style.display = "none";
sboxlayer.style.display = "block";
}
}
function setSelectBoxColor(objindex, fgcolor, bgcolor)
{
var property = getProperties(objindex);
eval("var sselcaption = "+property["sseltext"]+"_caption;");
eval("var sselcaptionbg = "+property["sboxtext"]+"_captionbg;");
sselcaption.style.backgroundColor = bgcolor;
sselcaption.style.color = fgcolor;
sselcaptionbg.style.backgroundColor = bgcolor;
sselcaptionbg.style.color = fgcolor;
}
function pressKey(objindex)
{
var property = getProperties(objindex);
eval("var ssel = "+property["sseltext"]+";");
eval("var sboxlayer = "+property["sboxtext"]+"_layer;");
if (event.keyCode != 38 && event.keyCode != 40)
return true;
if (event.keyCode == 38) // 윗 방향키
{
if (ssel.selectedIndex > 0)
ssel.selectedIndex -= 1;
}
else if (event.keyCode = 40) // 아래 방향키
{
if (ssel.selectedIndex < ssel.length - 1)
ssel.selectedIndex += 1;
}
if (sboxlayer.style.visibility == "visible")
mouseOverItem(objindex, ssel.selectedIndex)
setCaption(objindex, ssel.options[ssel.selectedIndex].text);
return false;
}
function setItems(objindex)
{
var sboxlayerdata = "";
var property = getProperties(objindex);
eval("var ssel = "+property["sseltext"]+";");
eval("var sboxlayer = "+property["sboxtext"]+"_layer;");
var itemlength = ssel.length;
var sbwidth = (ssel.width ? parseInt(ssel.width) : 0);
var sbheight = (ssel.height ? parseInt(ssel.height) : 0);
for (var i = 0; i < itemlength; i++)
{
sboxlayerdata += "
"+ssel.options[i].text+"
";
}
sboxlayer.style.width = sbwidth;
sboxlayer.style.height = sbheight;
sboxlayer.innerHTML = sboxlayerdata;
}
function mouseOverItem(objindex, itemindex)
{
var property = getProperties(objindex);
eval("var howmany = "+property["sseltext"]+".length;");
for (var i = 0; i < howmany; i++)
{
eval("var layeritem = "+property["sboxtext"]+"_layer_item"+i+";");
layeritem.style.backgroundColor = property["bgcolor"];
layeritem.style.color = property["fgcolor"];
}
eval("var layeritem = "+property["sboxtext"]+"_layer_item"+itemindex+";");
layeritem.style.backgroundColor = property["bgselcolor"];
layeritem.style.color = property["fgselcolor"];
layeritem.focus();
}
function buttonOver(objindex, over)
{
var property = getProperties(objindex);
eval("var sboxlayer = "+property["sboxtext"]+"_layer;");
eval("var sselbutton = document."+property["sboxtext"]+"button;");
if (sboxlayer.style.visibility == "visible")
{
if (over == true)
sselbutton.src = property["dropoverimg"];
else
sselbutton.src = property["dropimg"];
}
else
{
if (over == true)
sselbutton.src = property["rolloverimg"];
else
sselbutton.src = property["rollimg"];
}
}
function buttonDown(objindex, down)
{
var property = getProperties(objindex);
eval("var sboxlayer = "+property["sboxtext"]+"_layer;");
eval("var sselbutton = document."+property["sboxtext"]+"button;");
if (sboxlayer.style.visibility == "visible")
{
if (down == true)
sselbutton.src = property["droppushimg"];
else
sselbutton.src = property["dropimg"];
}
else
{
if (down == true)
sselbutton.src = property["rollpushimg"];
else
sselbutton.src = property["rollimg"];
}
}
function giveFocus(objindex)
{
var property = getProperties(objindex);
eval("var sselcaption = "+property["sseltext"]+"_caption;");
sselcaption.focus();
}
function clickButton(objindex)
{
var property = getProperties(objindex);
eval("var ssel = "+property["sseltext"]+";");
eval("var sboxlayer = "+property["sboxtext"]+"_layer;");
eval("var sselcaption = "+property["sseltext"]+"_caption;");
eval("var sselbutton = document."+property["sboxtext"]+"button;");
if (sboxlayer.style.visibility != "visible")
{
closeSelectBoxes();
sboxlayer.style.display = "block";
if (typeof(swipe) == "function")
{
sboxlayer.filters.alpha.opacity = 0
sboxlayer.style.visibility = "visible";
mouseOverItem(objindex, ssel.selectedIndex);
setTimeout("swipe("+property["sboxtext"]+"_layer, 2);",1); // The span must be rendered before
}
else
{
sboxlayer.filters.alpha.opacity = 100;
sboxlayer.style.visibility = "visible";
mouseOverItem(objindex, ssel.selectedIndex);
}
sselbutton.src = property["dropoverimg"];
}
else
{
sboxlayer.style.display = "none";
sboxlayer.style.visibility = "hidden";
sselbutton.src = property["rolloverimg"];
giveFocus(objindex);
}
}
function closeSelectBoxes()
{
for (var i = 0; i < sbarray.length; i++)
{
var property = getProperties(i);
eval("var sboxlayer = "+property["sboxtext"]+"_layer;");
eval("var sselbutton = document."+property["sboxtext"]+"button;");
if (sboxlayer.style.visibility == "visible")
{
sboxlayer.style.display = "none";
sboxlayer.style.visibility = "hidden";
sselbutton.src = property["rolloverimg"];
}
}
}
function selectItem(objindex, index)
{
var property = getProperties(objindex);
eval("var ssel = "+property["sseltext"]+";");
eval("var sbox = "+property["sboxtext"]+";");
ssel.selectedIndex = index;
clickButton(objindex);
setCaption(objindex, ssel.options[ssel.selectedIndex].text);
}
function setCaption(objindex, text)
{
var property = getProperties(objindex);
eval("var sselcaption = "+property["sseltext"]+"_caption;");
eval("var sselrealcaption = "+property["sboxtext"]+"_realcaption;");
sselrealcaption.innerHTML = text+"";
sselcaption.style.height = sselrealcaption.offsetHeight;
}
";
sselcaption.style.height = sselrealcaption.offsetHeight;
}