快捷導(dǎo)航

select發(fā)展史超強第1/2頁

更新時間：2007年02月07日 00:00:00 作者：

作者：marvellous
本文旨在大家對select和模擬select有一個全面地了解,使此項技術(shù)能發(fā)揮出更高的水平。
最初的select的確很平淡,就是一個下拉選項列表:

日久天長之后,人們對select要求高了,要修一修邊幅:

<center> <form name="form1">   <select name="select01">     <option>11111 111111 111111111111</option>     <option>2222222</option>     <option>333333</option>     <option>4444444</option>   </select> <span style="position:relative;left:-23px;width:17px;height:17px;font:7px 'wingdings 3';color:#cc0000;background:cyan;border:2px outset;text-align:center;padding-top:3px;cursor:default" onclick="if(i>=document.form1.select01.options.length){i=0}document.form1.select01.options[i].selected=true;i++">q <iframe src="" style="position:absolute;top:0;left:0;z-index:-1; width:15px;height:15px;filter:alpha(opacity=0))" frameborder="0"></iframe> </span> </form>  <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> .table1{background-color:white;FONT-FAMILY: Courier New, Courier;font-size:12px} .td_out{FONT-FAMILY: Courier New, Courier;font-size:12px;color:#000000;height:15px;border:1 solid #ffffff;} .td_over{FONT-FAMILY: Courier New, Courier;font-size:12px;cursor:default;background-color:#3366cc;border:1 solid #000000;color:#ffffff;height:15px} .slv{vertical-align:bottom;FONT-FAMILY: Courier New, Courier;font-size:12px;border-left-width:0;border-top-width:0;border-bottom-width:0;border-right:0 solid #000000;vertical-align:middle;height:18px;color:#000000;} .down{position:relative;left:-2px;font-size:11px;vertical-align:middle;width:16;height:16;color:#2050b0;background-color:#D0DFF7;border:1 solid #9fA3Ce;writing-mode:tb-rl;font-weight:bold; } .seldiv{ position:absolute;z-index:1000;overflow-x:hidden;border-left:1 solid #000000;border-bottom:1 solid #000000;border-right:1 solid #000000; SCROLLBAR-FACE-COLOR: #d0dff7;  SCROLLBAR-HIGHLIGHT-COLOR: #d0dff7;  SCROLLBAR-SHADOW-COLOR: #FFFFFF;  SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;  SCROLLBAR-ARROW-COLOR: #ffffff;  SCROLLBAR-TRACK-COLOR: #ffffff;  SCROLLBAR-DARKSHADOW-COLOR: #d0dff7;} </style>  </head> <body>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

要加一些鏈接,變成菜單:

<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>      <select onchange="if(this.options[this.selectedIndex].value!=''){location=this.options[this.selectedIndex].value;}" > <option value="http://www.163.com">網(wǎng)易</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需再刷新一下頁面才能執(zhí)行]

<SELECT onchange="window.open(this.value,'','')"> <OPTION>產(chǎn)品快速導(dǎo)航</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=1&amp;CateId=1 selected>多媒體產(chǎn)品</OPTION> <OPTION value=http://www.tcl.com/03product/tv/chanpin-hid.htm>&nbsp;&nbsp;DLP數(shù)字光顯背投</OPTION> <OPTION value=http://www.tclking.com>&nbsp;&nbsp;LCD液晶電視</OPTION> <OPTION value=http://www.tcl.com/03product/tv/chanpin-hid.htm>&nbsp;&nbsp;數(shù)字高清背投</OPTION> <OPTION value=http://www.tcl.com/03product/tv/chanpin-pdp.htm>&nbsp;&nbsp;PDP等離子電視</OPTION> <OPTION value=http://www.tcl.com/03product/tv/chanpin-crt.htm>&nbsp;&nbsp;CRT高清彩電</OPTION> <OPTION value=03product/pro2.jsp?cateID=1&amp;CateId=61>&nbsp;&nbsp;酒店電視</OPTION> <OPTION value=03product/pro2.jsp?cateID=1&amp;CateId=141>&nbsp;&nbsp;樂華彩電</OPTION> <OPTION value=http://av.tcl.com/03products/List.asp?ListID=246>&nbsp;&nbsp;視盤機</OPTION> <OPTION value=http://www.tcl.com/03product/mon/index.html>&nbsp;&nbsp;監(jiān)視器</OPTION> <OPTION value=http://www.tcl.com/03product/vw/index.html>&nbsp;&nbsp;電視墻</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=11&amp;CateId=1>通訊產(chǎn)品</OPTION> <OPTION value=http://www.tclmobile.com.cn/mobile/product.jsp?catid=77>&nbsp;&nbsp;手機</OPTION> <OPTION value=03product/pro2.jsp?cateID=11&amp;CateId=18>&nbsp;&nbsp;電話機</OPTION> <OPTION value=03product/pro2.jsp?cateID=11&amp;CateId=19>&nbsp;&nbsp;網(wǎng)絡(luò)設(shè)備</OPTION> <OPTION value=03product/pro2.jsp?cateID=11&amp;CateId=293>&nbsp;&nbsp;寬帶產(chǎn)品</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=12&amp;CateId=1>數(shù)碼產(chǎn)品</OPTION> <OPTION value=http://www.tcl-digital.com/product/family.asp>&nbsp;&nbsp;家用電腦</OPTION> <OPTION value=http://www.tcl-digital.com/product/business.asp>&nbsp;&nbsp;商用電腦</OPTION> <OPTION value=http://www.tcl-digital.com/product/notebook.asp>&nbsp;&nbsp;筆記本電腦</OPTION> <OPTION value=http://www.tcl-digital.com/product/digital.asp>&nbsp;&nbsp;DV產(chǎn)品</OPTION> <OPTION value=http://www.tcl-digital.com/product/digital.asp?Cateid=82>&nbsp;&nbsp;MP3播放器</OPTION> <OPTION value=http://www.go-video.com.cn/html/productshow.asp?sortid=25&amp;sortid2=7>&nbsp;&nbsp;MP4播放器</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=13&amp;CateId=1>家電產(chǎn)品</OPTION> <OPTION value=03product/pro2.jsp?cateID=13&amp;CateId=25>&nbsp;&nbsp;電冰箱</OPTION> <OPTION value=03product/pro2.jsp?cateID=13&amp;CateId=26>&nbsp;&nbsp;洗衣機</OPTION> <OPTION value=http://www.tclac.com/tclaccn/product/product.aspx>&nbsp;&nbsp;空調(diào)</OPTION> <OPTION value=http://www.tclac.com/tclaccn/product/productlist6.aspx>&nbsp;&nbsp;中央空調(diào)</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist1.aspx>&nbsp;&nbsp;電飯煲</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist2.aspx>&nbsp;&nbsp;電磁爐</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist3.aspx>&nbsp;&nbsp;電風(fēng)扇</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist4.aspx>&nbsp;&nbsp;飲水機</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist5.aspx>&nbsp;&nbsp;電暖器</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist6.aspx>&nbsp;&nbsp;凈水器</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist7.aspx>&nbsp;&nbsp;燒烤爐</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=14&amp;CateId=1>電氣產(chǎn)品</OPTION> <OPTION value=http://www.tcl-elc.com/main/gb/product/index.jsp>&nbsp;&nbsp;開關(guān)插座</OPTION> <OPTION value=http://www.tcl-lighting.com/products.asp>&nbsp;&nbsp;照明產(chǎn)品</OPTION> <OPTION value=http://www.tclelec.com/product/product_ljfl.htm>&nbsp;&nbsp;工業(yè)電器</OPTION> <OPTION value=03product/pro2.jsp?cateID=14&amp;CateId=161>&nbsp;&nbsp;智能樓宇</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=15&amp;CateId=1>部品產(chǎn)品</OPTION> <OPTION value=http://www.asic.com.cn/cn/product.htm>&nbsp;&nbsp;集成電路</OPTION> <OPTION value=http://www.tclrf.com/products/index.html>&nbsp;&nbsp;高頻頭</OPTION> <OPTION value=http://www.tclbattery.com/china/product01.asp>&nbsp;&nbsp;電池</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=16&amp;CateId=1>文化產(chǎn)品</OPTION> <OPTION value=http://www.meikamusic.com/>&nbsp;&nbsp;美卡音像</OPTION> <OPTION value=http://www.tcl-disc.com/tp.htm>&nbsp;&nbsp;TCL光盤</OPTION></SELECT>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

后來發(fā)展到其文字內(nèi)容可以增、刪、編、改，即可以編輯：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>EditSelect</title>  <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></td>  </tr>  <tr>   <td width="151" align="center"><font size="2">長度可以隨意修改 可以設(shè)置為只讀</font></td>   <td>      </td>  </tr>  <tr>   <td width="151" align="center"><font size="2">可以遮蓋系統(tǒng)Select</font></td>   <td>      </td>  </tr>  <tr>   <td width="151" align="right">　</td>   <td><select><option>系統(tǒng)的Select</option></select>　</td>  </tr> </table> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

12 下一頁閱讀全文