js 模拟下拉框
来源:互联网 发布:西安爱知中学中考 编辑:程序博客网 时间:2024/04/29 03:39
实现如图的功能:
<!--add-->
<script type="text/javascript">
//[CDATA[
var $=function(obj){
return document.getElementById(obj);
}
//浮动提醒
function sWin(pObj,ev,objId,argstr){
var eObj = ev;
var leftpos = parseInt(eObj.offsetParent.offsetLeft) + 63;
// var toppos = parseInt(eObj.offsetParent.offsetTop) + parseInt(eObj.offsetTop)-38;
var toppos = parseInt(eObj.offsetParent.offsetTop) + parseInt(eObj.offsetTop)-parseInt(eObj.parentNode.scrollTop)-38;
var showObj = $(objId);
showObj.parentNode.style.position = "relative";
showObj.style.visibility = "visible";
showObj.style.left = leftpos;
showObj.style.top = toppos;
/***repair***/
showObj.getElementsByTagName("span")[0].innerHTML = argstr;
/***repair end***/
showObj.onmouseout = function(){
showObj.style.visibility = "hidden";
pObj.style.display = "none";
}
showObj.onmouseover = function(){
showObj.style.visibility = "visible";
pObj.style.display = "block";
}
}
//模拟selete触发事件
function selectInit(objId,sObjId,listObj){
var selectObj = $(objId);
var liArr = new Array();
var tempStr;
liArr = selectObj.getElementsByTagName("li");
for (var i = 0;i<liArr.length;i++ )
{
liArr[i].onmouseover = function(event){
var e = event || window.event;
var eobj = e.srcElement || e.target;
this.style.background = "#e3e3e3";
this.style.cursor = "pointer";
selectObj.style.display = "block";
/******repair*******/
tempStr = this.innerHTML;
/******repair end******/
sWin(selectObj,eobj,sObjId,tempStr);
}
liArr[i].onmouseout = function(){
$(sObjId).style.visibility = "hidden";
this.style.background = "#ffffff";
}
liArr[i].onclick = function(){
$(listObj).value = tempStr;
$(sObjId).style.visibility = "hidden";
selectObj.style.display = "none";
}
}
selectObj.onmouseout = function(){
selectObj.style.display = "none";
}
selectObj.onmouseover = function(){
selectObj.style.display = "block";
}
}
//]]>
</script>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;}
#expert{width:85px;height:21px;background:url(http://www.hc360.com/images/cms/ask_04.gif) no-repeat;border:0;line-height:21px;}
#sWin{position:absolute;width:152px;height:93px;background:url(http://www.hc360.com/images/cms/ask_03.gif) no-repeat left top;overflow:hidden;font-size:14px;line-height:22px;visibility:hidden;color:#ff0000;font-weight:bold;}
#sWin p{margin:10px 11px 5px 22px;}
#sWin span{color:#544242;font-weight:normal;}
#namelist {border:#000 solid 1px;width:85px;list-style-type:none;display:none;background:#fff;position:absolute;left:65px;top:21px;height:110px;overflow-y:auto;overflow-x:hidden;}
#namelist li{line-height:18px;width:75px!important;_width:85px;padding-left:10px;}
</style>
<!--add end -->
<BODY style="margin-top:50px;">
<div id="expertDiv" name="expertDiv">技术专家:
<!--add-->
<input type="text" id="expert" name="expert" value="请选择专家" readonly />
<ul id="namelist">
<li>张山山</li>
<li>李山</li>
<li>问山一</li>
<li>陈山二</li>
<li>张三无</li>
<li>66666666</li>
<li>张三无</li>
<li>66666666</li>
<li>陈山二</li>
<li>张三无</li>
<li>66666666</li>
<li>张三无</li>
<li>66666666</li>
<li>陈山二</li>
<li>张三无</li>
<li>66666666</li>
<li>张三无</li>
<li>66666666</li>
<li>陈山二</li>
<li>张三无</li>
<li>66666666</li>
<li>张三无</li>
<li>66666666</li>
</ul>
<div id="sWin"><p>研究领域:<br /><span>安全防范报警系统、智能建筑</span></p></div>
<script type="text/javascript">
$("expert").onclick = function(){
$("namelist").style.display = "block";
if(parseInt($("namelist").scrollHeight)<110){
$("namelist").style.height = parseInt($("namelist").scrollHeight) + "px";
}else{
$("namelist").style.height = "110px";
}
$("namelist").parentNode.style.position = "relative";
}
selectInit("namelist","sWin","expert");
</script>
<!--add end-->
</div>
- js 模拟下拉框
- JS,UL模拟下拉框
- 纯js模拟下拉框
- js+div模拟下拉列表框
- js模拟设置select下拉框高度
- js模拟下拉选择<select>
- 模拟下拉列表框
- 下拉框模拟只读
- 下拉框模拟只读
- 模拟下拉框效果
- 简单模拟下拉组合框
- div模拟下拉框 select
- 模拟可输入下拉框
- div模拟下拉框 select
- javascript模拟下拉框select
- jquery模拟下拉框动作
- baidu 自动下拉框模拟
- jQuery模拟Select下拉框
- 数据仓库之路
- arcEngine 经典代码-编辑
- 百事可乐为何帮可口可乐抓内鬼
- 开始学习Oracle
- java类——汉字转拼音
- js 模拟下拉框
- FckEditor自定义工具条
- java类——使用javax.xml创建xml文件
- 冒泡排序
- 关于nested sets树
- instr的使用
- String被误解
- FMode使用入门
- 云计算-cloud computing