下拉框,伸缩形,使用时才显示,停止时隐藏起来,节省了界面的空间,越来越受到人们的青睐。下面让我们来看看最近流行的下拉框有哪些,具体怎么用代码去实现。流行下拉框其中一种,具体实现代码如下:
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> }
本站技术原创栏目文章均为中睿原创或编译,转载请注明:文章来自中睿,本站保留追究责任的权利。