boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
时间：2020-12-01 12:46:51|栏目：jquery|点击： 次
我们使用热门的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
对于选择器，相信用过招聘网站的人都不会陌生(就是那个点击就弹出的，选择行业、职位和地区的东西)，选择器难点就在于样式调试，主要针对的是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
下一篇：ie8模式下click无反应点击option无反应的解决方法
本文标题：boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
本文地址：http://www.codeinn.net/misctech/28330.html
