快捷導(dǎo)航

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

更新時(shí)間：2010年11月21日 22:23:36 作者：

當(dāng)大家進(jìn)行復(fù)雜功能設(shè)計(jì)的時(shí)候，在對多級聯(lián)選擇進(jìn)行設(shè)計(jì)，為了獲得更好的用戶體驗(yàn)和節(jié)省頁面空間，往往會使用彈出層的方法。

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

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

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

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

復(fù)制代碼代碼如下:

 
$("#industry").click(function() { 
Boxy.industry("1,2", function(val) { 
alert("你選擇的是: " + val); 
}, { title: "行業(yè)類別選擇器" }); 
return false; 
}); 

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

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

復(fù)制代碼代碼如下:

 
$("#job").click(function() { 
Boxy.job("s1,b2", "2", function(val) { 
alert("你選擇的是: " + val); 
}, { title: "職位類別選擇器" }); 
return false; 
}); 

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

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

復(fù)制代碼代碼如下:

 
$("#city").click(function() { 
Boxy.area("d1,c7", "1,724", function(val) { 
alert("你選擇的是: " + val); 
}, { title: "工作地區(qū)選擇器" }); 
return false; 
}); 

存在Bug：

　　1.IE6 checkbox的margin設(shè)置會走樣，IE6的checkbox邊框清空是無效的，但對其它瀏覽器是有效的，而且很多人喜歡全局設(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為什么會出現(xiàn)這種問題，知道的那位告訴我吧。

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

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

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

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

　　2.三個(gè)選擇器分別表示三種級聯(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

您可能感興趣的文章: