select发展史超强第1/2页_表单特效

作者：marvellous
本文旨在大家对select和模拟select有一个全面地了解,使此项技术能发挥出更高的水平。
最初的select的确很平淡,就是一个下拉选项列表:

日久天长之后,人们对select要求高了,要修一修边幅:

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

要加一些链接,变成菜单:

<STYLE> body { cursor: url(http://vip.6to23.com/candylau/image/xiucursor.cur)} </STYLE> <style> .select{border: 0 inset buttonface; width: 100; font: icon; cursor: default;} .selected{border: 0 inset buttonface; background: window; padding: 0; font: icon;} .selectTable{height: 100%; width: 100%;border: 2 inset buttonhighlight; background: buttonface;} .option    {font: icon; padding: 1; padding-left: 3; padding-right: 3; width: 100%;} .dropDown{position: absolute; visibility: hidden; width: 100%;border: 1 solid windowtext; padding: 0;background: window;} .select .button    {width: 16px; height: 5; font-family: webdings; padding: 0;font-size: 11px; border: 2 outset buttonhighlight;} </style> <script type="text/javascript"> var overOptionCss = "background: highlight; color: highlighttext"; var sizedBorderCss = "2 inset buttonhighlight"; var globalSelect; var ie4 = (document.all != null); var q = 0; function initSelectBox(el) {     copySelected(el);     var size = el.getAttribute("size");     el.options = el.children[1].children;     el.selectedIndex = findSelected(el);     el.remove = new Function("i", "int_remove(this,i)");     el.item   = new Function("i", "return this.options[i]");     el.add    = new Function("e", "i", "int_add(this, e, i)");         el.options[el.selectedIndex].selected = true;     dropdown = el.children[1];     if (size != null) {         if (size > 1) {             el.size = size;             dropdown.style.zIndex = 0;             initSized(el);         }         else {             el.size = 1;             dropdown.style.zIndex = 99;             if (dropdown.offsetHeight > 200) {                 dropdown.style.height = "200";                 dropdown.style.overflow = "auto";             }         }     }          highlightSelected(el,true); } function int_remove(el,i) {     if (el.options[i] != null)         el.options[i].outerHTML = ""; } function int_add(el, e, i) {     var html = "<div class='option' noWrap";     if (e.value != null)         html += " value='" + e.value + "'";     if (e.style.cssText != null)         html += " style='" + e.style.cssText + "'";     html += ">";     if (e.text != null)         html += e.text;     html += "</div>"     if ((i == null) || (i >= el.options.length))         i = el.options.length-1;     el.options[i].insertAdjacentHTML("AfterEnd", html); }      function initSized(el) {     var h = 0;     el.children[0].style.display = "none";     dropdown = el.children[1];     dropdown.style.visibility = "visible";     if (dropdown.children.length > el.size) {         dropdown.style.overflow = "auto";         for (var i=0; i<el.size; i++) {             h += dropdown.children[i].offsetHeight;         }         if (dropdown.style.borderWidth != null) {             dropdown.style.pixelHeight = h + 4;         }         else             dropdown.style.height = h;     }     dropdown.style.border = sizedBorderCss;     el.style.height = dropdown.style.pixelHeight; } function copySelected(el) {     var selectedIndex = findSelected(el);     selectedCell = el.children[0].rows[0].cells[0];     selectedDiv  =     el.children[1].children[selectedIndex];     selectedCell.innerHTML = selectedDiv.outerHTML; } function findSelected(el) {     var selected = null;     ec = el.children[1].children;     var ecl = ec.length;          for (var i=0; i<ecl; i++) {         if (ec[i].getAttribute("selected") != null) {             if (selected == null) {                 selected = i;             }             else                 ec[i].removeAttribute("selected");         }     }     if (selected == null)         selected = 0;     return selected; } function toggleDropDown(el) {     if (el.size == 1) {         dropDown = el.children[1];                  if (dropDown.style.visibility == "")             dropDown.style.visibility = "hidden";                      if (dropDown.style.visibility == "hidden")             showDropDown(dropDown);         else             hideDropDown(dropDown);     } } function optionClick() {     el = getReal(window.event.srcElement, "className", "option");     if (el.className == "option") {         dropdown  = el.parentElement;         selectBox = dropdown.parentElement;         oldSelected = dropdown.children[findSelected(selectBox)]         if(oldSelected != el) {             oldSelected.removeAttribute("selected");             el.setAttribute("selected", 1);             selectBox.selectedIndex = findSelected(selectBox);         }         if (selectBox.onchange != null) {             if (selectBox.id != "") {                 eval(selectBox.onchange.replace(/this/g, selectBox.id));             }             else {                 globalSelect = selectBox;                 eval(selectBox.onchange.replace(/this/g, "globalSelect"));             }         }         if (el.backupCss != null)         el.style.cssText = el.backupCss;         copySelected(selectBox);         toggleDropDown(selectBox);         highlightSelected(selectBox, true);     } } function optionOver() {     var toEl = getReal(window.event.toElement, "className", "option");     var fromEl = getReal(window.event.fromElement, "className", "option");     if (toEl == fromEl) return;     var el = toEl;     if (el.className == "option") {         if (el.backupCss == null)             el.backupCss = el.style.cssText;         highlightSelected(el.parentElement.parentElement, false);         el.style.cssText = el.backupCss + "; " + overOptionCss;         this.highlighted = true;     } } function optionOut() {     var toEl = getReal(window.event.toElement, "className", "option");     var fromEl = getReal(window.event.fromElement, "className", "option");     if (fromEl == fromEl.parentElement.children[findSelected(fromEl.parentElement.parentElement)]) {         if (toEl == null)             return;         if (toEl.className != "option")             return;     }          if (toEl != null) {         if (toEl.className != "option") {             if (fromEl.className == "option")                 highlightSelected(fromEl.parentElement.parentElement, true);         }     }          if (toEl == fromEl) return;     var el = fromEl;     if (el.className == "option") {         if (el.backupCss != null)             el.style.cssText = el.backupCss;     } } function highlightSelected(el,add) {     var selectedIndex = findSelected(el);     selected = el.children[1].children[selectedIndex];          if (add) {         if (selected.backupCss == null)             selected.backupCss = selected.style.cssText;         selected.style.cssText = selected.backupCss + "; " + overOptionCss;     }     else if (!add) {         if (selected.backupCss != null)             selected.style.cssText = selected.backupCss;     } } function hideShownDropDowns() { var el = getReal(window.event.srcElement, "className", "select"); var spans = document.all.tags("SPAN"); var selects = new Array(); var index = 0;          for (var i=0; i<spans.length; i++) { if ((spans[i].className == "select") && (spans[i] != el)) {     ropdown = spans[i].children[1]; if ((spans[i].size == 1) && (dropdown.style.visibility == "visible"))     selects[index++] = dropdown;     } } for (var j=0; j<selects.length; j++) { hideDropDown(selects[j]); } } function hideDropDown(el) {     if (typeof(fade) == "function")     fade(el, false);     else     el.style.visibility = "hidden"; } function showDropDown(el) {     if (typeof(fade) == "function")     fade(el, true);     else if (typeof(swipe) == "function")     swipe(el, 2);     else     el.style.visibility = "visible"; } function initSelectBoxes() { var spans = document.all.tags("SPAN"); var selects = new Array(); var index = 0; for (var i=0; i<spans.length; i++) { if (spans[i].className == "select") selects[index++] = spans[i]; } for (var j=0; j<selects.length; j++) { initSelectBox(selects[j]); }     } function getReal(el, type, value) { temp = el; while ((temp != null) && (temp.tagName != "BODY")) { if (eval("temp." + type) == value) { el = temp; return el; } temp = temp.parentElement; } return el; } if (ie4) { window.onload = initSelectBoxes; document.onclick = hideShownDropDowns; } function writeSelectBox(matrix, id, size, onchange, css) {     var d = window.document;     var ie4 = (document.all != null);     if (ie4) { //alert("Before!"); var s = createIEString(matrix, id, size, onchange, css); document.write(s); //alert("After!"); }else  { document.write(createXString(matrix, id, size, onchange, css));} } function createIEString(matrix, id, size, onchange, css) {     var str = "";         str += '<span class="select"';         if (size == null)             size = 1;         str += ' size="' + size + '"';             if (id != null)             str += ' id="' + id + '"';         if (onchange != null)             str += ' onchange="' + onchange + '"';         if (css != null)         str += ' style="' + css + '"';         str += '>/n';         str += '<table class="selectTable" cellspacing="0" cellpadding="0"/n';         str += ' onclick="toggleDropDown(this.parentElement)">/n';         str += '<tr>/n';         str += '<td class="selected"> </td>/n';         str += '<td align="CENTER" valign="MIDDLE" class="Button"/n';         str += ' onmousedown="this.style.border=/'2 inset buttonhighlight/'"/n';         str += ' onmouseup="this.style.border=/'2 outset buttonhighlight/'">/n';         str += '<span style="position: relative; left: 0; top: -2; width: 100%;">6</span></td>/n';         str += '</tr>/n';         str += '</table>/n';         str += '<div class="dropDown" onclick="optionClick()" onmouseover="optionOver()" onmouseout="optionOut()">/n';                  for (var i=0; i<matrix.length; i++) {             html     = matrix[i].html;             value    = matrix[i].value;             css      = matrix[i].css;             selected = matrix[i].selected;             str += '<div class="option"';             if (value != null)                 str += ' value="' + value + '"';             if (css != null)                 str += ' style="' + css + '"';             if (selected != null)                 str += ' selected';             str += '>/n';             str += html;             str += '</div>/n';         }         str += '</div>/n';         str += '</span>/n';     return str; } function createXString(matrix, id, size, onchange, css) { var str = '<form>/n'; str += '<select'; if (size == null)     size = 1; str += ' size="' + size + '"';     if (id != null)     str += ' id="' + id + '"'; if (onchange != null)     str += ' onchange="' + onchange + '"'; str += '>/n'; for (var i=0; i<matrix.length; i++) {     html     = matrix[i].html;     value    = matrix[i].value;     css      = matrix[i].css;     selected = matrix[i].selected;     str += '/n<option';     if (value != null)     str += ' value="' + value + '"';     if (selected != null)         str += ' selected';     str += '>';     str += stripTags(html);     str += '</option>/n';     }     str += '/n</select>/n';     str += '</form>/n'; return str; } function stripTags(str) {     var s = 0;     var e = -1;     var r = "";     s = str.indexOf("<",e);         do {         r += str.substring(e + 1,s);         e = str.indexOf(">",s);         s = str.indexOf("<",e);     }     while ((s != -1) && (e != -1))     r += str.substring(e + 1,str.length);     return r; } function Option(html, value, css, selected) {     this.html = html;     this.value = value;     this.css = css;     this.selected = selected; } </script> <script type="text/javascript"> var optionArray = new Array(); optionArray[0] = new Option("Item 1", "value 1", "color: blue; text-decoration: underline;"); optionArray[1] = new Option("Item <b>2</b>", "value 2"); optionArray[2] = new Option("Item 3", "value 3", "color: red;", "selected"); optionArray[3] = new Option("Item 4", "value 4"); optionArray[4] = new Option("Item 5", "value 5"); writeSelectBox(optionArray, "select1", 1, "alert(this.options[this.selectedIndex].value)", "margin-left: 10;"); </script>  <script type="text/javascript"> writeSelectBox(optionArray, "select3", 3, "alert(this.options[this.selectedIndex].value)", "margin-left: 10;"); </script>  <select onchange="if(this.options[this.selectedIndex].value!=''){location=this.options[this.selectedIndex].value;}" > <option value="http://www.163.com">网易</option> <option value="http://www.google.com">google</option> <option value="http://wwwsohu.com">搜狐</option> </select>  <form> <select size="1" name="D1" onchange=if(s=document.getElementById("S1")){s.style.backgroundColor=value}> <option selected value="white">请选择颜色</option> <option value="red">红色</option> <option value="blue">蓝色</option> <option value="green">绿色</option> </select>  <textarea rows="20" name="S1" cols="35"></textarea> </form>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

后来发展到其文字内容可以增、删、编、改，即可以编辑：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>EditSelect</title> <script> function isIE(){ a=navigator.appVersion.split(";") b=a[1].split(" ") return parseFloat(b[2]) } if (isIE()<5.5)  {      scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><div id="selecthtml" class="selectcontent">selectáD表</div></div>' } else {      scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><div id="selecthtml" class="selectcontent">selectáD表</div></div>' } document.write(scHTML) vDiv=selectcontent vDivHtml=selecthtml function editselect(name,size,defaulttext,width,height,readonly){   var combo=this;   this.options=new Array();   this.oj=new Array();   this.name=name;   this.divname=name+'_div';   this.buttonname=name+'_button';   this.tablename=name+'_table';   this.htmltable=name+'_html'   if (!height) this.height=0; else this.height=height   if (width) this.width=width   if (!size) size=8   if (!defaulttext) defaulttext=""   if (!readonly || readonly==0) {readonly="" }else {if (readonly==1) readonly="readonly style=cursor:default";this.readonly=1}      esHTML='<div id='+this.divname+'>'          +'<table id='+this.tablename+' cellpadding=0 cellspacing=0 class=select><tr><td bgcolor=#FFFFFF>'          +'<input type=text class=selecttext size="'+size+'" name='+name+' value="'+defaulttext+'" '+readonly+'><td><button class=selectbutton id='+this.buttonname+'>6</td></tr></table>'          +'</div>'   document.write(esHTML)   this.sbutton=eval("document.all."+this.buttonname)      if (this.readonly==1) eval("document.all."+this.name).onclick=function(){combo.show()}        this.sbutton.onclick=function(){combo.show()}   this.show=function(){     pDiv=eval(combo.divname)     pTable=eval(combo.tablename)     var vHTML='<table id=htmltable cellspacing="0" cellpadding="2" bgcolor="#ffffff" class="selecttable" width=100%>'     for (i=0;i<combo.options.length;i++)       {        vHTML+='<tr onmouseover="mo(this)" onmouseout="mu(this)" onclick="document.all.'+combo.name+'.value=this.innerText;selectcontent.style.visibility=/'hidden/';'+combo.oj[i]+'"><td nowrap>'+combo.options[i]       }      vHTML+="</table>"     vDivHtml.innerHTML=vHTML          vtop=pDiv.offsetTop+pDiv.offsetHeight     vleft=pDiv.offsetLeft+2               vParent = pDiv.offsetParent;      while (vParent.tagName.toUpperCase() != "BODY")  {   vleft += vParent.offsetLeft;   vtop += vParent.offsetTop;   vParent = vParent.offsetParent;  }    var redge=document.body.clientWidth-vleft    var bedge=document.body.clientHeight-vtop        if (!combo.width) {vDiv.style.width=pTable.offsetWidth} else {vDiv.style.width=combo.width}          if (combo.height==0)       {         vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2         vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2       }       else       {          if (htmltable.offsetHeight>combo.height)           {             vDiv.style.pixelHeight=combo.height             vDivHtml.style.pixelHeight=combo.height             }             else             {                          vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2               vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2            }            }          vDivHtml.scrollTop=0          if (redge<vDiv.offsetWidth)       vDiv.style.left=vleft-1-(vDiv.offsetWidth-redge)         else       vDiv.style.left=vleft-1           if (bedge<vDiv.offsetHeight)     //vDiv.style.top=vtop-vDiv.offsetHeight-pDiv.offsetHeight     vDiv.style.top=vtop-vDiv.offsetHeight+bedge          else       vDiv.style.top=vtop                 vDivHtml.style.width=parseInt(vDiv.style.width)       vDiv.style.visibility="visible"   }      this.add=function(text,js){      combo.options[combo.options.length]=text      combo.oj[combo.oj.length]=js   }      this.clearall=function(){   combo.options=new Array()   }   this.about=function(){     } } function mo(obj){ obj.style.backgroundColor="#000099" obj.style.color="#ffffff" } function mu(obj){ obj.style.backgroundColor="" obj.style.color="#000000" } document.onmousedown=function(){ if (vDiv.style.visibility=="visible"){ mx=event.x + document.body.scrollLeft my=event.y + document.body.scrollTop; x1=vDiv.offsetLeft y1=vDiv.offsetTop x2=vDiv.offsetLeft+vDiv.offsetWidth y2=vDiv.offsetTop+vDiv.offsetHeight if (mx<x1 || my<y1 || x2<mx || y2<my)     {       vDiv.style.visibility='hidden'    } } }</script> <style> .selecttext{ border:0px height: 16; font-family:arial; font-size:12px; } .selectbutton{ font-family:webdings; font-size:10px; height: 19; width: 16;  border:1px solid #83A5EB; line-height:0px; padding-bottom:3px; background-color:#D1E0FD } .selecttable{ font-family:arial; font-size:12px; cursor:default; } .selectcontent { position: absolute; top:0; left:0; overflow:auto; border:1px solid #000000 } .selectdiv { position: absolute;  width:100; overflow:hidden; } .select{ border-collapse: collapse; border:1px solid #7F9DB9 } </style> </head> <body bgcolor="#83A5EB" background="http://moodboy.com/puterjam/blog/attachments/month_0408/oldr_cs1.JPG"> <table border="0" width="100%">  <tr>   <td width="151" align="center"><font size="2">可编辑的Select</font></td>   <td><script> var sel1=new editselect("select1","25","可编辑的Select",""); sel1.add("这是一个可以编辑的Select") sel1.add("支持CSS") sel1.add("可以通过CSS，修改外形") sel1.add("突破原来的Select诸多限制") </script></td>  </tr>  <tr>   <td width="151" align="center"><font size="2">长度可以随意修改 可以设置为只读</font></td>   <td>   <script> var sel2=new editselect("select2","20","长度可以随意修改",250,82,1); sel2.add("这是一个可以编辑的Select") sel2.add("支持CSS") sel2.add("可以通过CSS，修改外形") sel2.add("作者:舜子制作") sel2.add("MSN:puterjam@msn.com") </script>   </td>  </tr>  <tr>   <td width="151" align="center"><font size="2">可以遮盖系统Select</font></td>   <td>   <script> var sel3=new editselect("select3","25","可以遮盖系统Select","",41); sel3.add("这是一个可以编辑的Select") sel3.add("支持CSS") sel3.add("可以通过CSS，修改外形") sel3.add("突破原来的Select诸多限制") </script>   </td>  </tr>  <tr>   <td width="151" align="right">　</td>   <td><select><option>系统的Select</option></select>　</td>  </tr> </table> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

当前1/2页 1 2 下一页

select发展史 超强第1/2页_表单特效_

select发展史超强第1/2页_表单特效_