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 相关文章推荐
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
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
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
JavaScript实现区块链
2018/03/14 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
Python编程实现蚁群算法详解
2017/11/13 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
对Python实现累加函数的方法详解
2019/01/23 Python
python3.7 sys模块的具体使用
2019/07/22 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
tensorboard显示空白的解决
2020/02/15 Python
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
环保建议书200字
2014/05/14 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
2014年党委工作总结
2014/11/22 职场文书
教师学期末个人总结
2015/02/13 职场文书
元旦主持词开场白
2015/05/29 职场文书
百年校庆感言
2015/08/01 职场文书
分享Python获取本机IP地址的几种方法
2022/03/17 Python