登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

忆风的博客

http://www.cnblogs.com/dhjdhja

 
 
 

日志

 
 
 
 

自制下拉框  

2010-07-16 13:48:24|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<!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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>fds</td>
    <td>&nbsp;
<span id="myupdate"></span> <span id="mybtn">▲</span><div id="mysel"></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>fds</td>
    <td>sdf</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>fds</td>
    <td>sdf</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>sfd</td>
    <td>sdf</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>

  评论这张
 
阅读(401)| 评论(0)

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018