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 相关文章推荐
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
使用JS读秒使用示例
Sep 21 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
js实现时分秒倒计时
Dec 03 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
总结Python编程中函数的使用要点
2016/03/20 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
物业管理员岗位职责范文
2013/11/25 职场文书
信息技术专业个人自我评价
2013/12/11 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书