下拉框,伸缩形，使用时才显示，停止时隐藏起来，节省了界面的空间，越来越受到人们的青睐。下面让我们来看看最近流行的下拉框有哪些，具体怎么用代码去实现。流行下拉框其中一种，具体实现代码如下：
　　

　　js： 　　<script type="text/javascript" language="javascript"> 　　var currentFocusPanel = null; 　　function showOptions(obj) { 　　if (currentFocusPanel != null) 　　currentFocusPanel.style.display = "none"; 　　var optPanel = document.getElementById(obj.id + "_options"); 　　optPanel.style.display = "block"; 　　if (obj.id == "type1") 　　optPanel.style.pixelTop = obj.clientTop + obj.clientHeight + document.body.offsetTop + 10; 　　else 　　optPanel.style.pixelTop = obj.clientTop + obj.clientHeight + document.body.offsetTop + 30; 　　optPanel.style.pixelLeft = obj.clientLeft + obj.offsetLeft + document.body.offsetLeft; 　　currentFocusPanel = optPanel; 　　} 　　function chooseOpt(obj) { 　　var type = $(obj).attr("title"); 　　document.getElementById(type).value = obj.innerText; 　　closeOptPanel(obj.parentElement.id); 　　} 　　function closeOptPanel(pid) { 　　document.getElementById(pid).style.display = "none"; 　　currentFocusPanel = null; 　　} 　　</script> 　　Html: 　　<div>

　　选项1：

　　<input id="type1" type="button" class="inputbox" onclick="showOptions(this)" value="请选择 aa"/> 　　<div id="type1_options" class="optionsbox" targetBox="type1"> 　　<a href="#" title="type1" onclick="chooseOpt(this);return false">请选择aaa</a> 　　<a href="#" title="type1" onclick="chooseOpt(this);return false">link_1</a> 　　<a href="#" title="type1" onclick="chooseOpt(this);return false">link_2</a> 　　<a href="#" title="type1" onclick="chooseOpt(this);return false">link_3</a> 　　<button onclick="closeOptPanel('type1_options')">Close</button> 　　</div> 　　<br />

　　选项2:

　　<input id="type2" type="button" class="inputbox" onclick="showOptions(this)" value="请选择bbb"/> 　　<div id="type2_options" class="optionsbox" targetBox="type2"> 　　<a href="#" title="type2" onclick="chooseOpt(this);return false">请选择bbb</a> 　　<a href="#" title="type2" onclick="chooseOpt(this);return false">Test_1</a> 　　<a href="#" title="type2" onclick="chooseOpt(this);return false">Test_2</a> 　　<a href="#" title="type2" onclick="chooseOpt(this);return false">Test_3</a> 　　<button onclick="closeOptPanel('type2_options')">Close</button> 　　</div> 　　}

本站技术原创栏目文章均为中睿原创或编译，转载请注明：文章来自中睿，本站保留追究责任的权利。