当前位置： > 网页制作 > HTML/Xhtml > 文章内容

select控件是如何设计的？

http://www.itjxue.com 2015-08-05 23:01 来源:未知 点击次数:

有几个原因促使我们使用自定义的select控件来代替原生的select控件：

在ie6下select是一个窗口级的元素，绝对定位的层会被select穿越（一般的解决方法是在层内加一个iframe来遮住select）。
如果是自定义的select控件可以有更多的功能，下拉列表下的列表项可以更丰富，可以是列表、树甚至是表格（如下图）。

先把用HTML+CSS把select控件的外观模拟出来：

这儿用到一张图片arrow.gif

运行代码框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/<a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=html&' target='_blank'><u>html</u></a>4/loose.dtd"> <style> body, table, input, textarea, select{ margin: 0; font-size: 12px; line-height:1.5; font-family: Tahoma, SimSun, sans-serif; } .zSelect { display:inline-block; *zoom: 1; *display: inline; position:relative; height:20px; vertical-align:middle; } .zSelect .inputText { line-height: 17px; font-size:12px; background: #f7fafc; padding: 1px 17px 0 1px; border: 1px solid #68a; vertical-align: top; cursor:default; height: 17px; margin:0; } .zSelect .arrowimg { display:inline-block; *zoom: 1; *display: inline; position:relative; cursor:pointer; width:18px; height:20px; left:-18px; margin-right:-18px; vertical-align: top; outline:none; background: url(img/1143212.gif); } .zSelect .arrowimg:hover { background: url(http://www.blueidea.com/articleimg/2009/06/6794/arrow_over.gif); } .optgroup { position:absolute; z-index:666; left:0; top:19px; color: #369; } .optgroup div.optionsDiv{ padding:1px; overflow: auto; overflow-x: hidden; max-height:300px; color: #369; border: 1px solid #678; background: #f7fafc; width:auto; z-index:888; filter: Alpha(Opacity=90); opacity: 0.9; } .optgroup a, .optgroup a:visited{ font-size:12px; text-decoration:none; cursor:default; display:block; color: #369; white-space: nowrap; padding:1px 3px 2px 6px; _padding:0 3px 0 6px; height:18px; min-width:2em; } .optgroup a:hover,.optgroup a.selected:hover{ color: #dff; text-decoration:none; background:#38d; } .optgroup a.selected,.optgroup a:focus{ color: #eff; text-decoration:none; background:#49e; } </style> <script> function switchOptions(ele){ var optgroup=ele.parentNode.getElementsByTagName('div')[0]; if(optgroup.className=="optgroup")optgroup.style.display=optgroup.style.display=='none'?'block':'none'; } </script> <div>当前站点: <span id="_SiteSelector" class="zSelect"> <input type="text" class="inputText" value="请选择演示站点" style="width:100px;" unselectable="On"/><img height="20" width="18" class="arrowimg" src="img/1143212.gif" onClick="switchOptions(this)"/> <div class="optgroup" style="width:120px;"><div class="optionsDiv"> <a href="javascript:retureValur(this);">政府门户类演示站</a> <a href="javascript:retureValur(this);">新闻门户类演示站</a> <a href="javascript:retureValur(this);">企业形象类演示站</a> </div></div> </span> << </div>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

OK，在ff3下测试通过，在ie6、ie7下有一些错位，需要加CSS hack来作小许的调整，为了代码的纯粹，在这就不展示了。

接下来试着用js实现基本功能：

通过JS替换页面内原有的select，当时我们希望这个JS是非侵入式的，只要引用了select.js这个js文件的页面，就自动把页面里原有的select控件替换接管了。

先初步地实现selct控件的替换，和基本的交互（暂不考虑接管select的onchange事件等问题）。在下面的实现方法里并没有把原有的select去掉，只是隐藏了起来，所以如果select是在表单内，表单仍然能够正常提交。

运行代码框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <style> body, table, input, textarea, select{ margin: 0; font-size: 12px; line-height:1.5; font-family: Tahoma, SimSun, sans-serif; } .zSelect { display:inline-block; *zoom: 1; *display: inline; position:relative; height:20px; vertical-align:middle; } .zSelect .inputText { line-height: 17px; font-size:12px; background: #f7fafc; padding: 1px 17px 0 1px; border: 1px solid #68a; vertical-align: top; cursor:default; height: 17px; margin:0; } .zSelect .arrowimg { display:inline-block; *zoom: 1; *display: inline; position:relative; cursor:pointer; width:18px; height:20px; left:-18px; margin-right:-18px; vertical-align: top; outline:none; background: url(img/1143212.gif); } .zSelect .arrowimg:hover { background: url(http://www.blueidea.com/articleimg/2009/06/6794/arrow_over.gif); } .optgroup { position:absolute; z-index:666; left:0; top:19px; color: #369; } .optgroup p{ margin:0;} .optgroup div.optionsDiv{ padding:1px; overflow: auto; overflow-x: hidden; max-height:300px; color: #369; border: 1px solid #678; background: #f7fafc; width:auto; z-index:888; filter: Alpha(Opacity=90); opacity: 0.9; } .optgroup a, .optgroup a:visited{ font-size:12px; text-decoration:none; cursor:default; display:block; color: #369; white-space: nowrap; padding:1px 3px 2px 6px; _padding:0 3px 0 6px; height:18px; min-width:2em; } .optgroup a:hover,.optgroup a.selected:hover{ color: #dff; text-decoration:none; background:#38d; } .optgroup a.selected,.optgroup a:focus{ color: #eff; text-decoration:none; background:#49e; } </style> <script> function replaceSelects() { selects = document.getElementsByTagName('select'); for(var i=0; i < selects.length; i++) { var selectWidth=selects[i].clientWidth; var selectArea = document.createElement('span'); var textInput = document.createElement('input'); var button = document.createElement('a'); selectArea.id = "mySelect"+i; selectArea.className = "zSelect"; textInput.type = "text"; textInput.className = "inputText"; textInput.readOnly=true; textInput.style.width=selectWidth+"px"; textInput.id = "mySelectText"+i; textInput.value = selects[i].options[0].text; button.className = "arrowimg"; button.href="javascript:showOptions("+i+")"; button.hideFocus=true; selectArea.appendChild(textInput); selectArea.appendChild(button); selects[i].style.display='none'; selects[i].parentNode.insertBefore(selectArea, selects[i]); var optgroup = document.createElement('div'); optgroup.className = "optgroup"; optgroup.style.width=selectWidth+20+"px"; optgroup.style.display = "none"; optgroup.id = "optgroup"+i; var optionsDiv = document.createElement('div'); optionsDiv.className = "optionsDiv"; optionsDiv.id = "optionsDiv"+i; optgroup.appendChild(optionsDiv); if(selects[i].id=="")selects[i].id="select"+i; selectArea.appendChild(optgroup); for(var j=0; j < selects[i].options.length; j++) { var optionHolder = document.createElement('p'); var optionLink = document.createElement('a'); var optionTxt = document.createTextNode(selects[i].options[j].text); optionLink.href = "javascript:showOptions("+i+"); selectMe('"+selects[i].id+"',"+j+","+i+");"; optionLink.appendChild(optionTxt); optionHolder.appendChild(optionLink); optionsDiv.appendChild(optionHolder); if(selects[i].options[j].selected){selectMe(selects[i].id,j,i);} } } } function showOptions(g) { var elem = document.getElementById("optgroup"+g); elem.style.display=elem.style.display=='none'?'block':'none'; } function selectMe(selectFieldId,linkNo,selectNo) { optionLinks = document.getElementById("optionsDiv"+selectNo).getElementsByTagName("a"); for(var k = 0; k < optionLinks.length; k++) { if(k==linkNo) { optionLinks[k].className = "selected"; } else { optionLinks[k].className = ""; } } selectField = document.getElementById(selectFieldId); for(var k = 0; k < selectField.options.length; k++) { if(k==linkNo) { selectField.options[k].selected = "selected"; } else { selectField.options[k].selected = ""; } } var newText = selectField.options[linkNo].text; document.getElementById("mySelectText"+selectNo).value=newText; } window.onload=replaceSelects; </script> <div>当前站点: <select name="select"> <option value="123123">政府门户类演示站</option> <option value="456456">新闻门户类演示站</option> <option value="789789">企业形象类演示站</option> </select> << 当前站点: <select name="select2"> <option value="123123">政府门户类演示站</option> <option value="456456">新闻门户类演示站</option> <option value="789789">企业形象类演示站</option> </select> << </div>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

OK，在ff3下测试通过，在ie下存在层的定位问题，当弹出下拉列表时需要对层的z-index作调整，在这就不展示了。

如果这个select控件仅在前台作小量的应用，那么适当地添加一些对键盘，鼠标的响应，就差不多可以了。

(责任编辑：IT教学网)

复制链接发给好友收藏本文关闭此页

上一篇：IE8开发人员工具的菜单讲解(2)

下一篇：精确测量网页的软件:FastStone Capture

select控件是如何设计的？

(责任编辑：IT教学网)

相关HTML/Xhtml文章

阅读排行

专题教程

推荐HTML/Xhtml文章

最新更新HTML/Xhtml