HTML:
Add two textboxes with images to the HTML page.
<!-- ComboBox Table (with textbox and arrow icon) -->
<table>
<tr>
<td>
<table class="combobox" cellpadding="0" cellspacing="0">
<tr>
<td>
<tr>
<!-- hour -->
<td>
<input tabindex="3" maxlength="2" value="00" type="text" id="text2"
style="width:25px; text-align:right;" class="combotext"
onkeypress="document.getElementById('option_placeholder').style.display='none';"
onkeydown="document.getElementById('option_placeholder').style.display='none';"
onfocus="buildOptions(23, this.id, 1, 0, 'right');"
/></td>
<td valign="middle"><a href="javascript://"
onmouseout="swapImage('imgText2', '../images/combobox1.gif');"
onmouseover="swapImage('imgText2', '../images/combobox2.gif');"
onclick="buildOptions(23, 'text2', 1, 0, 'right');"><img alt="" border="0" id="imgText2" src="../images/combobox1.gif" /></a></td>
</tr>
</table>
</td>
<td>:</td>
<td>
<table class="combobox" cellpadding="0" cellspacing="0">
<tr>
<!-- Minutes -->
<td>
<input tabindex="3" maxlength="2" value="00" type="text" id="text1"
style="width:25px; text-align:right;" class="combotext"
onkeypress="document.getElementById('option_placeholder').style.display='none';"
onkeydown="document.getElementById('option_placeholder').style.display='none';"
onfocus="buildOptions(60, this.id, 5, 0, 'right');"
/></td>
<td valign="middle"><a href="javascript://"
onmouseout="swapImage('imgText1', '../images/combobox1.gif');"
onmouseover="swapImage('imgText1', '../images/combobox2.gif');"
onclick="buildOptions(60, 'text1', 5, 0, 'right');"><img alt="" border="0" id="imgText1" src="../images/combobox1.gif" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- DIV acts as a placeholder, this is where we will place out combobox options
If you choose not to create options dynamically, you can simply add a static options table to this div -->
<div id="option_placeholder" tabindex="-1" style="border:solid 1px black;display:none;background-color:White;width:43px;"></div>
JavaScript:
<script language="javascript" type="text/javascript">
var curId = '';
// This example simple populates a list of integers between the range specified
// params: max (top limit), id (id of target textbox), increment (increments the option value), begin (first option value), align (horizontal)
// in this example we will increment by five; so the values in a "minutes" textbox for a timepicker will be: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55
function buildOptions(max, id, increment, begin, align) {
var box = document.getElementById(id);
var option_placeholder = document.getElementById('option_placeholder');
if (option_placeholder.style.display=='none' || curId != id) {
option_placeholder.style.display = 'none';
openCombo(id, 'option_placeholder');
curId = id;
var makeIt = '<table id=\"myTable\" tabindex=\"-1\" width=\"100%\" cellpadding=1 cellspacing=0>';
var i = begin;
while (i <= max) {
var val = '';
if (i < 10) {
val = '0';
}
val += i;
makeIt += "<tr><td style=\"text-align:" + align + "\" onclick=\"document.getElementById(\'" + id + "\').value=(\'" + val + "\');document.getElementById(\'option_placeholder\').style.display=\'none\';\" onmouseout=\"this.style.backgroundColor=\'#FFFFFF\';this.style.color=\'#000000\'\" onmouseover=\"this.style.backgroundColor=\'#316AC5\';this.style.color=\'white\';\" class=\"comboOption\">";
makeIt += val + '</td></tr>';
i=i+increment
}
makeIt += '</table>';
option_placeholder.innerHTML = makeIt;
} else {
option_placeholder.style.display='none';
}
}
// hover effect on the dropdownlist arrow icon
function swapImage(img, src) {
var img = document.getElementById(img);
img.src = src;
}
// check the click events are not occurring on the controls
// if the mouse click event occurs outside the control, options should close
document.onclick=check;
function check(e){
var target = (e && e.target) || (event && event.srcElement);
var obj1 = document.getElementById('option_placeholder');
checkParent(target)?obj1.style.display='none':null;
}
function checkParent(t){
while(t.parentNode){
var myPlaceholder = document.getElementById('option_placeholder');
var myTextbox = document.getElementById('text1');
var myImage = document.getElementById('imgText1');
var myTextbox2 = document.getElementById('text2');
var myImage2 = document.getElementById('imgText2');
if(t==myPlaceholder || t==myTextbox || t==myImage || t==myTextbox2 || t==myImage2){
return false
}
t=t.parentNode
}
return true
}
// show the options where the event took place
function openCombo(textbox, div) {
var div = document.getElementById(div);
var box = document.getElementById(textbox);
div.style.position = 'absolute';
if(div.style.display=='none') {
var X = (findPosX(box));
var Y = findPosY(box) + 19;
div.style.left = (X - 1) + 'px';
div.style.top = Y + 'px';
div.style.display = '';
} else {
div.style.display = 'none';
}
}
function findPosX(obj)
{
var curleft = 0;
if(obj.offsetParent)
while(1)
{
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if(obj.offsetParent)
while(1)
{
curtop += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.y)
curtop += obj.y;
return curtop;
}
</script>
CSS Styles:
<style type="text/css">
.combobox {
border: solid 1px #7F9DB9;
padding: 0px;
margin: 0px;
}
.combotext
{
border-style: none;
border-width: 0px;
padding: 1px;
margin: 0px;
}
.comboOption {
font-family: Sans-Serif;
font-size: 10pt;
color: Black;
cursor: default;
text-decoration:none;
}
.comboOption a:active
{
color: Black;
text-decoration:none;
}
.comboOption a:link
{
color: Black;
text-decoration:none;
}
.comboOption a:visited
{
color: Black;
text-decoration:none;
}
.comboOption a:hover
{
color: White;
text-decoration:none;
}
</style> |
