boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器


Posted in Javascript onNovember 21, 2010

我们使用热门的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基于jquery的弹出层对话框插件扩展应用 弹出层选择器   
职位选择器:二级联,调用语句为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基于jquery的弹出层对话框插件扩展应用 弹出层选择器
职位选择器:三级联,调用语句为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; 
});

boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
存在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

Javascript 相关文章推荐
Confirmer JQuery确认对话框组件
Jun 09 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
js实现图片轮播效果
Dec 19 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
JavaScript实现简易计算器小功能
Oct 22 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 #Javascript
基于jquery的滑动样例代码
Nov 20 #Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 #Javascript
简单实用的js调试logger组件实现代码
Nov 20 #Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 #Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 #Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 #Javascript
You might like
中国收音机工业发展史
2021/03/02 无线电
Yii配置文件用法详解
2014/12/04 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
python绘图库Matplotlib的安装
2014/07/03 Python
pandas 选择某几列的方法
2018/07/03 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
python pandas库的安装和创建
2019/01/10 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
Python如何用filter函数筛选数据
2020/03/05 Python
python如何删除列为空的行
2020/07/17 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
美国牛仔品牌:True Religion
2018/11/16 全球购物
办公室前台岗位职责
2014/01/04 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
警察群众路线整改措施
2014/09/26 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
2015元旦标语横幅
2014/12/09 职场文书
督导岗位职责
2015/02/04 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL