2010-07-16 13:48:24| 分类: javascript | 标签: |举报 |字号大中小 订阅
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body,a,span,div {font-size:12px}
.myselect {position:absolute;background-color:white;border:1px solid gray;display:none}
.myselect ul {margin:0px; padding:0px;border:medium none;list-style-type:none}
.myselect li a {display:block;font-size:12px;padding:3px;text-decoration:none}
.myselect li a:hover {background-color:#C3D9FF}
.myselect li .v {display:none}
</style>
<script language="javascript">
function mySelect(openid,id,select_styles,option_styles,options,update)
{
s=document.getElementById(id);
s.className='myselect';
s.onmouseout=function(){this.style.display='';};
s.onmouseover=function(){this.style.display='inline';};
if(select_styles) for(i=0;i<select_styles.length;i++)
{
eval('s.style.'+select_styles[i].s+'="'+select_styles[i].v+'"');
}
itemstyle='';
if(option_styles) for(i=0;i<option_styles.length;i++)
{
itemstyle+=option_styles[i].s+':'+option_styles[i].v+';';
}
items='';
if(options) for(i=0;i<options.length;i++)
{
items+='<li><a style="'+itemstyle+options[i].s+'" href="'+(options[i].h ? options[i].h:'#')+'">'+(options[i].v!=null ? '<span class="v">'+options[i].v+'</span>' : '')+options[i].t+'</a></li>';
}
s.innerHTML='<ul>'+items+'</ul>';
o=document.getElementById(openid);
o.style.cursor='pointer';
o.onclick=function(){document.getElementById(id).style.display=document.getElementById(id).style.display==''?'inline':'';};
s.onclick=function(evt)
{
s.style.display='none';
if(!update) return false;
evt = evt || window.event;
srcEl = evt.target || evt.srcElement;
if(srcEl.tagName!='A') return false;
switch(document.getElementById(update.e).tagName)
{
case 'TD':
case 'DIV':
case 'SPAN':
document.getElementById(update.e).innerHTML = update.t=='value' ? srcEl.childNodes[0].innerHTML : srcEl.childNodes[1].nodeValue;
break;
case 'INPUT':
case 'TEXTAREA':
document.getElementById(update.e).value = update.t=='value' ? srcEl.childNodes[0].innerHTML : srcEl.childNodes[1].nodeValue;
break;
}
return false;
}
}
function init()
{
mySelect(
'mybtn',
'mysel',
[{s:"marginTop",v:"14px"},{s:"marginLeft",v:"-14px"}],
[{s:"width",v:"100px"}],
[{v:1,t:"12px",s:"font-size:12px"},{v:2,t:"14px",s:"font-size:14px"},{v:3,t:"16px",s:"font-size:16px"},{v:4,t:"24px",s:"font-size:24px"}],
{t:'text',e:'myupdate'});
}
</script>
</head>
<body onload="init();">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>fds</td>
<td>
<span id="myupdate"></span> <span id="mybtn">▲</span><div id="mysel"></div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>fds</td>
<td>sdf</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>fds</td>
<td>sdf</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>sfd</td>
<td>sdf</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
评论