来一发select控件是怎样计划的？
就在新标准备受瞩目之际，两大网络监督机构却起冲突。网页制造poluoluo文章简介：有几个缘故原由促使我们利用自界说的select控件来取代原生的select控件：在ie6下select是一个窗口级的元素，相对定位的层会被select穿越（一样平常的办理办法是在层内加一个iframe来遮住select）。假如是自界说的select控件能够有更多的功效，下拉列表下的列表项能够更丰厚，有几个缘故原由促使我们利用自界说的select控件来取代原生的select控件：
[*]在ie6下select是一个窗口级的元素，相对定位的层会被select穿越（一样平常的办理办法是在层内加一个iframe来遮住select）。
[*]假如是自界说的select控件能够有更多的功效，下拉列表下的列表项能够更丰厚，能够是列表、树乃至是表格（以下图）。
先把用HTML+CSS把select控件的表面摹拟出来：
这儿用到一张图片
arrow.gif
运转代码框
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//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:1px17px01px;border:1pxsolid#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.poluoluo.com/jzxy/UploadFiles_333/200906/2009062009253387.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;}.optgroupdiv.optionsDiv{padding:1px;overflow:auto;overflow-x:hidden;max-height:300px;color:#369;border:1pxsolid#678;background:#f7fafc;width:auto;z-index:888;filter:Alpha(Opacity=90);opacity:0.9;}.optgroupa,.optgroupa:visited{font-size:12px;text-decoration:none;cursor:default;display:block;color:#369;white-space:nowrap;padding:1px3px2px6px;_padding:03px06px;height:18px;min-width:2em;}.optgroupa:hover,.optgroupa.selected:hover{color:#dff;text-decoration:none;background:#38d;}.optgroupa.selected,.optgroupa:focus{color:#eff;text-decoration:none;background:#49e;}</style><script>functionswitchOptions(ele){varoptgroup=ele.parentNode.getElementsByTagName(div);if(optgroup.className=="optgroup")optgroup.style.display=optgroup.style.display==none?block:none;}</script><div>以后站点:<spanid="_SiteSelector"class="zSelect"><inputtype="text"class="inputText"value="请选择演示站点"style="width:100px;"unselectable="On"/><divclass="optionsDiv"><ahref="javascript:retureValur(this);">当局流派类演示站</a><ahref="javascript:retureValur(this);">旧事流派类演示站</a><ahref="javascript:retureValur(this);">企业抽象类演示站</a></div></div></span><<</div>
OK，在ff3下测试经由过程，在ie6、ie7下有一些错位，必要加CSShack来作小许的调剂，为了代码的地道，在这就不展现了。
接上去试着用js完成基础功效：
经由过程JS交换页面内原本的select，事先我们但愿这个JS长短侵进式的，只需援用了select.js这个js文件的页面，就主动把页面里原本的select控件交换接受了。
先开端地完成selct控件的交换，和基础的交互（暂不思索接受select的onchange事务等成绩）。鄙人面的完成办法里并没有把原本的select往失落，只是埋没了起来，以是假如select是在表单内，表单仍旧可以一般提交。
运转代码框
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//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:1px17px01px;border:1pxsolid#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.poluoluo.com/jzxy/UploadFiles_333/200906/2009062009253387.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;}.optgroupp{margin:0;}.optgroupdiv.optionsDiv{padding:1px;overflow:auto;overflow-x:hidden;max-height:300px;color:#369;border:1pxsolid#678;background:#f7fafc;width:auto;z-index:888;filter:Alpha(Opacity=90);opacity:0.9;}.optgroupa,.optgroupa:visited{font-size:12px;text-decoration:none;cursor:default;display:block;color:#369;white-space:nowrap;padding:1px3px2px6px;_padding:03px06px;height:18px;min-width:2em;}.optgroupa:hover,.optgroupa.selected:hover{color:#dff;text-decoration:none;background:#38d;}.optgroupa.selected,.optgroupa:focus{color:#eff;text-decoration:none;background:#49e;}</style><script>functionreplaceSelects(){selects=document.getElementsByTagName(select);for(vari=0;i<selects.length;i++){varselectWidth=selects.clientWidth;varselectArea=document.createElement(span);vartextInput=document.createElement(input);varbutton=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.options.text;button.className="arrowimg";button.href="javascript:showOptions("+i+")";button.hideFocus=true;selectArea.appendChild(textInput);selectArea.appendChild(button);selects.style.display=none;selects.parentNode.insertBefore(selectArea,selects);varoptgroup=document.createElement(div);optgroup.className="optgroup";optgroup.style.width=selectWidth+20+"px";optgroup.style.display="none";optgroup.id="optgroup"+i;varoptionsDiv=document.createElement(div);optionsDiv.className="optionsDiv";optionsDiv.id="optionsDiv"+i;optgroup.appendChild(optionsDiv);if(selects.id=="")selects.id="select"+i;selectArea.appendChild(optgroup);for(varj=0;j<selects.options.length;j++){varoptionHolder=document.createElement(p);varoptionLink=document.createElement(a);varoptionTxt=document.createTextNode(selects.options.text);optionLink.href="javascript:showOptions("+i+");selectMe("+selects.id+","+j+","+i+");";optionLink.appendChild(optionTxt);optionHolder.appendChild(optionLink);optionsDiv.appendChild(optionHolder);if(selects.options.selected){selectMe(selects.id,j,i);}}}}functionshowOptions(g){varelem=document.getElementById("optgroup"+g);elem.style.display=elem.style.display==none?block:none;}functionselectMe(selectFieldId,linkNo,selectNo){optionLinks=document.getElementById("optionsDiv"+selectNo).getElementsByTagName("a");for(vark=0;k<optionLinks.length;k++){if(k==linkNo){optionLinks.className="selected";}else{optionLinks.className="";}}selectField=document.getElementById(selectFieldId);for(vark=0;k<selectField.options.length;k++){if(k==linkNo){selectField.options.selected="selected";}else{selectField.options.selected="";}}varnewText=selectField.options.text;document.getElementById("mySelectText"+selectNo).value=newText;}window.onload=replaceSelects;</script><div>以后站点:<selectname="select"><optionvalue="123123">当局流派类演示站</option><optionvalue="456456">旧事流派类演示站</option><optionvalue="789789">企业抽象类演示站</option></select><<以后站点:<selectname="select2"><optionvalue="123123">当局流派类演示站</option><optionvalue="456456">旧事流派类演示站</option><optionvalue="789789">企业抽象类演示站</option></select><<</div>
OK，在ff3下测试经由过程，在ie下存在层的定位成绩，当弹出下拉列表时必要对层的z-index作调剂，在这就不展现了。
假如这个select控件仅在前台作小量的使用，那末得当地增加一些对键盘，鼠标的呼应，就差未几能够了。
</p>
最近群里面很多人在问html5应该怎么学，这个问题其实没有标准答案。我开这个帖子，目的是为了收集大家每天的学习心得，欢迎大家来回复。 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。 可以使用 CSS 检查工具进行设计。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。
页:
[1]