分享我们的select控件设计过程 - 网页制作

　分享我们的select控件设计过程

作者：abeet　时间： 2009-06-16　文档类型：原创　来自：蓝色理想

第 1 页分享我们的select控件设计过程 [1]
第 2 页分享我们的select控件设计过程 [2]
第 3 页分享我们的select控件设计过程 [3]

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

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

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

这儿用到一张图片arrow.gif

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(http://www.blueidea.com/articleimg/2009/06/6794/arrow.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控件仅在前台作小量的应用，那么适当地添加一些对键盘，鼠标的响应，就差不多可以了。

出处：蓝色理想
责任编辑：bluehearts

上一页下一页分享我们的select控件设计过程 [2]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。

相关文章

更多相关链接

亚足联新Logo的设计过程

使用控件模板定制控件的观感

用javascript实现select的美化

招聘网站的几个新控件

Js 按照MVC模式制作自定义控件


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule