boxy基于jquery的彈出層對話框插件擴展應用彈出層選擇器

2019-11-21 00:06:03

字體：大中小

來源：轉載

供稿：網友

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

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

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

調用例子：選擇編號為1和2的行業，并且定義選擇器標題為"行業類別選擇器"

復制代碼代碼如下:

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

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

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

復制代碼代碼如下:

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

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

調用例子：選擇編號為1和2的縣或區，定義選擇器的名稱為工作地區選擇器

復制代碼代碼如下:

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

存在Bug：

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

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

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

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

　　優點：

　　1.當然是漂亮唄！

　　2.三個選擇器分別表示三種級聯關系的選擇器，大家可以直接修改Demo中的數據源，及主體框架中的文字，即可變作其它的選擇器。

　　3.還有改進的空間，誰去把demo的css樣式整合一下，發上來吧。

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

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

上一篇：jquery 學習之一對象訪問

下一篇：IE6下出現JavaScript未結束的字符串常量錯誤的解決方法