论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > HTML教程
Tag:初学,入门,文字,链接,table,表单,框加,多媒体,标签,视频教程

select控件的设计

文章类别:HTML | 发表日期:2010-8-21 14:48:04

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

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

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

这儿用到一张图片arrow.gif

运行代码框
<!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(/files/allimg/090616/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="/files/allimg/090616/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>
&lt;&lt;
</div>

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(/files/allimg/090616/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>
&lt;&lt;
当前站点:
<select name="select2">
<option value="123123">政府门户类演示站</option>
<option value="456456">新闻门户类演示站</option>
<option value="789789">企业形象类演示站</option>
</select>
&lt;&lt;
</div>

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

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

上一篇:{教程}连续滚动的超级链接文字网页代码 人气:3461
下一篇:behavior语法 人气:2476
视频教程列表
文章教程搜索
 
HTML推荐教程
HTML热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058