boxy基于jquery的彈出層對(duì)話框插件擴(kuò)展應(yīng)用彈出層選擇器_jquery

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

　　行業(yè)選擇器：無(wú)關(guān)聯(lián)，調(diào)用語(yǔ)句為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è)類別選擇器"
代碼如下:
$("#industry").click(function() {
Boxy.industry("1,2", function(val) {
alert("你選擇的是: " + val);
}, { title: "行業(yè)類別選擇器" });
return false;
});


職位選擇器：二級(jí)聯(lián)，調(diào)用語(yǔ)句為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的職位大類，定義選擇器的名稱為職位類別選擇器
代碼如下:
$("#job").click(function() {
Boxy.job("s1,b2", "2", function(val) {
alert("你選擇的是: " + val);
}, { title: "職位類別選擇器" });
return false;
});


職位選擇器：三級(jí)聯(lián)，調(diào)用語(yǔ)句為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ū)選擇器
代碼如下:
$("#city").click(function() {
Boxy.area("d1,c7", "1,724", function(val) {
alert("你選擇的是: " + val);
}, { title: "工作地區(qū)選擇器" });
return false;
});


存在Bug：

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

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

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

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

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

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

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

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

　　悄悄告訴大家，選擇器的外框圓角效果是使用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文件可是張?chǎng)涡裢瑢W(xué)寫的哦，張同學(xué)博客http://www.zhangxinxu.com/php/上可是有很多好東西的，大家有空上去看看吧。

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com