精品亚洲无码,国产亚洲经典美女久久久,亚洲欧美精品久久

　分享我們的select控件設(shè)計過程

作者：abeet　時間： 2009-06-16　文檔類型：原創(chuàng)　來自：藍(lán)色理想

第 1 頁分享我們的select控件設(shè)計過程 [1]
第 2 頁分享我們的select控件設(shè)計過程 [2]
第 3 頁分享我們的select控件設(shè)計過程 [3]

有幾個原因促使我們使用自定義的select控件來代替原生的select控件：

在ie6下select是一個窗口級的元素，絕對定位的層會被select穿越（一般的解決方法是在層內(nèi)加一個iframe來遮住select）。
如果是自定義的select控件可以有更多的功能，下拉列表下的列表項可以更豐富，可以是列表、樹甚至是表格（如下圖）。

先把用HTML+CSS把select控件的外觀模擬出來：

這兒用到一張圖片arrow.gif

OK，在ff3下測試通過，在ie6、ie7下有一些錯位，需要加CSS hack來作小許的調(diào)整，為了代碼的純粹，在這就不展示了。

接下來試著用js實現(xiàn)基本功能：

通過JS替換頁面內(nèi)原有的select，當(dāng)時我們希望這個JS是非侵入式的，只要引用了select.js這個js文件的頁面，就自動把頁面里原有的select控件替換接管了。

先初步地實現(xiàn)selct控件的替換，和基本的交互（暫不考慮接管select的onchange事件等問題）。在下面的實現(xiàn)方法里并沒有把原有的select去掉，只是隱藏了起來，所以如果select是在表單內(nèi)，表單仍然能夠正常提交。

運行代碼框
<!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.95time.cn/articleimg/2009/06/6794/arrow.gif); } .zSelect .arrowimg:hover { background: url(http://www.95time.cn/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>當(dāng)前站點: <select name="select"> <option value="123123">政府門戶類演示站</option> <option value="456456">新聞門戶類演示站</option> <option value="789789">企業(yè)形象類演示站</option> </select> << 當(dāng)前站點: <select name="select2"> <option value="123123">政府門戶類演示站</option> <option value="456456">新聞門戶類演示站</option> <option value="789789">企業(yè)形象類演示站</option> </select> << </div>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

OK，在ff3下測試通過，在ie下存在層的定位問題，當(dāng)彈出下拉列表時需要對層的z-index作調(diào)整，在這就不展示了。

如果這個select控件僅在前臺作小量的應(yīng)用，那么適當(dāng)?shù)靥砑右恍⿲︽I盤，鼠標(biāo)的響應(yīng)，就差不多可以了。

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁下一頁分享我們的select控件設(shè)計過程 [2]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。

相關(guān)文章

更多相關(guān)鏈接

亞足聯(lián)新Logo的設(shè)計過程

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

用javascript實現(xiàn)select的美化

招聘網(wǎng)站的幾個新控件

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


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計比賽網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點最新

站點最新列表

周大�！熬�•自然”設(shè)計大賽開啟

國際體驗設(shè)計大會7月將在京舉行

中國國防科技信息中心標(biāo)志征集

云計算如何讓安全問題可控

云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會

阿里行云

云手機年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機主題設(shè)計大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx