<HTML xmlns:ms>
<BODY style="font-family:Tahoma;font-size:.75em;">
<?IMPORT namespace="ms" implementation="combobox.htc">
<ms:combobox id="combobox1" width="200" items="oranges;apples;pears;cranberries" />
<BUTTON onclick="alert(combobox1.value);">Get ComboBox Value</BUTTON>
</BODY>
</HTML>
=================================
combobox.htc
<PUBLIC:COMPONENT tagName="combobox">
<PUBLIC:DEFAULTS
canHaveHTML=true
contentEditable=false
tabStop=true
viewLinkContent=true
viewMasterTab=false
/>
<PUBLIC:PROPERTY id="propItems" name="items" put="putItems" />
<PUBLIC:PROPERTY id="propValue" name="value" get="getValue" />
<PUBLIC:ATTACH event="ondocumentready" handler="onDocumentReady" />
</PUBLIC:COMPONENT>
<STYLE>
.btn
{
font-family: Arial,MS Sans Serif;
color: gray;
font-weight: bold;
vertical-align:top;
}
</STYLE>
<SCRIPT language="JScript">
var g_nHeight = 0;
var g_sMenu = "<TABLE id='tblMenu' style='border:1px solid black;'></TABLE>";
var g_oMenu = null;
var g_rgItems = null;
function onDocumentReady()
{
// Size button
g_nHeight = txt1.offsetHeight;
btn1.style.width = g_nHeight;
btn1.style.height = g_nHeight;
// Size element
if (element.width)
{
spn1.style.width = element.width;
txt1.style.width = spn1.offsetWidth - btn1.offsetWidth;
}
// Create popup
g_oMenu = window.createPopup();
g_oMenu.document.body.innerHTML = g_sMenu;
g_oMenu.document.body.style.fontFamily = document.body.currentStyle.fontFamily;
g_oMenu.document.body.style.fontSize = document.body.currentStyle.fontSize;
txt1.style.fontFamily = document.body.currentStyle.fontFamily;
txt1.style.fontSize = "100%";
addItems()
}
function onClickButton()
{
g_oMenu.show(0, 0, 0 ,0);
var nHeight = g_oMenu.document.body.scrollHeight;
g_oMenu.show(0, g_nHeight - 1, spn1.offsetWidth - 1, nHeight, element);
}
function addItems()
{
if (!g_oMenu) return;
// Add Items to the popup menu
g_oMenu.document.body.innerHTML = g_sMenu;
for (var i = 0; i < g_rgItems.length; i++)
{
if (g_rgItems[i] == "") break;
var oTR = g_oMenu.document.getElementById("tblMenu").insertRow();
var oTD = oTR.insertCell();
oTD.attachEvent("onclick", new Function("chooseItem(\"" + i + "\")") );
oTD.attachEvent("onmouseover", new Function("selectItem(" + i + ")") );
oTD.attachEvent("onmouseout", new Function("unselectItem(" + i + ")") );
oTD.innerText = g_rgItems[i];
}
}
function selectItem(nIndex)
{
var oMnuTbl = g_oMenu.document.getElementById("tblMenu");
oMnuTbl.rows[nIndex].style.backgroundColor = "highlight";
oMnuTbl.rows[nIndex].style.color = "highlighttext";
}
function unselectItem(nIndex)
{
var oMnuTbl = g_oMenu.document.getElementById("tblMenu");
oMnuTbl.rows[nIndex].style.backgroundColor = "";
oMnuTbl.rows[nIndex].style.color = "";
}
function chooseItem(nIndex)
{
var oMnuTbl = g_oMenu.document.getElementById("tblMenu");
oMnuTbl.rows[nIndex].style.backgroundColor = "";
oMnuTbl.rows[nIndex].style.color = "";
txt1.value = oMnuTbl.rows[nIndex].cells[0].innerText;
g_oMenu.hide();
}
function putItems(sVal)
{
g_rgItems = new Array();
g_rgItems = sVal.split(";");
addItems();
}
function getValue()
{
return txt1.value;
}
</SCRIPT>
<NOBR id="spn1"><INPUT type="text" id="txt1" tabIndex=0><BUTTON id="btn1"
onclick="onClickButton()" class="btn" tabIndex=0 hidefocus=true>v</BUTTON></NOBR>
Tidak ada komentar:
Posting Komentar