我們使用熱門的jquery進(jìn)行設(shè)計(jì)，同時(shí)我們選擇效果比較優(yōu)秀的boxy彈出插件進(jìn)行擴(kuò)展(關(guān)于boxy的相關(guān)資料，請(qǐng)參照張鑫旭博客http://www.zhangxinxu.com/wordpress/?p=318)。下面介紹boxy作為選擇器框架的應(yīng)用。

　　對(duì)于選擇器，相信用過招聘網(wǎng)站的人都不會(huì)陌生(就是那個(gè)點(diǎn)擊就彈出的，選擇行業(yè)、職位和地區(qū)的東西)，選擇器難點(diǎn)就在于樣式調(diào)試，主要針對(duì)的是IE6。這里介紹行業(yè)、職位和地區(qū)選擇器，下載的Demo包含這三個(gè)選擇器。

　　行業(yè)選擇器：無關(guān)聯(lián)，調(diào)用語句為Boxy.industry(value, callback, options),參數(shù)value為已選定值編號(hào)集合(字符串類型，編號(hào)間以逗號(hào)分割)，callback為可定義回調(diào)函數(shù)，傳入callback的值為行業(yè)選擇器選中項(xiàng)的編號(hào)集合(字符串類型，編號(hào)間以逗號(hào)分割)，options為boxy插件可選參數(shù)。

調(diào)用例子：選擇編號(hào)為1和2的行業(yè)，并且定義選擇器標(biāo)題為"行業(yè)類別選擇器"

   
職位選擇器：二級(jí)聯(lián)，調(diào)用語句為Boxy.job(value, shown, callback, options),參數(shù)value為已選定值編號(hào)集合(字符串類型，編號(hào)間以逗號(hào)分割，以b開頭表示選擇職位大類，以s開頭表示選擇職位小類)，參數(shù)shown表示展示的職位大類的編號(hào)，參數(shù)callback為可定義回調(diào)函數(shù)，傳入callback的值為職位選擇器選中項(xiàng)的編號(hào)集合(字符串類型，編號(hào)間以逗號(hào)分割)，options為boxy插件可選參數(shù)。

調(diào)用例子：選擇編號(hào)為1的職位小類，編號(hào)為2的職位大類，定義選擇器的名稱為職位類別選擇器


職位選擇器：三級(jí)聯(lián)，調(diào)用語句為Boxy.area(value, shown, callback, options),參數(shù)value為已選定值編號(hào)集合(字符串類型，編號(hào)間以逗號(hào)分割，以p開頭表示選擇省份，以c開頭表示選擇城市，以d開頭表示選擇縣區(qū))，參數(shù)shown表示展示的地區(qū)的編號(hào)，參數(shù)callback為可定義回調(diào)函數(shù)，傳入callback的值為地區(qū)選擇器選中項(xiàng)的編號(hào)集合(字符串類型，編號(hào)間以逗號(hào)分割)，options為boxy插件可選參數(shù)。

調(diào)用例子：選擇編號(hào)為1和2的縣或區(qū)，定義選擇器的名稱為工作地區(qū)選擇器


存在Bug：

　　1.IE6 checkbox的margin設(shè)置會(huì)走樣，IE6的checkbox邊框清空是無效的，但對(duì)其它瀏覽器是有效的，而且很多人喜歡全局設(shè)定input的margin/padding為零，為了統(tǒng)一樣式，唯有不管IE6了。

　　2.IE8 環(huán)境下，css設(shè)置選項(xiàng)<a>的hover效果遲鈍甚至沒反應(yīng)，其它瀏覽器不存在這個(gè)問題(包括IE6)，js代碼解決也不是可取之道，代碼hover反應(yīng)還是有點(diǎn)慢。實(shí)在搞不懂IE8為什么會(huì)出現(xiàn)這種問題，知道的那位告訴我吧。

　　3.IE6下超長的選中項(xiàng)，顯示的區(qū)域不夠，在父標(biāo)簽中不會(huì)自動(dòng)換行，而是在顯示的選中項(xiàng)自身內(nèi)部換行輸出文字，造成樣式走樣。這個(gè)問題我也不知道怎么解決，誰知道告訴我吧。

　　4.暫時(shí)還沒發(fā)現(xiàn)(可能大家會(huì)說IE6下確定按鈕的hover效果，這個(gè)也不是什么bug，只是無關(guān)緊要的我懶得改，把標(biāo)簽該<a>就行了，不過實(shí)在不喜歡<a>，整天為IE6做無用功)。

　　優(yōu)點(diǎn)：

　　1.當(dāng)然是漂亮唄！

　　2.三個(gè)選擇器分別表示三種級(jí)聯(lián)關(guān)系的選擇器，大家可以直接修改Demo中的數(shù)據(jù)源，及主體框架中的文字，即可變作其它的選擇器。

　　3.還有改進(jìn)的空間，誰去把demo的css樣式整合一下，發(fā)上來吧。

　　悄悄告訴大家，選擇器的外框圓角效果是使用png圖片實(shí)現(xiàn)的，如果想更改透明程度，唯有重做圖片了，如果愿意撇開IE6的話，可以使用另一種常用的圓角方法(不用圖片只用css樣式)，方法已經(jīng)寫進(jìn)boxy插件當(dāng)中了(被我注釋掉，包括樣式文件)，還有一種圓角方法在demo的round-corner.html文件中也介紹了，ExtendedBoxy.html為選擇器的demo文件。其它的兩個(gè)關(guān)于Boxy的html文件可是張鑫旭同學(xué)寫的哦，張同學(xué)博客http://www.zhangxinxu.com/php/上可是有很多好東西的，大家有空上去看看吧。

　　Demo下載地址：/201011/yuanma/jquery-plugin-ExtendedBoxy.rar

最新評(píng)論